近日，GitHub上一位名爲木易楊（yygmind）的開發者，在 GitHub 中建了一個名爲Advanced-Frontend/Daily-Interview-Question項目，該項目每天會更新一道前端大廠面試題，並邀請開發者在issue區中作答，以下是我們從該項目中挑選的9道題和答案，希望能給大家一些幫助。
GitHub鏈接：
https://github.com/Advanced-Frontend/Daily-Interview-Question
1.寫 React/Vue 項目時爲什麼要在組件中寫 key，其作用是什麼？
key的作用是爲了在diff算法執行時更快的找到對應的節點，提高diff速度。
vue和react都是採用diff算法來對比新舊虛擬節點，從而更新節點。在vue的diff函數中。可以先了解一下diff算法。
在交叉對比的時候，當新節點跟舊節點頭尾交叉對比沒有結果的時候，會根據新節點的key去對比舊節點數組中的key，從而找到相應舊節點（這裏對應的是一個key => index 的map映射）。如果沒找到就認爲是一個新增節點。而如果沒有key，那麼就會採用一種遍歷查找的方式去找到對應的舊節點。一種一個map映射，另一種是遍歷查找。相比而言。map映射的速度更快。
vue部分源碼如下：
// vue項目 src/core/vdom/patch.js -488行
// oldCh 是一箇舊虛擬節點數組，
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
idxInOld = isDef(newStartVnode.key)
? oldKeyToIdx[newStartVnode.key]
: findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
創建map函數：
function createKeyToOldIdx (children, beginIdx, endIdx) {
let i, key
const map = {}
for (i = beginIdx; i <= endIdx; ++i) {
key = children[i].key
if (isDef(key)) map[key] = i
}
return map
}
遍歷尋找：
// sameVnode 是對比新舊節點是否相同的函數
function findIdxInOld (node, oldCh, start, end) {
for (let i = start; i < end; i++) {
const c = oldCh[i]
if (isDef(c) && sameVnode(node, c)) return i
}
}
本題鏈接：https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/1
2. 解析[‘1’, ‘2’, ‘3’].map(parseInt)
第一眼看到這個題目的時候，腦海跳出的答案是 [1, 2, 3]，但是真正的答案是[1, NaN, NaN]。
- 首先讓我們回顧一下，map函數的第一個參數callback：
var new_array = arr.map(function callback(currentValue[, index[, array]]) { // Return element for new_array }[, thisArg])
這個callback一共可以接收三個參數，其中第一個參數代表當前被處理的元素，而第二個參數代表該元素的索引。
- 而parseInt則是用來解析字符串的，使字符串成爲指定基數的整數。
parseInt(string, radix)接收兩個參數，第一個表示被處理的值（字符串），第二個表示爲解析時的基數。
- 瞭解這兩個函數後，我們可以模擬一下運行情況
-
parseInt(‘1’, 0) //radix爲0時，且string參數不以“0x”和“0”開頭時，按照10爲基數處理。這個時候返回1；
-
parseInt(‘2’, 1) //基數爲1（1進制）表示的數中，最大值小於2，所以無法解析，返回NaN；
-
parseInt(‘3’, 2) //基數爲2（2進制）表示的數中，最大值小於3，所以無法解析，返回NaN。
-
map函數返回的是一個數組，所以最後結果爲[1, NaN, NaN]。
-
最後附上MDN上對於這兩個函數的鏈接，具體參數大家可以到裏面看：
-
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt
-
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map
本題鏈接：
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/4
3.什麼是防抖和節流？有什麼區別？如何實現？
- 防抖
觸發高頻事件後n秒內函數只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間；
- 思路：
每次觸發事件時都取消之前的延時調用方法：
function debounce(fn) {
let timeout = null; // 創建一個標記用來存放定時器的返回值
return function () {
clearTimeout(timeout); // 每當用戶輸入的時候把前一個 setTimeout clear 掉
timeout = setTimeout(() => { // 然後又創建一個新的 setTimeout, 這樣就能保證輸入字符後的 interval 間隔內如果還有字符輸入的話，就不會執行 fn 函數
fn.apply(this, arguments);
}, 500);
};
}
function sayHi() {
console.log('防抖成功');
}
var inp = document.getElementById('inp');
inp.addEventListener('input', debounce(sayHi)); // 防抖
2.節流
高頻事件觸發，但在n秒內只會執行一次，所以節流會稀釋函數的執行頻率。
- 思路：
每次觸發事件時都判斷當前是否有等待執行的延時函數。
function throttle(fn) {
let canRun = true; // 通過閉包保存一個標記
return function () {
if (!canRun) return; // 在函數開頭判斷標記是否爲true，不爲true則return
canRun = false; // 立即設置爲false
setTimeout(() => { // 將外部傳入的函數的執行放在setTimeout中
fn.apply(this, arguments);
// 最後在setTimeout執行完畢後再把標記設置爲true(關鍵)表示可以執行下一次循環了。當定時器沒有執行的時候標記永遠是false，在開頭被return掉
canRun = true;
}, 500);
};
}
function sayHi(e) {
console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));
本題鏈接：https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/5
4.介紹下 Set、Map、WeakSet 和 WeakMap 的區別？
Set
-
成員唯一、無序且不重複；
-
[value, value]，鍵值與鍵名是一致的（或者說只有鍵值，沒有鍵名）；
-
可以遍歷，方法有：add、delete、has。
WeakSet
-
成員都是對象；
-
成員都是弱引用，可以被垃圾回收機制回收，可以用來保存DOM節點，不容易造成內存泄漏；
-
不能遍歷，方法有add、delete、has。
Map
-
本質上是鍵值對的集合，類似集合；
-
可以遍歷，方法很多，可以跟各種數據格式轉換。
WeakMap
-
只接受對象最爲鍵名（null除外），不接受其他類型的值作爲鍵名；
-
鍵名是弱引用，鍵值可以是任意的，鍵名所指向的對象可以被垃圾回收，此時鍵名是無效的；
-
不能遍歷，方法有get、set、has、delete。
本題鏈接：https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/6
5.介紹下深度優先遍歷和廣度優先遍歷，如何實現？
深度優先遍歷（DFS）
深度優先遍歷（Depth-First-Search），是搜索算法的一種，它沿着樹的深度遍歷樹的節點，儘可能深地搜索樹的分支。當節點v的所有邊都已被探尋過，將回溯到發現節點v的那條邊的起始節點。這一過程一直進行到已探尋源節點到其他所有節點爲止，如果還有未被發現的節點，則選擇其中一個未被發現的節點爲源節點並重復以上操作，直到所有節點都被探尋完成。
簡單的說，DFS就是從圖中的一個節點開始追溯，直到最後一個節點，然後回溯，繼續追溯下一條路徑，直到到達所有的節點，如此往復，直到沒有路徑爲止。
DFS 可以產生相應圖的拓撲排序表，利用拓撲排序表可以解決很多問題，例如最大路徑問題。一般用堆數據結構來輔助實現DFS算法。
注意：深度DFS屬於盲目搜索，無法保證搜索到的路徑爲最短路徑，也不是在搜索特定的路徑，而是通過搜索來查看圖中有哪些路徑可以選擇。
步驟：
-
訪問頂點v；
-
依次從v的未被訪問的鄰接點出發，對圖進行深度優先遍歷；直至圖中和v有路徑相通的頂點都被訪問；
-
若此時途中尚有頂點未被訪問，則從一個未被訪問的頂點出發，重新進行深度優先遍歷，直到所有頂點均被訪問過爲止。
實現：
Graph.prototype.dfs = function() {
var marked = []
for (var i=0; i<this.vertices.length; i++) {
if (!marked[this.vertices[i]]) {
dfsVisit(this.vertices[i])
}
}
function dfsVisit(u) {
let edges = this.edges
marked[u] = true
console.log(u)
var neighbors = edges.get(u)
for (var i=0; i<neighbors.length; i++) {
var w = neighbors[i]
if (!marked[w]) {
dfsVisit(w)
}
}
}
}
測試：
graph.dfs()
// 1
// 4
// 3
// 2
// 5
測試成功。
廣度優先遍歷（BFS）
廣度優先遍歷（Breadth-First-Search）是從根節點開始，沿着圖的寬度遍歷節點，如果所有節點均被訪問過，則算法終止，BFS 同樣屬於盲目搜索，一般用隊列數據結構來輔助實現BFS。
BFS從一個節點開始，嘗試訪問儘可能靠近它的目標節點。本質上這種遍歷在圖上是逐層移動的，首先檢查最靠近第一個節點的層，再逐漸向下移動到離起始節點最遠的層。
步驟：
-
創建一個隊列，並將開始節點放入隊列中；
-
若隊列非空，則從隊列中取出第一個節點，並檢測它是否爲目標節點；
- 若是目標節點，則結束搜尋，並返回結果；
- 若不是，則將它所有沒有被檢測過的字節點都加入隊列中；
-
若隊列爲空，表示圖中並沒有目標節點，則結束遍歷。
實現：
Graph.prototype.bfs = function(v) {
var queue = [], marked = []
marked[v] = true
queue.push(v) // 添加到隊尾
while(queue.length > 0) {
var s = queue.shift() // 從隊首移除
if (this.edges.has(s)) {
console.log('visited vertex: ', s)
}
let neighbors = this.edges.get(s)
for(let i=0;i<neighbors.length;i++) {
var w = neighbors[i]
if (!marked[w]) {
marked[w] = true
queue.push(w)
}
}
}
}
測試：
graph.bfs(1)
// visited vertex: 1
// visited vertex: 4
// visited vertex: 3
// visited vertex: 2
// visited vertex: 5
測試成功。
本題鏈接：https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/9
6.異步筆試題
請寫出下面代碼的運行結果：
// 今日頭條面試題
async function async1() {
console.log('async1 start')
await async2()
console.log('async1 end')
}
async function async2() {
console.log('async2')
}
console.log('script start')
setTimeout(function () {
console.log('settimeout')
})
async1()
new Promise(function (resolve) {
console.log('promise1')
resolve()
}).then(function () {
console.log('promise2')
})
console.log('script end')
題目的本質，就是考察setTimeout、promise、async await的實現及執行順序，以及JS的事件循環的相關問題。
答案：
script start
async1 start
async2
promise1
script end
async1 end
promise2
settimeout
過程詳解鏈接：https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/7
7.將數組扁平化並去除其中重複數據，最終得到一個升序且不重複的數組
Array.from(new Set(arr.flat(Infinity))).sort((a,b)=>{ return a-b})
本題鏈接：https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/8
8.JS異步解決方案的發展歷程以及優缺點。
1. 回調函數（callback）
setTimeout(() => {
// callback 函數體
}, 1000)
缺點：回調地獄，不能用 try catch 捕獲錯誤，不能 return
回調地獄的根本問題在於：
-
缺乏順序性： 回調地獄導致的調試困難，和大腦的思維方式不符；
-
嵌套函數存在耦合性，一旦有所改動，就會牽一髮而動全身，即（控制反轉）；
-
嵌套函數過多的多話，很難處理錯誤。
ajax('XXX1', () => {
// callback 函數體
ajax('XXX2', () => {
// callback 函數體
ajax('XXX3', () => {
// callback 函數體
})
})
})
優點：解決了同步的問題（只要有一個任務耗時很長，後面的任務都必須排隊等着，會拖延整個程序的執行）。
2. Promise
Promise就是爲了解決callback的問題而產生的。
Promise 實現了鏈式調用，也就是說每次 then 後返回的都是一個全新 Promise，如果我們在 then 中 return ，return 的結果會被 Promise.resolve() 包裝。
優點：解決了回調地獄的問題。
ajax('XXX1')
.then(res => {
// 操作邏輯
return ajax('XXX2')
}).then(res => {
// 操作邏輯
return ajax('XXX3')
}).then(res => {
// 操作邏輯
})
缺點：無法取消 Promise ，錯誤需要通過回調函數來捕獲。
3. Generator
特點：可以控制函數的執行，可以配合 co 函數庫使用。
function *fetch() {
yield ajax('XXX1', () => {})
yield ajax('XXX2', () => {})
yield ajax('XXX3', () => {})
}
let it = fetch()
let result1 = it.next()
let result2 = it.next()
let result3 = it.next()
4. Async/await
async、await 是異步的終極解決方案。
優點是：代碼清晰，不用像 Promise 寫一大堆 then 鏈，處理了回調地獄的問題；
缺點：await 將異步代碼改造成同步代碼，如果多個異步操作沒有依賴性而使用 await 會導致性能上的降低。
async function test() {
// 以下代碼沒有依賴性的話，完全可以使用 Promise.all 的方式
// 如果有依賴性的話，其實就是解決回調地獄的例子了
await fetch('XXX1')
await fetch('XXX2')
await fetch('XXX3')
}
下面來看一個使用 await 的例子：
let a = 0
let b = async () => {
a = a + await 10
console.log('2', a) // -> '2' 10
}
b()
a++
console.log('1', a) // -> '1' 1
對於以上代碼你可能會有疑惑，讓我來解釋下原因：
-
首先函數
b先執行，在執行到await 10之前變量a還是 0，因爲await內部實現了generator，generator會保留堆棧中東西，所以這時候a = 0被保存了下來； -
因爲
await是異步操作，後來的表達式不返回Promise的話，就會包裝成Promise.reslove(返回值)，然後會去執行函數外的同步代碼； -
同步代碼執行完畢後開始執行異步代碼，將保存下來的值拿出來使用，這時候
a = 0 + 10。
上述解釋中提到了 await 內部實現了 generator，其實 await 就是 generator 加上 Promise的語法糖，且內部實現了自動執行 generator。如果你熟悉 co 的話，其實自己就可以實現這樣的語法糖。
本題鏈接：https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/11
9.談談你對TCP三次握手和四次揮手的理解
本題鏈接：https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/15
更多內容，請關注前端之巔。
