GitHub 上一位名為木易楊（yygmind）的開發(fā)者鲤脏，在 GitHub 中建了一個(gè)名為
Advanced-Frontend/Daily-Interview-Question 的項(xiàng)目，該項(xiàng)目每天會(huì)更新一道大廠前端面試題慎玖，并邀請(qǐng)開發(fā)者在 issue 區(qū)中作答枣察，以下是我們從該項(xiàng)目中挑選的 9 道題和答案阳藻，如有問(wèn)題，歡迎大家在評(píng)論區(qū)或 GitHub issue 上提出建議肿仑。
GitHub 鏈接：
https://github.com/Advanced-Frontend/Daily-Interview-Question
- 寫 React/Vue 項(xiàng)目時(shí)為什么要在組件中寫 key致盟，其作用是什么？
key 的作用是為了在 diff 算法執(zhí)行時(shí)更快的找到對(duì)應(yīng)的節(jié)點(diǎn)柏副，提高 diff 速度勾邦。
vue 和 react 都是采用 diff 算法來(lái)對(duì)比新舊虛擬節(jié)點(diǎn)，從而更新節(jié)點(diǎn)割择。在 vue 的 diff 函數(shù)中眷篇。可以先了解一下 diff 算法荔泳。
在交叉對(duì)比的時(shí)候蕉饼，當(dāng)新節(jié)點(diǎn)跟舊節(jié)點(diǎn)頭尾交叉對(duì)比沒(méi)有結(jié)果的時(shí)候，會(huì)根據(jù)新節(jié)點(diǎn)的 key 去對(duì)比舊節(jié)點(diǎn)數(shù)組中的 key玛歌，從而找到相應(yīng)舊節(jié)點(diǎn)（這里對(duì)應(yīng)的是一個(gè) key => index 的 map 映射）昧港。如果沒(méi)找到就認(rèn)為是一個(gè)新增節(jié)點(diǎn)。而如果沒(méi)有 key支子，那么就會(huì)采用一種遍歷查找的方式去找到對(duì)應(yīng)的舊節(jié)點(diǎn)创肥。一種一個(gè) map 映射，另一種是遍歷查找值朋。相比而言叹侄。map 映射的速度更快。
vue 部分源碼如下：
// vue 項(xiàng)目 src/core/vdom/patch.js -488 行
// oldCh 是一個(gè)舊虛擬節(jié)點(diǎn)數(shù)組，
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
idxInOld = isDef(newStartVnode.key)
? oldKeyToIdx[newStartVnode.key]
: findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
創(chuàng)建 map 函數(shù)：
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 是對(duì)比新舊節(jié)點(diǎn)是否相同的函數(shù)
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
- 解析 ['1', '2', '3'].map(parseInt)
第一眼看到這個(gè)題目的時(shí)候，腦海跳出的答案是 [1, 2, 3]缚窿，但是 真正的答案是 [1, NaN, NaN]。
- 首先讓我們回顧一下撒强，map 函數(shù)的第一個(gè)參數(shù) callback：
var new_array = arr.map(function callback(currentValue[, index[, array]]) {
// Return element for new_array
}[, thisArg])
這個(gè) callback 一共可以接收三個(gè)參數(shù)禽捆，其中第一個(gè)參數(shù)代表當(dāng)前被處理的元素，而第二個(gè)參數(shù)代表該元素的索引飘哨。
- 而 parseInt 則是用來(lái)解析字符串的胚想，使字符串成為指定基數(shù)的整數(shù)。
parseInt(string, radix)接收兩個(gè)參數(shù)杖玲，第一個(gè)表示被處理的值（字符串）顿仇，第二個(gè)表示為解析時(shí)的基數(shù)淘正。
了解這兩個(gè)函數(shù)后摆马，我們可以模擬一下運(yùn)行情況；
parseInt('1', 0) //radix 為 0 時(shí)鸿吆，且 string 參數(shù)不以“0x”和“0”開頭時(shí)囤采，按照 10 為基數(shù)處理。這個(gè)時(shí)候返回 1惩淳；
parseInt('2', 1) // 基數(shù)為 1（1 進(jìn)制）表示的數(shù)中蕉毯，最大值小于 2，所以無(wú)法解析思犁，返回 NaN代虾；
parseInt('3', 2) // 基數(shù)為 2（2 進(jìn)制）表示的數(shù)中，最大值小于 3激蹲，所以無(wú)法解析棉磨，返回 NaN。
map 函數(shù)返回的是一個(gè)數(shù)組学辱，所以最后結(jié)果為 [1, NaN, NaN]乘瓤。
最后附上 MDN 上對(duì)于這兩個(gè)函數(shù)的鏈接，具體參數(shù)大家可以到里面看：
- 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
什么是防抖和節(jié)流策泣？有什么區(qū)別衙傀？如何實(shí)現(xiàn)？
防抖
觸發(fā)高頻事件后 n 秒內(nèi)函數(shù)只會(huì)執(zhí)行一次萨咕，如果 n 秒內(nèi)高頻事件再次被觸發(fā)统抬，則重新計(jì)算時(shí)間；
- 思路：
每次觸發(fā)事件時(shí)都取消之前的延時(shí)調(diào)用方法：
function debounce(fn) {
let timeout = null; // 創(chuàng)建一個(gè)標(biāo)記用來(lái)存放定時(shí)器的返回值
return function () {
clearTimeout(timeout); // 每當(dāng)用戶輸入的時(shí)候把前一個(gè) setTimeout clear 掉
timeout = setTimeout(() => { // 然后又創(chuàng)建一個(gè)新的 setTimeout,
//這樣就能保證輸入字符后的 interval 間隔內(nèi)如果還有字符輸入的話危队，就不會(huì)執(zhí)行 fn 函數(shù)
fn.apply(this, arguments);
}, 500);
};
}
function sayHi() {
console.log('防抖成功');
}
var inp = document.getElementById('inp');
inp.addEventListener('input', debounce(sayHi)); // 防抖
- 節(jié)流
高頻事件觸發(fā)聪建，但在 n 秒內(nèi)只會(huì)執(zhí)行一次，所以節(jié)流會(huì)稀釋函數(shù)的執(zhí)行頻率交掏。
- 思路：
每次觸發(fā)事件時(shí)都判斷當(dāng)前是否有等待執(zhí)行的延時(shí)函數(shù)妆偏。
function throttle(fn) {
let canRun = true; // 通過(guò)閉包保存一個(gè)標(biāo)記
return function () {
if (!canRun) return; // 在函數(shù)開頭判斷標(biāo)記是否為 true，不為 true 則 return
canRun = false; // 立即設(shè)置為 false
setTimeout(() => { // 將外部傳入的函數(shù)的執(zhí)行放在 setTimeout 中
fn.apply(this, arguments);
// 最后在 setTimeout 執(zhí)行完畢后再把標(biāo)記設(shè)置為 true(關(guān)鍵) 表示可以執(zhí)行下一次循環(huán)了盅弛。
//當(dāng)定時(shí)器沒(méi)有執(zhí)行的時(shí)候標(biāo)記永遠(yuǎn)是 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
- 介紹下 Set叔锐、Map、WeakSet 和 WeakMap 的區(qū)別见秽？
Set
成員唯一愉烙、無(wú)序且不重復(fù)；
[value, value]解取，鍵值與鍵名是一致的（或者說(shuō)只有鍵值步责，沒(méi)有鍵名）；
可以遍歷禀苦，方法有：add蔓肯、delete、has振乏。
WeakSet
成員都是對(duì)象蔗包；
成員都是弱引用，可以被垃圾回收機(jī)制回收慧邮，可以用來(lái)保存 DOM 節(jié)點(diǎn)调限，不容易造成內(nèi)存泄漏；
不能遍歷误澳，方法有 add耻矮、delete、has忆谓。
Map
本質(zhì)上是鍵值對(duì)的集合裆装，類似集合；
可以遍歷陪毡，方法很多米母，可以跟各種數(shù)據(jù)格式轉(zhuǎn)換。
WeakMap
只接受對(duì)象最為鍵名（null 除外）毡琉，不接受其他類型的值作為鍵名铁瞒；
鍵名是弱引用，鍵值可以是任意的桅滋，鍵名所指向的對(duì)象可以被垃圾回收慧耍，此時(shí)鍵名是無(wú)效的；
不能遍歷丐谋，方法有 get芍碧、set、has号俐、delete泌豆。
本題鏈接：
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/6
- 介紹下深度優(yōu)先遍歷和廣度優(yōu)先遍歷，如何實(shí)現(xiàn)吏饿？
深度優(yōu)先遍歷（DFS）
深度優(yōu)先遍歷（Depth-First-Search）踪危，是搜索算法的一種蔬浙，它沿著樹的深度遍歷樹的節(jié)點(diǎn)，盡可能深地搜索樹的分支贞远。當(dāng)節(jié)點(diǎn) v 的所有邊都已被探尋過(guò)畴博，將回溯到發(fā)現(xiàn)節(jié)點(diǎn) v 的那條邊的起始節(jié)點(diǎn)。這一過(guò)程一直進(jìn)行到已探尋源節(jié)點(diǎn)到其他所有節(jié)點(diǎn)為止蓝仲，如果還有未被發(fā)現(xiàn)的節(jié)點(diǎn)俱病，則選擇其中一個(gè)未被發(fā)現(xiàn)的節(jié)點(diǎn)為源節(jié)點(diǎn)并重復(fù)以上操作，直到所有節(jié)點(diǎn)都被探尋完成袱结。
簡(jiǎn)單的說(shuō)亮隙，DFS 就是從圖中的一個(gè)節(jié)點(diǎn)開始追溯，直到最后一個(gè)節(jié)點(diǎn)擎勘，然后回溯咱揍，繼續(xù)追溯下一條路徑，直到到達(dá)所有的節(jié)點(diǎn)棚饵，如此往復(fù)，直到?jīng)]有路徑為止掩完。
DFS 可以產(chǎn)生相應(yīng)圖的拓?fù)渑判虮碓胙猛負(fù)渑判虮砜梢越鉀Q很多問(wèn)題，例如最大路徑問(wèn)題且蓬。一般用堆數(shù)據(jù)結(jié)構(gòu)來(lái)輔助實(shí)現(xiàn) DFS 算法欣硼。
注意：深度 DFS 屬于盲目搜索，無(wú)法保證搜索到的路徑為最短路徑恶阴，也不是在搜索特定的路徑诈胜，而是通過(guò)搜索來(lái)查看圖中有哪些路徑可以選擇。
步驟：
訪問(wèn)頂點(diǎn) v冯事；
依次從 v 的未被訪問(wèn)的鄰接點(diǎn)出發(fā)焦匈，對(duì)圖進(jìn)行深度優(yōu)先遍歷；直至圖中和 v 有路徑相通的頂點(diǎn)都被訪問(wèn)昵仅；
若此時(shí)途中尚有頂點(diǎn)未被訪問(wèn)缓熟，則從一個(gè)未被訪問(wèn)的頂點(diǎn)出發(fā)，重新進(jìn)行深度優(yōu)先遍歷摔笤，直到所有頂點(diǎn)均被訪問(wèn)過(guò)為止够滑。
實(shí)現(xiàn)：
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)
}
}
}
}
測(cè)試：
graph.dfs()
// 1
// 4
// 3
// 2
// 5
測(cè)試成功。
廣度優(yōu)先遍歷（BFS）
廣度優(yōu)先遍歷（Breadth-First-Search）是從根節(jié)點(diǎn)開始吕世，沿著圖的寬度遍歷節(jié)點(diǎn)彰触，如果所有節(jié)點(diǎn)均被訪問(wèn)過(guò)，則算法終止命辖，BFS 同樣屬于盲目搜索况毅，一般用隊(duì)列數(shù)據(jù)結(jié)構(gòu)來(lái)輔助實(shí)現(xiàn) BFS晚伙。
BFS 從一個(gè)節(jié)點(diǎn)開始，嘗試訪問(wèn)盡可能靠近它的目標(biāo)節(jié)點(diǎn)俭茧。本質(zhì)上這種遍歷在圖上是逐層移動(dòng)的咆疗，首先檢查最靠近第一個(gè)節(jié)點(diǎn)的層，再逐漸向下移動(dòng)到離起始節(jié)點(diǎn)最遠(yuǎn)的層母债。
步驟：
創(chuàng)建一個(gè)隊(duì)列午磁，并將開始節(jié)點(diǎn)放入隊(duì)列中；
-
若隊(duì)列非空毡们，則從隊(duì)列中取出第一個(gè)節(jié)點(diǎn)迅皇，并檢測(cè)它是否為目標(biāo)節(jié)點(diǎn)；
若是目標(biāo)節(jié)點(diǎn)衙熔，則結(jié)束搜尋登颓，并返回結(jié)果；
若不是红氯，則將它所有沒(méi)有被檢測(cè)過(guò)的字節(jié)點(diǎn)都加入隊(duì)列中框咙；
若隊(duì)列為空，表示圖中并沒(méi)有目標(biāo)節(jié)點(diǎn)痢甘，則結(jié)束遍歷喇嘱。
實(shí)現(xiàn)：
Graph.prototype.bfs = function(v) {
var queue = [], marked = []
marked[v] = true
queue.push(v) // 添加到隊(duì)尾
while(queue.length > 0) {
var s = queue.shift() // 從隊(duì)首移除
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)
}
}
}
}
測(cè)試：
graph.bfs(1)
// visited vertex: 1
// visited vertex: 4
// visited vertex: 3
// visited vertex: 2
// visited vertex: 5
測(cè)試成功。
本題鏈接：
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/9
- 異步筆試題
請(qǐng)寫出下面代碼的運(yùn)行結(jié)果：
// 今日頭條面試題
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')
題目的本質(zhì)塞栅，就是考察setTimeout者铜、promise、async await的實(shí)現(xiàn)及執(zhí)行順序放椰，以及 JS 的事件循環(huán)的相關(guān)問(wèn)題作烟。
答案：
script start
async1 start
async2
promise1
script end
async1 end
promise2
settimeout
過(guò)程詳解鏈接：
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/7
- 將數(shù)組扁平化并去除其中重復(fù)數(shù)據(jù)，最終得到一個(gè)升序且不重復(fù)的數(shù)組
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 異步解決方案的發(fā)展歷程以及優(yōu)缺點(diǎn)砾医。
1. 回調(diào)函數(shù)（callback）
setTimeout(() => {
// callback 函數(shù)體
}, 1000)
缺點(diǎn)：回調(diào)地獄拿撩，不能用 try catch 捕獲錯(cuò)誤，不能 return
回調(diào)地獄的根本問(wèn)題在于：
缺乏順序性： 回調(diào)地獄導(dǎo)致的調(diào)試?yán)щy藻烤，和大腦的思維方式不符绷雏；
嵌套函數(shù)存在耦合性，一旦有所改動(dòng)怖亭，就會(huì)牽一發(fā)而動(dòng)全身涎显，即（控制反轉(zhuǎn)）；
嵌套函數(shù)過(guò)多的多話兴猩，很難處理錯(cuò)誤期吓。
ajax('XXX1', () => {
// callback 函數(shù)體
ajax('XXX2', () => {
// callback 函數(shù)體
ajax('XXX3', () => {
// callback 函數(shù)體
})
})
})
優(yōu)點(diǎn)：解決了同步的問(wèn)題（只要有一個(gè)任務(wù)耗時(shí)很長(zhǎng)，后面的任務(wù)都必須排隊(duì)等著，會(huì)拖延整個(gè)程序的執(zhí)行）讨勤。
2. Promise
Promise 就是為了解決 callback 的問(wèn)題而產(chǎn)生的箭跳。
Promise 實(shí)現(xiàn)了鏈?zhǔn)秸{(diào)用，也就是說(shuō)每次 then 后返回的都是一個(gè)全新 Promise潭千，如果我們?cè)?then 中 return 谱姓，return 的結(jié)果會(huì)被 Promise.resolve() 包裝。
優(yōu)點(diǎn)：解決了回調(diào)地獄的問(wèn)題刨晴。
ajax('XXX1')
.then(res => {
// 操作邏輯
return ajax('XXX2')
}).then(res => {
// 操作邏輯
return ajax('XXX3')
}).then(res => {
// 操作邏輯
})
缺點(diǎn)：無(wú)法取消 Promise 屉来，錯(cuò)誤需要通過(guò)回調(diào)函數(shù)來(lái)捕獲。
3. Generator
特點(diǎn)：可以控制函數(shù)的執(zhí)行狈癞，可以配合 co 函數(shù)庫(kù)使用茄靠。
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 是異步的終極解決方案蝶桶。
優(yōu)點(diǎn)是：代碼清晰慨绳，不用像 Promise 寫一大堆 then 鏈，處理了回調(diào)地獄的問(wèn)題真竖；
缺點(diǎn)：await 將異步代碼改造成同步代碼脐雪，如果多個(gè)異步操作沒(méi)有依賴性而使用 await 會(huì)導(dǎo)致性能上的降低。
async function test() {
// 以下代碼沒(méi)有依賴性的話疼邀，完全可以使用 Promise.all 的方式
// 如果有依賴性的話喂江，其實(shí)就是解決回調(diào)地獄的例子了
await fetch('XXX1')
await fetch('XXX2')
await fetch('XXX3')
}
下面來(lái)看一個(gè)使用 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
對(duì)于以上代碼你可能會(huì)有疑惑，讓我來(lái)解釋下原因：
首先函數(shù)
b先執(zhí)行旁振，在執(zhí)行到await 10之前變量a還是 0，因?yàn)?code>await 內(nèi)部實(shí)現(xiàn)了generator涨岁，generator會(huì)保留堆棧中東西拐袜，所以這時(shí)候a = 0被保存了下來(lái)；因?yàn)?
await是異步操作梢薪，后來(lái)的表達(dá)式不返回Promise的話蹬铺，就會(huì)包裝成Promise.reslove(返回值)，然后會(huì)去執(zhí)行函數(shù)外的同步代碼秉撇；同步代碼執(zhí)行完畢后開始執(zhí)行異步代碼甜攀，將保存下來(lái)的值拿出來(lái)使用，這時(shí)候
a = 0 + 10琐馆。
上述解釋中提到了 await 內(nèi)部實(shí)現(xiàn)了 generator规阀，其實(shí) await 就是generator 加上Promise的語(yǔ)法糖，且內(nèi)部實(shí)現(xiàn)了自動(dòng)執(zhí)行generator瘦麸。如果你熟悉 co 的話谁撼，其實(shí)自己就可以實(shí)現(xiàn)這樣的語(yǔ)法糖。
本題鏈接：
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/11
- 談?wù)勀銓?duì) TCP 三次握手和四次揮手的理解
本題鏈接：
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/15
