2019年前端面試都聊啥？一起來看看
阿新 • • 發佈：2018-11-21
原文作者：Harshal PatilFollow
譯者：UC 國際研發 Jothy
JavaScript ES2015 規範出現後，一切都大變樣啦。 該規範很大——隨著對modules（模組）原生支援以及不斷髮展的函數語言程式設計，新的 JavaScript 語言重煥新生。並且每年持續推出 ES2016，ES2017 ... 然而在面試或招聘前端開發時，期望、現實和需求之間存在巨大差距。 正如 Laurie Voss 在 NPM 視訊中所說的：
在 2018 年底，仍有大多數面試者在被問到 AJAX 的問題時，回答依然是使用 jQuery。這裡舉一些能說明這種差距的典型例子：
CSS Grid 和 Flexbox 已經得到廣泛支援。然而，在面試的時候，仍然在討論 CSS 中如何使浮動實現多列布局和行內塊級元素居中。
模組打包器（Module bundler）是為大規模（ large-scale）應用而設計的規範。然而，當談到架構時，我們討論的又是minification和concatenation。在面試中我們有幾次真正討論過 Webpack？
如果 97％ 的程式碼來自 NPM，但面試的重點是排序陣列或迭代物件。更有甚者，對於找出 typeof null 的值仍然很感興趣。為什麼不能在選擇合適的庫、框架或工具這件事上採用理性點的方法呢？
我們仍會讓面試者在原型之上進行經典繼承，但並不是要驗證對這些錯誤想法的需要。我們有更多的方法模式。當然，JavaScript 類、新引入的私有和靜態屬性也值得討論。這能幫助我們更好地理解面試者的想法，對關鍵決策的思考等。
對快取的討論仍侷限於 Cache control headers和 CDN。像 IndexDB，HTTP/2 或 Service Workers 這些技術只是路人而已。
面試者數不勝數，但面試評估與實際工作需要之間又相去甚遠。一方面，我們的前端技術取得了巨大的飛躍，另一方面，我們龐大的社群又還沒擁抱這些新技術。殘破的社群永遠不是一個好兆頭。這是一條災難之路。差距總會催生一些新的東西，它強大到足以摧毀我們迄今所創造的一切。我無法想象 Java 開發者使用 GWT 編寫另一個 Facebook。
面試是催生變革和匯聚人才的好方式。作為面試官的你，如果僅僅把面試當成「面試」，那麼你只能自我膨脹，最終一無所獲。
以下是我們在面試討論中提出的一些問題。我們希望它可以幫助面試官和麵試者準確地看清期望，需求和現實。
1、使以下程式碼正常執行：
![]()
2、以下程式碼在 JavaScript 中返回`false`。 請說明為什麼：![]()
3、JavaScript 中有哪些不同的資料型別？
4、解決以下非同步程式碼問題。 檢索並計算屬於同一教室中每個學生的平均分數，例子中教室 ID 為 75。每個學生可以在一年內參加一門或多門課程。以下 API 可用於檢索所需資料。
![]()
編寫一個接受教室 ID 的函式，並根據該函式計算該教室中每個學生的平均值。 該函式的最終輸出應該是帶有平均分數的學生列表：
5、使用 JavaScript Proxy實現簡單的資料繫結 提示：ES Proxy 允許你攔截對任何物件屬性或方法的呼叫。 首先，每當更改底層繫結物件時，都應更新 DOM。
6、解釋 JavaScript 併發模型 您是否熟悉 Elixir，Clojure，Java 等其他程式語言中使用的任何其他併發模型？ 提示：事件迴圈，任務佇列，呼叫棧，堆等。
7、“new” 關鍵字在 JavaScript 中有什麼作用？ 提示：在 JavaScript 中，new 是用於例項化物件的運算子。 這裡的目的是瞭解知識廣度和記憶情況。 另外，請注意 [[Construct]] 和 [[Call]]。
8、JavaScript 中有哪些不同的函式呼叫模式？ 詳細解釋。 提示：有四種模式，函式呼叫，方法呼叫，.call() 和 .apply()。
9、解釋即將釋出的任一新 ECMAScript 提案。 提示：比如 2018 的 BigInt，partial function，pipeline operator 等。
10、JavaScript 中的迭代器（iterators）和迭代（iterables）是什麼？ 你知道什麼是內建迭代器嗎？
11、如何在 JSON 中序列化以下物件？ 如果我們將以下物件轉換為 JSON 字串，會發生什麼？
![]()
12、你熟悉 Typed Arrays 嗎？ 如果熟悉，請解釋他們與 JavaScript 中的傳統陣列相比的異同？
13. 預設引數如何工作？ 如果我們在呼叫 makeAPIRequest 函式時必須使用timeout的預設值，那麼正確的語法是什麼？
![]()
14、解釋 TCO - 尾呼叫優化（Tail Call Optimization）。 有沒有支援尾呼叫優化的 JavaScript 引擎？ 提示：截至 2018 年，沒有。
1、解釋單向資料流和雙向資料繫結。 Angular 1.x 基於雙向資料繫結，而 React，Vue，Elm 等基於單向資料流架構。
2、單向資料流架構在哪些方面適合 MVC？ MVC 擁有大約 50 年的悠久歷史，並已演變為 MVP，MVVM 和 MV *。兩者之間的相互關係是什麼？如果 MVC 是架構模式，那麼單向資料流是什麼？這些競爭模式是否能解決同樣的問題？
3、客戶端 MVC 與伺服器端或經典 MVC 有何不同？ 提示：經典 MVC 是適用於桌面應用程式的 Smalltalk MVC。在 Web 應用中，至少有兩個不同的資料 MVC 週期。
4、使函數語言程式設計與面向物件或指令式程式設計不同的關鍵因素是什麼？ 提示：Currying（柯里化），point-free 函式，partial function 應用，高階函式，純函式，獨立副作用，record 型別（聯合，代數資料型別）等。
5、在 JavaScript 和前端的上下文中，函數語言程式設計與響應式程式設計有什麼關係？ 提示：沒有正確答案。但粗略地說，函數語言程式設計是關於小型編碼，編寫純函式和響應式程式設計是大型編碼，即模組之間的資料流，連線以 FP 風格編寫的元件。 FRP - 功能響應式程式設計（ Functional Reactive Programming）是另一個不同但相關的概念。
6、不可變資料結構（immutable data structures）解決了哪些問題？ 不可變結構是否有任何效能影響？ JS 生態系統中哪些庫提供了不可變的資料結構？這些庫的優點和缺點是什麼？
提示：執行緒安全（我們真的需要在瀏覽器 JavaScript 中擔心嗎？），無副作用的函式，更好的狀態管理等。
7、大型應用程式是否應使用靜態型別？ 如何比較 TypeScript/Flow 與 Elm/ReasonML/PureScript 等 JS 轉換語言？這些方法的優缺點是什麼？
選擇特定型別系統的主要標準應該是什麼？
什麼是型別推斷（type inference）？
靜態型別語言和強型別語言有什麼區別？在這方面 JavaScript 的本質是什麼？
有你知道的弱型別但靜態型別的語言嗎？有你知道的動態型別但強型別的語言嗎？舉例一二。
提示：Structural 與 Nominal 型別系統，型別穩健性，工具/生態系統支援，正確性超過方便。
8、JavaScript 中有哪些突出的模組系統（module systems ）？評價 ES 模組系統。 列出在實現不同模組系統之間互操作所涉及的一些複雜性問題（主要對 ES 模組和 CommonJS 互操作感興趣）
9、HTTP/2 將如何影響 JavaScript 應用程式打包？ 列出 HTTP/2 與其上一個版本的基本區別。
10、Fetch API 相對於傳統的 Ajax 有哪些改進？ 使用 Fetch API 有那些缺點/難點嗎？ 那些是Ajax 可以做的，而 fetch 不能做的？
11、討論與 Promise 相關的問題。 提示：及早求值（eager evaluation），尷尬的取消機制，用 then() 方法偽裝 map() 和 flatMap() 等。
1、HTML 中 Doctype 的用途是什麼？ 具體談談，以下每種情況下會發生什麼：
2、 DOM 和 BOM 有什麼區別？ 提示：BOM，DOM，ECMAScript 和 JavaScript 都是不同的東西。
3、JavaScript 中的事件處理如何執行？ 如下圖所示，我們有三個 div 元素。每個div都有一個與之關聯的點選處理程式。處理程式執行以下任務：
編寫一段程式碼來分配這些任務，以便在單擊innermost div 時始終列印以下序列？
hello inner → hello innermost → hello outer
![]()
事件冒泡和捕獲 提示：事件捕獲和事件冒泡
4、使用單頁應用將檔案上傳到伺服器的有哪些方法？ 提示：XMLHttpRequest2（streaming），fetch（non-streaming），File API
5、CSS 重排和重繪之間有什麼區別？ 哪些 CSS 屬性會導致重排及重繪？
6. 什麼是 CSS 選擇器權重以及它如何工作？
7、CSS中的pixel與硬體/物理中的pixel有何不同？ 提示：畫素不是畫素不是畫素 - ppk。
8、什麼是sectioning演算法？ 提示：它也被稱為 HTML5 大綱演算法。特別是在構建具有語義結構的網站時非常重要。
9、如果你用過 CSS Flex / CSS Grid（網格）佈局，請說明你為什麼要使用它？它為你解決了什麼問題？
使用 CSS Grid，百分比％和 fr 單位有何不同？ 使用 CSS flexbox，有時 flex-items/children 會不考慮 flex 容器設定的寬度/高度？為什麼會這樣？ 可以使用 CSS Grid建立 Masonry layout（瀑布流佈局）嗎？如果可以，怎麼做？ 解釋 CSS Grid和 CSS flexbox 術語？ 浮動元素（float：left | right;）如何在 CSS Grid 和 flexbox 中渲染？
提示：等高的列，垂直居中，複雜網格等。
10、什麼時候應該使用 CSS animations而不是 CSS transitions？你做出這個決定標準是什麼？
11、如果你正在 Review CSS 程式碼，那麼你在程式碼中經常遇到的問題是什麼？ 示例：使用魔性數字，如 width: 67px; 或使用 em 代替 rem 單位，在通用程式碼之前編寫 media queries（媒體查詢），濫用 ID 和類等。
12、如何在 JavaScript 中檢測觸控事件？ 你是否不看好檢測裝置對觸控事件的支援？如果是，為什麼？比較觸控事件和點選事件。 當裝置同時支援觸控和滑鼠事件時，你認為這些事件的正確事件順序是什麼或應該是什麼？
13、為script tag定義的 `async` 和 `defer` 屬性有什麼用？ 現在我們有 HTTP/2 和 ES 模組，它們真的很有用嗎？
列出的清單只是我們在面試中可能討論的無限點的一瞥。 有很多東西，比如 Web Components，CORS，Security，Cookies，CSS transform，Web Assembly，Service Workers，PWA，CSS 架構等，我們沒有考慮過。 我們也沒有涉及框架或庫的特定問題。
希望本指南能幫助社群在面試的朋友們找準自己的方向。
英文原文： https://blog.webf.zone/front-end-javascript-interviews-in-2018-19-e17b0b10514
“UC國際技術”致力於與你共享高質量的技術文章 歡迎關注我們的公眾號、將文章分享給你的好友
![]()
寫在最前：歡迎你來到“UC國際技術”公眾號，我們將為大家提供與客戶端、服務端、演算法、測試、資料、前端等相關的高質量技術文章，不限於原創與翻譯。
JavaScript ES2015 規範出現後，一切都大變樣啦。 該規範很大——隨著對modules（模組）原生支援以及不斷髮展的函數語言程式設計，新的 JavaScript 語言重煥新生。並且每年持續推出 ES2016，ES2017 ... 然而在面試或招聘前端開發時，期望、現實和需求之間存在巨大差距。 正如 Laurie Voss 在 NPM 視訊中所說的：
現在的 Web App 97% 的程式碼都來自 NPM。
在 2018 年底，仍有大多數面試者在被問到 AJAX 的問題時，回答依然是使用 jQuery。這裡舉一些能說明這種差距的典型例子：
CSS Grid 和 Flexbox 已經得到廣泛支援。然而，在面試的時候，仍然在討論 CSS 中如何使浮動實現多列布局和行內塊級元素居中。
模組打包器（Module bundler）是為大規模（ large-scale）應用而設計的規範。然而，當談到架構時，我們討論的又是minification和concatenation。在面試中我們有幾次真正討論過 Webpack？
如果 97％ 的程式碼來自 NPM，但面試的重點是排序陣列或迭代物件。更有甚者，對於找出 typeof null 的值仍然很感興趣。為什麼不能在選擇合適的庫、框架或工具這件事上採用理性點的方法呢？
我們仍會讓面試者在原型之上進行經典繼承，但並不是要驗證對這些錯誤想法的需要。我們有更多的方法模式。當然，JavaScript 類、新引入的私有和靜態屬性也值得討論。這能幫助我們更好地理解面試者的想法，對關鍵決策的思考等。
對快取的討論仍侷限於 Cache control headers和 CDN。像 IndexDB，HTTP/2 或 Service Workers 這些技術只是路人而已。
面試者數不勝數，但面試評估與實際工作需要之間又相去甚遠。一方面，我們的前端技術取得了巨大的飛躍，另一方面，我們龐大的社群又還沒擁抱這些新技術。殘破的社群永遠不是一個好兆頭。這是一條災難之路。差距總會催生一些新的東西，它強大到足以摧毀我們迄今所創造的一切。我無法想象 Java 開發者使用 GWT 編寫另一個 Facebook。
面試是催生變革和匯聚人才的好方式。作為面試官的你，如果僅僅把面試當成「面試」，那麼你只能自我膨脹，最終一無所獲。
要使一場面試成功，必須對其進行討論。 它必須是一個交換思想的地方。 它應該引發人們思考並客觀地分析給定的問題。 它要能幫助我們理解人們做決策的過程。 它要能幫助我們瞭解一個人對技術和解決問題的熱情。 它意味著要了解未來可能的同事。 所有那些謎題，tricks 或 typeof null 都不能真正稱為面試。
以下是我們在面試討論中提出的一些問題。我們希望它可以幫助面試官和麵試者準確地看清期望，需求和現實。
太長不看版：我們要先把自己當成面試官。
![]()
基本的JavaScript問題
1、使以下程式碼正常執行：
2、以下程式碼在 JavaScript 中返回`false`。 請說明為什麼：
3、JavaScript 中有哪些不同的資料型別？
提示：只有兩種型別 - 主要資料型別和引用型別（物件）。 有六種主要型別。
4、解決以下非同步程式碼問題。 檢索並計算屬於同一教室中每個學生的平均分數，例子中教室 ID 為 75。每個學生可以在一年內參加一門或多門課程。以下 API 可用於檢索所需資料。
編寫一個接受教室 ID 的函式，並根據該函式計算該教室中每個學生的平均值。 該函式的最終輸出應該是帶有平均分數的學生列表：
[
{ "id": 1, "name": "John", "average": 70.5 },
{ "id": 3, "name": "Lois", "average": 67 },
}複製程式碼5、使用 JavaScript Proxy實現簡單的資料繫結 提示：ES Proxy 允許你攔截對任何物件屬性或方法的呼叫。 首先，每當更改底層繫結物件時，都應更新 DOM。
6、解釋 JavaScript 併發模型 您是否熟悉 Elixir，Clojure，Java 等其他程式語言中使用的任何其他併發模型？ 提示：事件迴圈，任務佇列，呼叫棧，堆等。
7、“new” 關鍵字在 JavaScript 中有什麼作用？ 提示：在 JavaScript 中，new 是用於例項化物件的運算子。 這裡的目的是瞭解知識廣度和記憶情況。 另外，請注意 [[Construct]] 和 [[Call]]。
8、JavaScript 中有哪些不同的函式呼叫模式？ 詳細解釋。 提示：有四種模式，函式呼叫，方法呼叫，.call() 和 .apply()。
9、解釋即將釋出的任一新 ECMAScript 提案。 提示：比如 2018 的 BigInt，partial function，pipeline operator 等。
10、JavaScript 中的迭代器（iterators）和迭代（iterables）是什麼？ 你知道什麼是內建迭代器嗎？
11、如何在 JSON 中序列化以下物件？ 如果我們將以下物件轉換為 JSON 字串，會發生什麼？
12、你熟悉 Typed Arrays 嗎？ 如果熟悉，請解釋他們與 JavaScript 中的傳統陣列相比的異同？
13. 預設引數如何工作？ 如果我們在呼叫 makeAPIRequest 函式時必須使用timeout的預設值，那麼正確的語法是什麼？
14、解釋 TCO - 尾呼叫優化（Tail Call Optimization）。 有沒有支援尾呼叫優化的 JavaScript 引擎？ 提示：截至 2018 年，沒有。
![]()
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、使函數語言程式設計與面向物件或指令式程式設計不同的關鍵因素是什麼？ 提示：Currying（柯里化），point-free 函式，partial function 應用，高階函式，純函式，獨立副作用，record 型別（聯合，代數資料型別）等。
5、在 JavaScript 和前端的上下文中，函數語言程式設計與響應式程式設計有什麼關係？ 提示：沒有正確答案。但粗略地說，函數語言程式設計是關於小型編碼，編寫純函式和響應式程式設計是大型編碼，即模組之間的資料流，連線以 FP 風格編寫的元件。 FRP - 功能響應式程式設計（ Functional Reactive Programming）是另一個不同但相關的概念。
6、不可變資料結構（immutable data structures）解決了哪些問題？ 不可變結構是否有任何效能影響？ JS 生態系統中哪些庫提供了不可變的資料結構？這些庫的優點和缺點是什麼？
提示：執行緒安全（我們真的需要在瀏覽器 JavaScript 中擔心嗎？），無副作用的函式，更好的狀態管理等。
7、大型應用程式是否應使用靜態型別？ 如何比較 TypeScript/Flow 與 Elm/ReasonML/PureScript 等 JS 轉換語言？這些方法的優缺點是什麼？
選擇特定型別系統的主要標準應該是什麼？
什麼是型別推斷（type inference）？
靜態型別語言和強型別語言有什麼區別？在這方面 JavaScript 的本質是什麼？
有你知道的弱型別但靜態型別的語言嗎？有你知道的動態型別但強型別的語言嗎？舉例一二。
提示：Structural 與 Nominal 型別系統，型別穩健性，工具/生態系統支援，正確性超過方便。
8、JavaScript 中有哪些突出的模組系統（module systems ）？評價 ES 模組系統。 列出在實現不同模組系統之間互操作所涉及的一些複雜性問題（主要對 ES 模組和 CommonJS 互操作感興趣）
9、HTTP/2 將如何影響 JavaScript 應用程式打包？ 列出 HTTP/2 與其上一個版本的基本區別。
10、Fetch API 相對於傳統的 Ajax 有哪些改進？ 使用 Fetch API 有那些缺點/難點嗎？ 那些是Ajax 可以做的，而 fetch 不能做的？
11、討論與 Promise 相關的問題。 提示：及早求值（eager evaluation），尷尬的取消機制，用 then() 方法偽裝 map() 和 flatMap() 等。
![]()
前端基礎和理論問題
1、HTML 中 Doctype 的用途是什麼？ 具體談談，以下每種情況下會發生什麼：
- Doctype 不存在。
- 使用了 HTML4 Doctype，但 HTML 頁面使用了 HTML5 的標籤，如 <audio> 或 <video>。它會導致任何錯誤嗎？
- 使用了無效的 Doctype。
2、 DOM 和 BOM 有什麼區別？ 提示：BOM，DOM，ECMAScript 和 JavaScript 都是不同的東西。
3、JavaScript 中的事件處理如何執行？ 如下圖所示，我們有三個 div 元素。每個div都有一個與之關聯的點選處理程式。處理程式執行以下任務：
- Outer div click處理程式將 hello outer列印到控制檯。
- Inner div click處理程式將 hello inner 列印到控制檯。
- Innermost div click 處理程式將 hello innermost 列印到控制檯。
編寫一段程式碼來分配這些任務，以便在單擊innermost div 時始終列印以下序列？
hello inner → hello innermost → hello outer
事件冒泡和捕獲 提示：事件捕獲和事件冒泡
4、使用單頁應用將檔案上傳到伺服器的有哪些方法？ 提示：XMLHttpRequest2（streaming），fetch（non-streaming），File API
5、CSS 重排和重繪之間有什麼區別？ 哪些 CSS 屬性會導致重排及重繪？
6. 什麼是 CSS 選擇器權重以及它如何工作？
7、CSS中的pixel與硬體/物理中的pixel有何不同？ 提示：畫素不是畫素不是畫素 - ppk。
8、什麼是sectioning演算法？ 提示：它也被稱為 HTML5 大綱演算法。特別是在構建具有語義結構的網站時非常重要。
9、如果你用過 CSS Flex / CSS Grid（網格）佈局，請說明你為什麼要使用它？它為你解決了什麼問題？
使用 CSS Grid，百分比％和 fr 單位有何不同？ 使用 CSS flexbox，有時 flex-items/children 會不考慮 flex 容器設定的寬度/高度？為什麼會這樣？ 可以使用 CSS Grid建立 Masonry layout（瀑布流佈局）嗎？如果可以，怎麼做？ 解釋 CSS Grid和 CSS flexbox 術語？ 浮動元素（float：left | right;）如何在 CSS Grid 和 flexbox 中渲染？
提示：等高的列，垂直居中，複雜網格等。
10、什麼時候應該使用 CSS animations而不是 CSS transitions？你做出這個決定標準是什麼？
11、如果你正在 Review CSS 程式碼，那麼你在程式碼中經常遇到的問題是什麼？ 示例：使用魔性數字，如 width: 67px; 或使用 em 代替 rem 單位，在通用程式碼之前編寫 media queries（媒體查詢），濫用 ID 和類等。
12、如何在 JavaScript 中檢測觸控事件？ 你是否不看好檢測裝置對觸控事件的支援？如果是，為什麼？比較觸控事件和點選事件。 當裝置同時支援觸控和滑鼠事件時，你認為這些事件的正確事件順序是什麼或應該是什麼？
13、為script tag定義的 `async` 和 `defer` 屬性有什麼用？ 現在我們有 HTTP/2 和 ES 模組，它們真的很有用嗎？
列出的清單只是我們在面試中可能討論的無限點的一瞥。 有很多東西，比如 Web Components，CORS，Security，Cookies，CSS transform，Web Assembly，Service Workers，PWA，CSS 架構等，我們沒有考慮過。 我們也沒有涉及框架或庫的特定問題。
希望本指南能幫助社群在面試的朋友們找準自己的方向。
英文原文： https://blog.webf.zone/front-end-javascript-interviews-in-2018-19-e17b0b10514
“UC國際技術”致力於與你共享高質量的技術文章 歡迎關注我們的公眾號、將文章分享給你的好友