在面試或招聘前端開發(fā)人員時，期望、現(xiàn)實和需求之間總是存在著巨大差距。面試其實是一個交流想法的地方，挑戰(zhàn)人們的思考方式，并客觀地分析給定的問題?？梢酝ㄟ^面試了解人們?nèi)绾巫龀鰶Q策，了解一個人對技術(shù)和解決問題的熱情程度，也是在了解未來可能一起共事的同事。

以下是我們在面試討論中提出的一些問題，希望這個問題列表可以幫助面試者和候選人能夠在面試中正確地設(shè)定期望、要求和現(xiàn)實。

基本的 JavaScript 問題

1. 讓下面的代碼可以運行：

const a = [1, 2, 3, 4, 5];
// Implement this
a.multiply();
console.log(a); // [1, 2, 3, 4, 5, 1, 4, 9, 16, 25]

2. 以下代碼會返回 false ，解釋為什么會這樣：

// false
0.2 + 0.1 === 0.3

3.JavaScript 中有哪些不同的數(shù)據(jù)類型？

提示：JavaScript 中只有兩種類型——主要數(shù)據(jù)類型和引用類型（對象），其中有六種主要數(shù)據(jù)類型。

4. 解決以下異步代碼問題。

獲取并計算屬于某個班級（假設(shè) ID 為 75）的每個學(xué)生的平均分數(shù)。每個學(xué)生在一年內(nèi)可以參加一門或多門課程。以下 API 可用于獲取所需的數(shù)據(jù)。

// GET LIST OF ALL THE STUDENTS
GET /api/students
Response:
[{
    "id": 1,
    "name": "John",
    "classroomId": 75
}]
// GET COURSES FOR GIVEN A STUDENT
GET /api/courses?filter=studentId eq 1
Response:
[{
   "id": "history",
   "studentId": 1
}, {
   "id": "algebra",
   "studentId": 1
},]
// GET EVALUATION FOR EACH COURSE
GET /api/evaluation/history?filter=studentId eq 1
Response:
{
    "id": 200,
    "score": 50,
    "totalScore": 100
}

編寫一個以班級 ID 作為參數(shù)的函數(shù)，你將使用這個函數(shù)計算該班級中每個學(xué)生的平均分數(shù)。這個函數(shù)的最終輸出應(yīng)該是帶有平均分數(shù)的學(xué)生列表：

[
  { "id": 1, "name": "John", "average": 70.5 },
  { "id": 3, "name": "Lois", "average": 67 },
}

使用普通回調(diào)、promises、observables、generator 或 async-wait 編寫所需的函數(shù)。嘗試使用至少 3 種不同的技術(shù)解決這個問題。

5. 使用 JavaScript 代理實現(xiàn)簡單的數(shù)據(jù)綁定

提示：ES Proxy 允許你攔截對任何對象屬性或方法的調(diào)用。首先，每當(dāng)?shù)讓咏壎▽ο蟀l(fā)生變更時，都應(yīng)更新 DOM。

6. 解釋 JavaScript 的并發(fā)模型

你是否熟悉 Elixir、Clojure、Java 等其他編程語言中使用的并發(fā)模型？

提示：事件循環(huán)、任務(wù)隊列、調(diào)用棧、堆等。

7.“new”關(guān)鍵字在 JavaScript 中有什么作用？

提示：在 JavaScript 中，new 是用于實例化對象的運算符。

另外，請注意 [[Construct]] 和 [[Call]]。

8.JavaScript 中有哪些不同的函數(shù)調(diào)用模式？請詳細解釋。

提示：有四種模式，函數(shù)調(diào)用、方法調(diào)用、.call() 和.apply()。

9. 介紹一些即將發(fā)布的新的 ECMAScript 提案。

提示：與 2018 年一樣，BigInt、部分函數(shù)、管道操作符等。

10.JavaScript 中的 iterator 和 iterable 是什么？你知道有哪些內(nèi)置的 iterator 嗎？

11. 為什么 JavaScript 類被認為是一種反模式？

JavaScript 的類是否還有其他用武之地？

12. 如何將下面的對象序列化成 JSON？

如果我們將下面的對象轉(zhuǎn)換為 JSON 字符串，會發(fā)生什么？

const a = {
    key1: Symbol(),
    key2: 10
}
// What will happen?
console.log(JSON.stringify(a));

13. 你熟悉 Typed Arrays 嗎？如果是，請解釋它們的用處以及它們與傳統(tǒng)數(shù)組的差別？

14. 請解釋默認參數(shù)的原理？

如果我們在調(diào)用 makeAPIRequest 函數(shù)時使用默認的 timeout，那么正確的語法是怎樣的？

function makeAPIRequest(url, timeout = 2000, headers) {
   // Some code to fetch data
}

15. 解釋什么是 TCO——尾部調(diào)用優(yōu)化。有沒有支持尾部調(diào)用優(yōu)化的 JavaScript 引擎？

提示：截至 2019 年，沒有。

JavaScript 前端應(yīng)用程序設(shè)計問題

1. 解釋單向數(shù)據(jù)流和雙向數(shù)據(jù)綁定。

Angular 1.x 基于雙向數(shù)據(jù)綁定，而 React、Vue、Elm 等基于單向數(shù)據(jù)流架構(gòu)。

2. 單向數(shù)據(jù)流架構(gòu)適合用在 MVC 的哪些方面？

MVC 擁有大約 50 年的悠久歷史，并已演變?yōu)?MVP、MVVM 和 MV*。兩者之間的相互關(guān)系是什么？如果 MVC 是架構(gòu)模式，那么單向數(shù)據(jù)流是什么？這些模式是否能解決同樣的問題？

3. 客戶端 MVC 與服務(wù)器端或經(jīng)典的 MVC 有何不同？

提示：經(jīng)典 MVC 是適用于桌面應(yīng)用程序的 Smalltalk MVC。在 Web 應(yīng)用程序中，至少有兩個不同的數(shù)據(jù) MVC 周期。

4. 是哪些因素讓函數(shù)式編程有別于面向?qū)ο蠡蛎钍骄幊蹋?/p>

提示：柯里化、point-free 函數(shù)、部分函數(shù)應(yīng)用、高階函數(shù)、純函數(shù)、獨立副作用、記錄類型（聯(lián)合、代數(shù)數(shù)據(jù)類型）等。

5. 在 JavaScript 和前端的上下文中，函數(shù)式編程如何與反應(yīng)式編程相關(guān)？

提示：沒有正確答案。但粗略地說，函數(shù)式編程是使用純函數(shù)，針對小塊代碼，而反應(yīng)式編程關(guān)于大塊代碼，即模塊之間的數(shù)據(jù)流、連接以 FP 風(fēng)格編寫的組件。FRP——函數(shù)反應(yīng)式編程是另一個不同但相關(guān)的概念。

6. 不可變數(shù)據(jù)結(jié)構(gòu)解決了哪些問題？

不可變結(jié)構(gòu)是否有任何性能影響？JS 生態(tài)系統(tǒng)中哪些庫提供了不可變的數(shù)據(jù)結(jié)構(gòu)？這些庫的優(yōu)點和缺點是什么？

提示：線程安全（我們真的需要擔(dān)心這個問題嗎？）、無副作用的函數(shù)、更好的狀態(tài)管理等。

7. 大型應(yīng)用程序是否應(yīng)該使用靜態(tài)類型？

TypeScript 或 Flow 與 Elm、ReasonML 或 PureScript 之間有什么區(qū)別？它們的優(yōu)點和缺點是什么？

選擇特定類型系統(tǒng)的主要標(biāo)準(zhǔn)是什么？

什么是類型推斷？

靜態(tài)類型語言和強類型語言之間有什么區(qū)別？在這方面 JavaScript 的本質(zhì)是什么？

你知道有哪些語言時弱類型但靜態(tài)類型的嗎？你知道有哪些語言時動態(tài)類型但強類型的嗎？

提示：結(jié)構(gòu)化與有名無實的類型系統(tǒng)、類型穩(wěn)健性、工具 / 生態(tài)系統(tǒng)支持、正確性先于便利性。

8.JavaScript 世界中哪些突出的模塊系統(tǒng)？請評論一下 ES 模塊系統(tǒng)。

列出在實現(xiàn)不同模塊系統(tǒng)之間的互操作性時所涉及的一些復(fù)雜性（主要對 ES 模塊和 CommonJS 互操作性感興趣）。

9.HTTP2 將如何影響 JavaScript 應(yīng)用程序打包？

列出 HTTP2 有別于其前身的一些基本特征。

10.Fetch API 相對于傳統(tǒng)的 Ajax 有哪些改進？

使用 Fetch API 是有任何缺點或痛點嗎？有哪些 Ajax 可以做但 fetch 做不到的事情嗎？

11. 請解釋一下基于拉取和基于推送的反應(yīng)式系統(tǒng)。

討論概念、含義、用途等

• 在討論中提及惰性與及早請求。
• 在討論中提及單數(shù)和復(fù)數(shù)值維度。
• 最后談?wù)勚到馕龅耐胶彤惒叫再|(zhì)。
• 提供示例，說明 JavaScript 中可用的每個組合。

提示：Observable 是一個惰性的、基于推送的復(fù)數(shù)值構(gòu)造，并帶有異步 / 同步調(diào)度程序。

12. 談?wù)勁c Promise 相關(guān)的一些問題。

提示：及早求值、撤銷機制、用 then() 方法冒充 map() 和 flatMap() 等。

前端基礎(chǔ)和理論相關(guān)問題

1. HTML 中 Doctype 的用途是什么？

對于以下每種情況，將會發(fā)生什么：

• Doctype 不存在。
• 使用 HTML4 Doctype，但 HTML 頁面使用了 HTML5 標(biāo)簽，如
• 使用了無效的 Doctype。

2.DOM 和 BOM 有什么區(qū)別？

提示：BOM、DOM、ECMAScript 和 JavaScript 都是不同的東西。

3.JavaScript 中的事件處理是如何進行的？

如下圖所示，我們有三個 div 元素。它們每個都有一個與之關(guān)聯(lián)的單擊處理程序。處理程序執(zhí)行以下任務(wù)：

• 外部 div 處理程序?qū)?hello outer 打印到控制臺。
• 內(nèi)部 div 處理程序?qū)?hello inner 打印到控制臺。
• 最內(nèi)部的 div 處理程序?qū)?hello innermost 打印到控制臺。

編寫一段代碼來分配這些處理程序，以便在單擊最里面的 div 時始終打印以下序列。

hello inner → hello innermost → hello outer

提示：事件捕獲和事件泡沫。

4. 使用單頁應(yīng)用程序?qū)⑽募陷d到服務(wù)器有哪些不同的方法？

提示：XMLHttpRequest2（流媒體）、fetch（非流媒體）、File API

5.CSS re-flow 和 repaint 之間有什么區(qū)別？

哪些 CSS 屬性在發(fā)生變更時會導(dǎo)致 re-flow 和 repaint？

6. 什么是 CSS 選擇器特異性以及它的原理是什么？

CSS 特異性的算法。

7.CSS 像素與硬件 / 物理像素有何不同？

提示：不是像素的像素不是像素——ppk。

8. 什么是切片（sectioning）算法？

提示：它也被稱為 HTML5 輪廓（outline）算法，在構(gòu)建具有語義結(jié)構(gòu)的網(wǎng)站時非常重要。

9. 如果你使用過 CSS Flex/CSS 網(wǎng)格，為什么你要用它們？它們?yōu)槟憬鉀Q了什么問題？

• 在使用 CSS 網(wǎng)格時，％和 fr 有何不同？
• 在使用 CSS Flexbox 時，有時候 flex-items/children 不考慮容器設(shè)置的寬度 / 高度，為什么會這樣？
• 可以使用 CSS 網(wǎng)格創(chuàng)建 Masonry 布局嗎？如果可以，怎樣做？
• 請解釋 CSS 網(wǎng)格和 CSS Flexbox 術(shù)語。
• 如何在 CSS 網(wǎng)格和 Flexbox 中渲染浮動元素（float: left | right;）？

提示：相等高度的列、垂直居中、復(fù)雜網(wǎng)格等。

10. 什么時候應(yīng)該使用 CSS 動畫而不是 CSS 過渡？選擇標(biāo)準(zhǔn)是什么？

11. 如果你正在評審 CSS 代碼，你向要在代碼中查找哪些常見問題？

示例：使用魔術(shù)數(shù)，如 width: 67px;，或使用 em 代替 rem，在通用代碼之前使用媒體查詢，濫用 ID 和類等。

12. 如何通過 JavaScript 檢測觸摸事件？

你是否認為檢測設(shè)備對觸摸事件的支持是個壞主意？如果是，為什么？比較觸摸事件和指針事件。當(dāng)設(shè)備同時支持觸摸和鼠標(biāo)事件時，你認為這些事件的正確順序應(yīng)該是怎樣的？

13. 為 Script 標(biāo)記定義的 async 和 defer 屬性有什么用？

現(xiàn)在我們有 HTTP2 和 ES 模塊，它們真的很有用嗎？

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。