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

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

基本的 JavaScript 問題

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

// false
0.2 + 0.1 === 0.3

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

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

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

獲取并計算屬于某個班級（假設(shè) ID 為 75）的每個學(xué)生的平均分?jǐn)?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é)生的平均分?jǐn)?shù)。這個函數(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 編寫所需的函數(shù)。嘗試使用至少 3 種不同的技術(shù)解決這個問題。

5. 使用 JavaScript 代理實(shí)現(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 是用于實(shí)例化對象的運(yùn)算符。

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

8.JavaScript 中有哪些不同的函數(shù)調(diào)用模式？請詳細(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. 如何將下面的對象序列化成 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. 請解釋默認(rèn)參數(shù)的原理？

如果我們在調(diào)用 makeAPIRequest 函數(shù)時使用默認(rèn)的 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ù)、獨(dú)立副作用、記錄類型（聯(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)點(diǎn)和缺點(diǎn)是什么？

提示：線程安全（我們真的需要擔(dān)心這個問題嗎？）、無副作用的函數(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)類型語言和強(qiáng)類型語言之間有什么區(qū)別？在這方面 JavaScript 的本質(zhì)是什么？

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

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

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

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

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

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

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

使用 Fetch API 是有任何缺點(diǎn)或痛點(diǎn)嗎？有哪些 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)的一些問題。

提示：及早求值、撤銷機(jī)制、用 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 中的事件處理是如何進(jìn)行的？

如下圖所示，我們有三個 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 檢測觸摸事件？

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

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

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

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

最新評論