分享一次前端小白的面試題

追_光_者發表於2019-03-31
前端面試題

筆試部分

  1. 依次請寫出彈出值，並解釋為什麼
+function() {
    alert(a)
    a()
    var a = function() {
        console.log(1)
    }
    function a() {
        console.log(2)
    }
    alert(a)
    a()
    var c = d = a
}();
alert(d)
alert(c)
複製程式碼
結果
function() {console.log(2)}
2
function() {console.log(1)}
1
function() {console.log(1)}
報錯

原因：
前四個答案： 變數提示所導致
第五個答案： 因為變數在函式中沒有用 var 來宣告，所以是一個全域性變數
第六個答案： 函式作用域，在函式內部定義的變數外面訪問不到
複製程式碼
  1. 這段程式碼有什麼問題，應該怎麼改進？
for (var i = 0; i< 10; i++) {
    document.body.innerHTML += '<li></li>'
}
複製程式碼
結果
複製程式碼

所在的問題：頻繁的改變 Dom 造成效能問題

解決方法：定義一個變數，儲存需要插入的 Dom ，只執行一次插入操作

let html = ''

for (var i = 0; i< 10; i++) {
    html += '<li></li>'
}

document.body.innerHTML = html
複製程式碼
  1. 請寫出該程式的輸出結果
var obj1 = {name: 'obj1', fn: function() {
    console.log(this.name)
}}
var obj2 = {name: 'obj2'}
var obj3 = {name: 'obj3'}
obj1.fn()
var newFn = obj1.fn
newFn()
newFn.call(obj2)
obj3.fn = newFn
obj3.fn()
複製程式碼
結果
複製程式碼
    obj1
    undefined
    obj2
    obj3
複製程式碼

對上述答案不理解的可以參考這篇文章

  1. 什麼是 CDN? 請說明靜態資原始檔放入 CND 的好處？

簡短來說：cnd 就是一個存放靜態資源的伺服器。

好處：1: 節省網路時間，加快相應速度 2: 降低自身伺服器的壓力

詳細解釋見這裡

  1. 常見的前端效能優化手段有哪些？
  1. css, js, 圖片的壓縮
  2. 可以使用雪碧圖，來較少網路請求
  3. css 選擇器不要超過 3 層
  4. 減少對 dom 的操作
  5. 可以對提交按鈕做防抖操作
  6. 對圖片可以進行懶載入
  7. 靜態資源使用 cdn 加速
  1. 要實現一個兩側固定寬度，中間自適應的佈局怎麼實現？

1，左側做浮動，右側有浮動，中間絕對定位 left 設定成左側盒子的寬度，right 設定成右側盒子的寬度

  1. 三個盒子都用絕對定位實現
  1. 使用彈性盒子佈局，將父盒子設定成彈性盒子，並將屬性設定成橫向排列，不支援換行，左右寬度固定，中間盒子設定成flex: 1;

面對這種題不要只回答一種方法，儘量多寫

  1. 對 React，Vue瞭解嗎？簡述一下它們的優缺點

面試部分

  1. 專案中有沒有使用過 CDN ，CND 為什麼能夠提高效能，是怎麼上傳至 CDN 的。

  2. 談談對原型鏈的理解，手寫列子實現能用幾種方式實現？

    可以參考 JavaScript高階程式設計 第三版

  3. 有沒有了解過 es6 是怎麼實現原型鏈的，通過 babel 轉換成 es5 又是怎麼樣的？

    ECMAScript 入門

  4. 陣列的 forEach, map, filter, reduce, some, every 分別代表什麼意思

  • forEach 迴圈陣列的每一項
  • map 對映返回一個新的陣列
  • filter 過濾，返回條件為真的，放到一個新的陣列中
  • reduce 可以做累加的功能，返回的資料型別根據你的初始值來確定
  • some 只要陣列中有一項符合條件就返回 true
  • every 陣列中的每一項都符合條件就返回 true

  1. 怎麼理解 es6 中的 Set, Map 資料結構

    ECMAScript 入門

  2. 談談對 Promise 的理解，並回答下列題目及原因

let p = new Promise((resolve, reject) => {
    resolve(1)
})

p.then(res => res + 1)

p.then(res => console.log(res))

// 回答輸出 1

面試官接著問：如果想要結果是 2 該怎麼實現？

// 鏈式呼叫 （因為.then 裡面返回的資料會自動包裹一個 Promise 物件）
複製程式碼
  1. 瀏覽器輸入一個地址回車之後直到頁面顯示出來以後，這過過程中發生了什麼，請簡述一下
  2. 對自己的有沒有一個職業規劃，平時自己是怎麼去一步一步實現的。

謝謝大家的閱讀，有錯誤之處，敬請指教。

相關文章