大厂php怎么做前端,大厂前端经典面试问题精选（附答案）
【相關推薦：前端面試題(2020)】
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)); // 防抖
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 的區別？
1)Set
成員唯一、無序且不重復；
[value, value]，鍵值與鍵名是一致的(或者說只有鍵值，沒有鍵名)；
可以遍歷，方法有：add、delete、has。
2)WeakSet
成員都是對象；
成員都是弱引用，可以被垃圾回收機制回收，可以用來保存 DOM 節點，不容易造成內存泄漏；
不能遍歷，方法有 add、delete、has。
3)Map
本質上是鍵值對的集合，類似集合；
可以遍歷，方法很多，可以跟各種數據格式轉換。
4)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
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
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
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 三次握手和四次揮手的理解
本文轉載于：前端大學，如有侵犯，請聯系a@php.cn刪除
總結
以上是生活随笔為你收集整理的大厂php怎么做前端,大厂前端经典面试问题精选（附答案）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java中先序创建一棵树,恳求大佬指点！
- 下一篇： zentao这php,ZenTaoPHP