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

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

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

基本的 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 ，這裡是把夢想照亮的地方，同為了生活而拼搏奮鬥，大家互相幫助。新手加入即可獲得經過整理的最前沿的前端技術資料，不定時更新技術，從企業招聘人才需求 到怎麼學習前端開發，和學習什麼內容都有免費系統分享。好友都在裡面交流，歡迎加入

點選： 加入