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

筆試部分

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 來聲明，因此是一個全局變量
第六個答案： 函數做用域，在函數內部定義的變量外面訪問不到
複製代碼

2. 這段代碼有什麼問題，應該怎麼改進？

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
複製代碼

3. 請寫出該程序的輸出結果

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
複製代碼

對上述答案不理解的能夠參考這篇文章

4. 什麼是 CDN? 請說明靜態資源文件放入 CND 的好處？

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

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

詳細解釋見這裏

5. 常見的前端性能優化手段有哪些？

1. css, js, 圖片的壓縮
2. 可使用雪碧圖，來較少網絡請求
3. css 選擇器不要超過 3 層
4. 減小對 dom 的操做
5. 能夠對提交按鈕作防抖操做
6. 對圖片能夠進行懶加載
7. 靜態資源使用 cdn 加速

6. 要實現一個兩側固定寬度，中間自適應的佈局怎麼實現？

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

2. 三個盒子都用絕對定位實現

3. 使用彈性盒子佈局，將父盒子設置成彈性盒子，並將屬性設置成橫向排列，不支持換行，左右寬度固定，中間盒子設置成flex: 1;

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

7. 對 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

5. 怎麼理解 es6 中的 Set, Map 數據結構

   ECMAScript 入門

6. 談談對 Promise 的理解，並回答下列題目及緣由

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

p.then(res => res + 1)

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

// 回答輸出 1

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

// 鏈式調用 （由於.then 裏面返回的數據會自動包裹一個 Promise 對象）
複製代碼

6. 瀏覽器輸入一個地址回車以後直到頁面顯示出來之後，這過過程當中發生了什麼，請簡述一下
7. 對本身的有沒有一個職業規劃，平時本身是怎麼去一步一步實現的。

謝謝你們的閱讀，有錯誤之處，敬請指教。