筆試部分
- 依次請寫出彈出值，並解釋為什麼
+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 來宣告，所以是一個全域性變數
第六個答案： 函式作用域，在函式內部定義的變數外面訪問不到
複製程式碼- 這段程式碼有什麼問題，應該怎麼改進？
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
複製程式碼- 請寫出該程式的輸出結果
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
複製程式碼- 什麼是 CDN? 請說明靜態資原始檔放入 CND 的好處？
簡短來說：cnd 就是一個存放靜態資源的伺服器。
好處：1: 節省網路時間，加快相應速度 2: 降低自身伺服器的壓力
- 常見的前端效能優化手段有哪些？
- css, js, 圖片的壓縮
- 可以使用雪碧圖，來較少網路請求
- css 選擇器不要超過 3 層
- 減少對 dom 的操作
- 可以對提交按鈕做防抖操作
- 對圖片可以進行懶載入
- 靜態資源使用 cdn 加速
- 要實現一個兩側固定寬度，中間自適應的佈局怎麼實現？
1，左側做浮動，右側有浮動，中間絕對定位 left 設定成左側盒子的寬度，right 設定成右側盒子的寬度
- 三個盒子都用絕對定位實現
- 使用彈性盒子佈局，將父盒子設定成彈性盒子，並將屬性設定成橫向排列，不支援換行，左右寬度固定，中間盒子設定成flex: 1;
面對這種題不要只回答一種方法，儘量多寫
- 對 React，Vue瞭解嗎？簡述一下它們的優缺點
面試部分
-
專案中有沒有使用過 CDN ，CND 為什麼能夠提高效能，是怎麼上傳至 CDN 的。
-
談談對原型鏈的理解，手寫列子實現能用幾種方式實現？
可以參考 JavaScript高階程式設計 第三版
-
有沒有了解過 es6 是怎麼實現原型鏈的，通過 babel 轉換成 es5 又是怎麼樣的？
-
陣列的 forEach, map, filter, reduce, some, every 分別代表什麼意思
- forEach 迴圈陣列的每一項
- map 對映返回一個新的陣列
- filter 過濾，返回條件為真的，放到一個新的陣列中
- reduce 可以做累加的功能，返回的資料型別根據你的初始值來確定
- some 只要陣列中有一項符合條件就返回 true
- every 陣列中的每一項都符合條件就返回 true
-
怎麼理解 es6 中的 Set, Map 資料結構
-
談談對 Promise 的理解，並回答下列題目及原因
let p = new Promise((resolve, reject) => {
resolve(1)
})
p.then(res => res + 1)
p.then(res => console.log(res))
// 回答輸出 1
面試官接著問：如果想要結果是 2 該怎麼實現？
// 鏈式呼叫 （因為.then 裡面返回的資料會自動包裹一個 Promise 物件）
複製程式碼- 瀏覽器輸入一個地址回車之後直到頁面顯示出來以後，這過過程中發生了什麼，請簡述一下
- 對自己的有沒有一個職業規劃，平時自己是怎麼去一步一步實現的。
謝謝大家的閱讀，有錯誤之處，敬請指教。