這是今年前端最常見的面試題，你都會了嗎？

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

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

基本的 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 中有哪些不同的數據類型？

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

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

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

// 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 作為參數的函數，你將使用這個函數計算該班級中每個學生的平均分數。這個函數的最終輸出應該是帶有平均分數的學生列表：

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

使用普通回調、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 字符串，會發生什么？

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

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

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

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

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

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

提示：截至 2019 年，沒有。

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() 等。

前端基礎和理論相關問題

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 模塊，它們真的很有用嗎？

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

點擊： 加入