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
 }
 }

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]。

3. 什麼是防抖和節流？有什麼區別？如何實現？

1. 防抖

觸發高頻事件後 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)); // 防抖

1. 節流

高頻事件觸發，但在 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));

4. 介紹下 Set、Map、WeakSet 和 WeakMap 的區別？

Set

• 成員唯一、無序且不重複；
• [value, value]，鍵值與鍵名是一致的（或者說只有鍵值，沒有鍵名）；
• 可以遍歷，方法有：add、delete、has。

WeakSet

• 成員都是對象；
• 成員都是弱引用，可以被垃圾回收機制回收，可以用來保存 DOM 節點，不容易造成內存洩漏；
• 不能遍歷，方法有 add、delete、has。

Map

• 本質上是鍵值對的集合，類似集合；
• 可以遍歷，方法很多，可以跟各種數據格式轉換。

WeakMap

• 只接受對象最為鍵名（null 除外），不接受其他類型的值作為鍵名；
• 鍵名是弱引用，鍵值可以是任意的，鍵名所指向的對象可以被垃圾回收，此時鍵名是無效的；
• 不能遍歷，方法有 get、set、has、delete。

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

測試成功。

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

7. 將數組扁平化並去除其中重複數據，最終得到一個升序且不重複的數組

Array.from(new Set(arr.flat(Infinity))).sort((a,b)=>{ return a-b})

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 的話，其實自己就可以實現這樣的語法糖。

9. 談談你對 TCP 三次握手和四次揮手的理解