高級前端程序員面試問題與答案【精選9道】
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]。
-
最後附上 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
- 什麽是防抖和節流？有什麽區別？如何實現？
防抖
觸發高頻事件後 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));
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 異步解決方案的發展歷程以及優缺點。
- 回調函數（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 三次握手和四次揮手的理解
高級前端程序員面試問題與答案【精選9道】