今年最常見的前端面試題，你會做幾道？

作者 | Harshal Patil

譯者 | 無明

出處 | 前端之巔

在面試或招聘前端開發人員時，期望、現實和需求之間總是存在著巨大差距。面試其實是一個交流想法的地方，挑戰人們的思考方式，並客觀地分析給定的問題。可以通過面試了解人們如何做出決策，了解一個人對技術和解決問題的熱情程度，也是在了解未來可能一起共事的同事。

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

1

基本的 JavaScript 問題

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

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

3.JavaScript 中有哪些不同的數據類型？

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

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

獲取並計算屬於某個班級（假設 ID 為 75）的每個學生的平均分數。每個學生在一年內可以參加一門或多門課程。以下 API 可用於獲取所需的數據。

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

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

5. 使用 JavaScript 代理實現簡單的數據綁定

提示：ES Proxy 允許你攔截對任何對象屬性或方法的調用。首先，每當底層綁定對象發生變更時，都應更新 DOM。

6. 解釋 JavaScript 的並發模型

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

提示：事件循環、任務隊列、調用棧、堆等。

7.「new」關鍵字在 JavaScript 中有什麼作用？

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

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

8.JavaScript 中有哪些不同的函數調用模式？請詳細解釋。

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

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

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

10. JavaScript 中的 iterator 和 iterable 是什麼？你知道有哪些內置的 iterator 嗎？

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

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

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

如果我們將下面的對象轉換為 JSON 字元串，會發生什麼？

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

14. 請解釋默認參數的原理？

如果我們在調用 makeAPIRequest 函數時使用默認的 timeout，那麼正確的語法是怎樣的？

15. 解釋什麼是 TCO——尾部調用優化。有沒有支持尾部調用優化的 JavaScript 引擎？

提示：截至 2018 年，沒有。

2

JavaScript 前端應用程序設計問題

1. 解釋單向數據流和雙向數據綁定。

Angular 1.x 基於雙向數據綁定，而 React、Vue、Elm 等基於單向數據流架構。

2. 單向數據流架構適合用在 MVC 的哪些方面？

MVC 擁有大約 50 年的悠久歷史，並已演變為 MVP、MVVM 和 MV*。兩者之間的相互關係是什麼？如果 MVC 是架構模式，那麼單向數據流是什麼？這些模式是否能解決同樣的問題？

3. 客戶端 MVC 與伺服器端或經典的 MVC 有何不同？

提示：經典 MVC 是適用於桌面應用程序的 Smalltalk MVC。在 Web 應用程序中，至少有兩個不同的數據 MVC 周期。

4. 是哪些因素讓函數式編程有別於面向對象或命令式編程？

提示：柯里化、point-free 函數、部分函數應用、高階函數、純函數、獨立副作用、記錄類型（聯合、代數數據類型）等。

5. 在 JavaScript 和前端的上下文中，函數式編程如何與反應式編程相關？

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

6. 不可變數據結構解決了哪些問題？

不可變結構是否有任何性能影響？JS 生態系統中哪些庫提供了不可變的數據結構？這些庫的優點和缺點是什麼？

7. 大型應用程序是否應該使用靜態類型？

TypeScript 或 Flow 與 Elm、ReasonML 或 PureScript 之間有什麼區別？它們的優點和缺點是什麼？

選擇特定類型系統的主要標準是什麼？

什麼是類型推斷？

靜態類型語言和強類型語言之間有什麼區別？在這方面 JavaScript 的本質是什麼？

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

提示：結構化與有名無實的類型系統、類型穩健性、工具 / 生態系統支持、正確性先於便利性。

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

列出在實現不同模塊系統之間的互操作性時所涉及的一些複雜性（主要對 ES 模塊和 CommonJS 互操作性感興趣）。

9.HTTP2 將如何影響 JavaScript 應用程序打包？

列出 HTTP2 有別於其前身的一些基本特徵。

10. Fetch API 相對於傳統的 Ajax 有哪些改進？

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

11. 請解釋一下基於拉取和基於推送的反應式系統。

討論概念、含義、用途等。

在討論中提及惰性與及早請求。

在討論中提及單數和複數值維度。

最後談談值解析的同步和非同步性質。

提供示例，說明 JavaScript 中可用的每個組合。

提示：Observable 是一個惰性的、基於推送的複數值構造，並帶有非同步 / 同步調度程序。

12. 談談與 Promise 相關的一些問題。

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

3

前端基礎和理論相關問題

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

對於以下每種情況，將會發生什麼：

Doctype 不存在。

使用 HTML4 Doctype，但 HTML 頁面使用了 HTML5 標籤，如

使用了無效的 Doctype。

2.DOM 和 BOM 有什麼區別？

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

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

如下圖所示，我們有三個 div 元素。它們每個都有一個與之關聯的單擊處理程序。處理程序執行以下任務：

外部 div 處理程序將 hello outer 列印到控制台。

內部 div 處理程序將 hello inner 列印到控制台。

最內部的 div 處理程序將 hello innermost 列印到控制台。

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

hello inner hello innermost hello outer

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

4. 使用單頁應用程序將文件上載到伺服器有哪些不同的方法？

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

5.CSS re-flow 和 repaint 之間有什麼區別？

哪些 CSS 屬性在發生變更時會導致 re-flow 和 repaint？

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

CSS 特異性的演算法。

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

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

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

提示：它也被稱為 HTML5 輪廓（outline）演算法，在構建具有語義結構的網站時非常重要。

9. 如果你使用過 CSS Flex/CSS 網格，為什麼你要用它們？它們為你解決了什麼問題？

在使用 CSS 網格時，％和 fr 有何不同？

在使用 CSS Flexbox 時，有時候 flex-items/children 不考慮容器設置的寬度 / 高度，為什麼會這樣？

可以使用 CSS 網格創建 Masonry 布局嗎？如果可以，怎樣做？

請解釋 CSS 網格和 CSS Flexbox 術語。

如何在 CSS 網格和 Flexbox 中渲染浮動元素（float: left | right;）？

提示：相等高度的列、垂直居中、複雜網格等。

10. 什麼時候應該使用 CSS 動畫而不是 CSS 過渡？選擇標準是什麼？

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

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

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

你是否認為檢測設備對觸摸事件的支持是個壞主意？如果是，為什麼？比較觸摸事件和指針事件。當設備同時支持觸摸和滑鼠事件時，你認為這些事件的正確順序應該是怎樣的？

13. 為 Script 標記定義的 async 和 defer 屬性有什麼用？

現在我們有 HTTP2 和 ES 模塊，它們真的很有用嗎？

英文原文

https://blog.webf.zone/front-end-javascript-interviews-in-2018-19-e17b0b10514

4

本文彩蛋

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！