金三馬上就要開始了，俗話說得好，知己知彼百戰(zhàn)百勝，多準備總是沒有錯的。以面試的形式和大家一起學習、一起回顧我們的職場生涯。今天簡單總結(jié)一下我個人去面試，包括我在面試別人時的經(jīng)驗。加油加加油！！！

目錄

開頭熱場問題

1. 說一下工作中解決過比較困難的問題 或 說一下自己項目中比較有亮點的地方

2. 你了解瀏覽器的事件循環(huán)嗎？

? ? 2.1 為什么 js 在瀏覽器中有事件循環(huán)的機制？

? ? 2.2 你了解事件循環(huán)當中的兩種任務(wù)嗎？

? ? 2.3 為什么要引入微任務(wù)的概念，只有宏任務(wù)可以嗎？

? ? 2.4 你了解 Node.js 的事件循環(huán)嗎？Node中的事件循環(huán)和瀏覽器的事件循環(huán)有什么區(qū)別？

? ? ? ? 2.5 這個時候理論問了這么多了，開始實踐1

? ? ? ? 2.6 實踐2

? ? ?2.7 實踐3?

3. 事件的捕獲和冒泡機制你了解多少？

? ? 3.1 基本概念

? ? 3.2? window.addEventListener 監(jiān)聽的是什么階段的事件？? ? ? ? ?

? ? 3.3 平常有哪些場景用到了這些機制？?

4.? 你工作中用過防抖和節(jié)流嗎？

? ? 4.1 基本概念

? ? 4.2 分別適合用在什么場景？

? ? 4.3? 手寫節(jié)流函數(shù)

5. 你了解 Promise 嗎？平時用的多嗎？

? ? 5.1 Promise.all( ) 你知道有什么特性嗎？

? ? 5.2?如果其中一個 Promise 報錯了怎么辦？

? ? 5.3?如果有一個 Promise 報錯了，那么其他的 Promise 還會執(zhí)行嗎？

? ? 5.4 手寫一個?Promise.all(? )

? ? 5.5 Promise 在初始化的時候已經(jīng)執(zhí)行了，那么利用這個特性我們可以做點什么（擴展性問題）？

?6. 字節(jié)經(jīng)典算法題---- 接雨水

---

開頭熱場問題

1. 說一下工作中解決過比較困難的問題 或 說一下自己項目中比較有亮點的地方

考察目的：面試官主要看一下我們解決問題的能力

解答：這個問題 主要是靠大家的工作積累，平時工作過程中可以養(yǎng)成一個良好的習慣，無論做什么需求的時候，都花點時間去記錄一下，這樣積累無論是一年，還是兩年，或者五年都會積累很多也無需求，然后自己梳理一下，在面試的時候反饋給面試官，讓面試官虎軀一震，offer馬上到手~~~

2. 你了解瀏覽器的事件循環(huán)嗎？

考察目的：以此問題作為一個突破口，深度挖掘你對整個概念的了解

2.1 為什么 js 在瀏覽器中有事件循環(huán)的機制？

解答：

① JS 是單線程的

② event loop

2.2 你了解事件循環(huán)當中的兩種任務(wù)嗎？

解答：

① 宏任務(wù)：整體代碼塊、setTimeOut、setInterval、I/O操作

② 微任務(wù)：new Promise().then()、mutationObserver（前端的回溯）

2.3 為什么要引入微任務(wù)的概念，只有宏任務(wù)可以嗎？

解答：

宏任務(wù)：先進先出的原則

在 JS 的執(zhí)行過程中 或者說在頁面的渲染過程中，宏任務(wù)是按照先進先出的原則執(zhí)行，我們并不能準確的控制 這些任務(wù)被推進任務(wù)隊列里，但是我們這個時候如果出來一個非常高優(yōu)先級的任務(wù)，這個時候該怎么辦？如果我們只有宏任務(wù)，再往任務(wù)隊列里面推一個，秉承著先進先出的原則，那么它肯定是最后一個執(zhí)行的，所以要引入微任務(wù)；

了解到宏任務(wù)與微任務(wù)過后，我們來學習宏任務(wù)與微任務(wù)的執(zhí)行順序。

• 代碼開始執(zhí)行，創(chuàng)建一個全局調(diào)用棧，script作為宏任務(wù)執(zhí)行
• 執(zhí)行過程過同步任務(wù)立即執(zhí)行，異步任務(wù)根據(jù)異步任務(wù)類型分別注冊到微任務(wù)隊列和宏任務(wù)隊列
• 同步任務(wù)執(zhí)行完畢，查看任務(wù)隊列
  • 若存在微任務(wù)，將微任務(wù)隊列全部執(zhí)行(包括執(zhí)行微任務(wù)過程中產(chǎn)生的新微任務(wù))
  • 若無微任務(wù)，查看宏任務(wù)隊列，執(zhí)行第一個宏任務(wù)，宏任務(wù)執(zhí)行完畢，查看微任務(wù)隊列，重復上述操作，直至宏任務(wù)隊列為空

2.4 你了解 Node.js 的事件循環(huán)嗎？Node中的事件循環(huán)和瀏覽器的事件循環(huán)有什么區(qū)別？

解答：

Node宏任務(wù)的執(zhí)行順序：

① timers定時器：執(zhí)行已經(jīng)安排過的，setTimeout 和 setInterval 的回調(diào)函數(shù)；

②pending callback 待定回調(diào)：執(zhí)行延遲到下一個循環(huán)迭代的I/O回調(diào)；

③idle，prepare：僅系統(tǒng)內(nèi)部使用；

④poll：檢索新的I/O事件，執(zhí)行與I/O相關(guān)的回調(diào)

⑤check：執(zhí)行setImmediate() 回調(diào)函數(shù)

⑥close callback：socket.on(‘close’, ( )=>{ })

微任務(wù)和宏任務(wù)在node的執(zhí)行順序：

首先大家要明白，Node中微任務(wù)和宏任務(wù)的執(zhí)行順序是和 node 的版本有關(guān)系的

Node V10 之前：

① 執(zhí)行完上述一個階段中的所有任務(wù)

② 執(zhí)行 nextTick 隊列里面的內(nèi)容

③ 執(zhí)行完微任務(wù)隊列的內(nèi)容

Node V10 之后：

和瀏覽器的行為統(tǒng)一了

2.5 這個時候理論問了這么多了，開始實踐1

async function async1() {console.log("async1 start");await async2();console.log("async1 end"); } async function async2() {console.log("async2"); } console.log("script start"); setTimeout(() => {console.log("setTimeout"); }, 0); async1(); new Promise((resolve) => {console.log("promise1");resolve(); }).then(() => {console.log("promise2"); }); console.log("script end");// 1. script start // 2. async1 start // 3. async2 // 4. promise1 // 5. script end // 6. async1 end // 7. promise2 // 8. setTimeout

2.6 實踐2

這個就比較有難度了，如果真的不會，千萬不要張嘴就來一句：“我不會”，這個時候我作為面試官的時候心里就在想：“我屮艸芔茻，這好尷尬”！娛樂一下開個玩笑，這個時候要嘗試著說出自己的思路，即使是錯的，你也要讓面試官看到你的 進取、鉆研精神！

console.log("start"); setTimeout(() => {console.log("children2");Promise.resolve().then(() => {console.log("children3");}); }, 0);new Promise((resolve, reject) => {console.log("children4");setTimeout(() => {console.log("children5");resolve("children6"); // 此處大坑}, 0); }).then((res) => {console.log("children7");setTimeout(() => {console.log(res);}, 0); });// 1. start // 2. children4 /** 第一輪宏任務(wù)執(zhí)行結(jié)束，嘗試清空微任務(wù)隊列,發(fā)現(xiàn)沒有微任務(wù)，嘗試執(zhí)行下一輪宏任務(wù) */ // 3. children2 /** 第二輪宏任務(wù)執(zhí)行結(jié)束，嘗試清空微任務(wù)隊列, */ // 4. children3 // 5. children5 /** 第三輪宏任務(wù)執(zhí)行結(jié)束，嘗試清空微任務(wù)隊列, */ // 6. children7 // 7. children6

2.7 實踐3

到這一步，大家心里是不是在想：“面試官怎么抓著 事件循環(huán)不放了”，最后一道題

const p = () => {return new Promise((resolve, reject) => {const p1 = new Promise((resolve, reject) => {setTimeout(() => {resolve(1); // 這里 不會再輸出了，因為 resolve(2) 已經(jīng)把結(jié)果輸出}, 0);resolve(2);});p1.then((res) => {console.log(res);});console.log(3);resolve(4);}); }; p().then((res) => {console.log(res); }); console.log("end");// 1. 3 // 2. end // 3. 2 // 4. 4

到此為止，事件循環(huán)結(jié)束！

3. 事件的捕獲和冒泡機制你了解多少？

3.1 基本概念

以HTML為例：↓

捕獲：從window → parent → child → son 到目標元素以后，轉(zhuǎn)為冒泡

冒泡：目標元素 son→ child→ parent→window

3.2 window.addEventListener 監(jiān)聽的是什么階段的事件？

// 冒泡階段 window.addEventListener("click", () => {}); // 第三個參數(shù)默認為 false，為false 時，監(jiān)聽的為冒泡階段// 捕獲階段 window.addEventListener("click", () => {}, true);

3.3 平常有哪些場景用到了這些機制？

3.3.1. 事件委托

<ul id="ul"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>const ul = document.querySelector("ul");ul.addEventListener("click", (e) => {const target = e.target;if (target.tagName.toLowerCase() === "li") {const liList = document.querySelectorAll("li");// 這里之所以會這么寫，是因為 liList 并非是一個真正的 Array// 此時返回的是一個 nodeList，如果想使用 數(shù)組的 方法，需要改變thisconst index = Array.prototype.indexOf.call(liList, target);console.log(`內(nèi)容：${target.innerHTML},索引：${index}`);}});

3.3.2 場景設(shè)計題

一個歷史頁面，上面有若干按鈕的點擊邏輯，每個按鈕都有自己的 click 事件

新需求來了：給每一個訪問的用戶添加了一個屬性，如果 banned = true，此用戶點擊頁面上的任何按鈕或元素，都不可響應(yīng)原來的函數(shù)。而是直接 alert 提示，你被封禁了。

實現(xiàn)：采用 事件捕獲 機制完成(當然實現(xiàn)的思路有三種，甚至更多，這里只說事件捕獲)

/*** 場景設(shè)計題 ????一個歷史頁面，上面有若干按鈕的點擊邏輯，每個按鈕都有自己的 click 事件 ? ? ?新需求來了：給每一個訪問的用戶添加了一個屬性，如果 banned = true，此用戶點擊頁面上的任何按鈕或元素，都不可響應(yīng)原來的函數(shù)。而是直接 alert 提示，你被封禁了。 */window.addEventListener("click",(e) => {if (banned) {e.stopPropagation();}},true );

4. 你工作中用過防抖和節(jié)流嗎？

4.1 基本概念

防抖：持續(xù)觸發(fā)事件的時候，一定時間段內(nèi)，沒有再觸發(fā)事件，時間處理函數(shù)才會執(zhí)行一次

節(jié)流：持續(xù)觸發(fā)事件的時候，保證一段時間內(nèi)只調(diào)用一次事件處理函數(shù)(固定時間)

4.2 分別適合用在什么場景？

防抖：input輸入(巨量引擎)

節(jié)流：resize(屏幕大小改變)、scroll(滾動時) —> 一定要執(zhí)行的，給一個固定間隔

4.3 手寫節(jié)流函數(shù)

時間戳寫法，第一次立即執(zhí)行

// 時間戳寫法，第一次立即執(zhí)行 const throttle = (fn, interval) => {let last = 0;return () => {let now = Date.now();if (now - last >= interval) {fn.apply(this, arguments);}}; }; const handle = () => {console.log(Math.random()); }; const throttleHandle = throttle(handle, 3000); throttleHandle(); throttleHandle();

定時器寫法，第一次也需要延時 具體 時間以后再執(zhí)行

// 定時器寫法，第一次也會延時 具體的時間執(zhí)行 const throttle = (fn, interval) => {let timer = null;return function () {let context = this;let args = arguments;if (!timer) {timer = setTimeout(() => {fn.apply(context, args);timer = null;}, interval);}}; }; const handle = () => {console.log(Math.random()); }; const throttleHandle = throttle(handle, 1000); throttleHandle(); throttleHandle();

精確的實現(xiàn)一個節(jié)流函數(shù)，無論是第一次之后還是最后一次（避免最后一次執(zhí)行還會再等具體時間之后再執(zhí)行）

// 精確的實現(xiàn)一個節(jié)流函數(shù)，無論是第一次之后還是最后一次（避免最后一次執(zhí)行還會再等具體時間之后再執(zhí)行） const throttle = (fn, delay) => {let timer = null;let startTime = Date.now();return function () {let curTime = null;let remainning = delay - (curTime - startTime);let context = this;let args = arguments;clearTimeout(timer);if (remainning <= 0) {fn.apply(context, args);startTime = Date.now();} else {timer = setTimeout(fn, remainning);}}; };

5. 你了解 Promise 嗎？平時用的多嗎？

5.1 Promise.all( ) 你知道有什么特性嗎？

解答：Promise.all( ) 會接受一個 Promise 數(shù)組，數(shù)組里面可以是 Promise 也可以是一個常量或者其他；執(zhí)行情況為：Promise 里面的所有 Promise 執(zhí)行完成以后才會返回結(jié)果；

5.2如果其中一個 Promise 報錯了怎么辦？

解答：如果有一個報錯了，那么整個 Promise.all( )，就會返回一個 catch

5.3如果有一個 Promise 報錯了，那么其他的 Promise 還會執(zhí)行嗎？

解答：會的，因為 Promise 是在創(chuàng)建之初(實例化) 的時候已經(jīng)執(zhí)行了

5.4 手寫一個Promise.all( )

面試官：“給你 三個 如下的 Promise ，調(diào)用你的Promise.all( )以后，看是否會在三秒以內(nèi)返回對應(yīng)的結(jié)果”

// 測試 const pro1 = new Promise((resolve, reject) => {setTimeout(() => {resolve("1");}, 1000); }); const pro2 = new Promise((resolve, reject) => {setTimeout(() => {resolve("3");}, 2000); }); const pro3 = new Promise((resolve, reject) => {setTimeout(() => {resolve("3");}, 3000); });// 測試題 const PromiseAll = (promiseArray) => {};

如何實現(xiàn)？

考點1：Promise.all( ) 里面的參數(shù)有可能不是一個 Promise，如何處理？

考點2：Promise.all( ) 返回值的順序，是你傳入的 Promise 順序，如何處理？

// 測試題 const PromiseAll = (promiseArray) => {return new Promise((resolve, reject) => {if (!Array.isArray(promiseArray)) {return reject(new Error("Type can only be array"));}const result = []; // promise 執(zhí)行的結(jié)果集const promiseNums = promiseArray.length; // 當前循環(huán)次數(shù)let counter = 0; // 記錄當前 promise 執(zhí)行順序，需要按照 傳入的 promise 順序返回for (let i = 0; i < promiseNums; i++) {Promise.resolve(promiseArray[i]).then((value) => {counter++;result.push(value);if (counter === promiseNums) {resolve(result);}}).catch((e) => reject(e));}}); };console.log(PromiseAll([pro1, pro2, pro3]).then((res) => {console.log(res);}).catch((e) => {console.log(e);}) );

5.5 Promise 在初始化的時候已經(jīng)執(zhí)行了，那么利用這個特性我們可以做點什么（擴展性問題）？

解答：可以利用 promise 的這個特性做緩存；

利用 裝飾器 + Map結(jié)構(gòu)，實現(xiàn)一個 Promise 的緩存；

const cacheMap = new Map(); const enableCache = (target, name, descriptor) => {const val = descriptor.value;descriptor.value = async (...args) => {const cacheKey = name + JSON.stringify(args);if (!cacheMap.get(cacheKey)) {const cacheValue = Promise.resolve(val.apply(this, args)).catch((_) => {cacheMap.set(cacheKey, null);});cacheMap.set(cacheKey, cacheValue);}return cacheMap.get(cacheKey);};return descriptor; }; class PromiseClass {@enableCachestatic async getInfo() {} }PromiseClass.getInfo(); // 第一次發(fā)送請求 PromiseClass.getInfo(); // 第二次以后就是緩存 PromiseClass.getInfo(); PromiseClass.getInfo();

6. 字節(jié)經(jīng)典算法題---- 接雨水

題干：

給定 n 個非負整數(shù)表示每個寬度為 1 的柱子的高度圖，計算按此排列的柱子，下雨之后能接多少雨水。

示例1：

輸入 height = [0,1,0,2,1,0,1,3,2,1,2,1]

輸出：6

解釋：上面是由數(shù)組 [0,1,0,2,1,0,1,3,2,1,2,1] 表示的高度圖，在這種情況下，可以接 6 單位的雨水(如上圖，藍色部分表示雨水)

示例2：

輸入 height = [4,2,0,3,2,5]

輸出：9

總結(jié)

以上是生活随笔為你收集整理的2022 前端一场面试及答案整理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。