這是今年前端最常見(jiàn)的面試題，你都會(huì)了嗎？

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

以下是我們?cè)诿嬖囉懻撝刑岢龅囊恍﹩?wèn)題，希望這個(gè)問(wèn)題列表可以幫助面試者和候選人能夠在面試中正確地設(shè)定期望、要求和現(xiàn)實(shí)。

基本的 JavaScript 問(wèn)題

1. 讓下面的代碼可以運(yùn)行：

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. 以下代碼會(huì)返回 false ，解釋為什么會(huì)這樣：

// false
0.2 + 0.1 === 0.3

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

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

4. 解決以下異步代碼問(wèn)題。

獲取并計(jì)算屬于某個(gè)班級(jí)（假設(shè) ID 為 75）的每個(gè)學(xué)生的平均分?jǐn)?shù)。每個(gè)學(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
}

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

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

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

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

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

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

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

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

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

提示：在 JavaScript 中，new 是用于實(shí)例化對(duì)象的運(yùn)算符。

另外，請(qǐng)注意 [[Construct]] 和 [[Call]]。

8.JavaScript 中有哪些不同的函數(shù)調(diào)用模式？請(qǐng)?jiān)敿?xì)解釋。

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

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

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

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

11. 為什么 JavaScript 類被認(rèn)為是一種反模式？

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

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

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

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

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

14. 請(qǐng)解釋默認(rèn)參數(shù)的原理？

如果我們?cè)谡{(diào)用 makeAPIRequest 函數(shù)時(shí)使用默認(rèn)的 timeout，那么正確的語(yǔ)法是怎樣的？

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

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

提示：截至 2019 年，沒(méi)有。

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

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ù)流是什么？這些模式是否能解決同樣的問(wèn)題？

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

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

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

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

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

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

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

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

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

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

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

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

• 什么是類型推斷？

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

• 你知道有哪些語(yǔ)言時(shí)弱類型但靜態(tài)類型的嗎？你知道有哪些語(yǔ)言時(shí)動(dòng)態(tài)類型但強(qiáng)類型的嗎？

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

8.JavaScript 世界中哪些突出的模塊系統(tǒng)？請(qǐng)?jiān)u論一下 ES 模塊系統(tǒng)。

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

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

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

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

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

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

討論概念、含義、用途等

• 在討論中提及惰性與及早請(qǐng)求。

• 在討論中提及單數(shù)和復(fù)數(shù)值維度。

• 最后談?wù)勚到馕龅耐胶彤惒叫再|(zhì)。

• 提供示例，說(shuō)明 JavaScript 中可用的每個(gè)組合。

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

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

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

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

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

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

• Doctype 不存在。

• 使用 HTML4 Doctype，但 HTML 頁(yè)面使用了 HTML5 標(biāo)簽，如

• 使用了無(wú)效的 Doctype。

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

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

3.JavaScript 中的事件處理是如何進(jìn)行的？

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

• 外部 div 處理程序?qū)?hello outer 打印到控制臺(tái)。

• 內(nèi)部 div 處理程序?qū)?hello inner 打印到控制臺(tái)。

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

編寫(xiě)一段代碼來(lái)分配這些處理程序，以便在單擊最里面的 div 時(shí)始終打印以下序列。

hello inner → hello innermost → hello outer

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

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

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

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

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

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

CSS 特異性的算法。

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

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

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

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

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

• 在使用 CSS 網(wǎng)格時(shí)，％和 fr 有何不同？

• 在使用 CSS Flexbox 時(shí)，有時(shí)候 flex-items/children 不考慮容器設(shè)置的寬度 / 高度，為什么會(huì)這樣？

• 可以使用 CSS 網(wǎng)格創(chuàng)建 Masonry 布局嗎？如果可以，怎樣做？

• 請(qǐng)解釋 CSS 網(wǎng)格和 CSS Flexbox 術(shù)語(yǔ)。

• 如何在 CSS 網(wǎng)格和 Flexbox 中渲染浮動(dòng)元素（float: left | right;）？

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

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

11. 如果你正在評(píng)審 CSS 代碼，你向要在代碼中查找哪些常見(jiàn)問(wèn)題？

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

12. 如何通過(guò) JavaScript 檢測(cè)觸摸事件？

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

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

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

無(wú)論是在學(xué)習(xí)web前端開(kāi)發(fā)，還是已經(jīng)工作的，這里推薦一下我們的前端學(xué)習(xí)交流群：784783012 ，這里是把夢(mèng)想照亮的地方，同為了生活而拼搏奮斗，大家互相幫助。新手加入即可獲得經(jīng)過(guò)整理的最前沿的前端技術(shù)資料，不定時(shí)更新技術(shù)，從企業(yè)招聘人才需求 到怎么學(xué)習(xí)前端開(kāi)發(fā)，和學(xué)習(xí)什么內(nèi)容都有免費(fèi)系統(tǒng)分享。好友都在里面交流，歡迎加入

點(diǎn)擊： 加入