2019年前端面試都聊啥？一塊兒來看看

原文做者：Harshal PatilFollow

譯者：UC 國際研發 Jothy

寫在最前：歡迎你來到「UC國際技術」公衆號，咱們將爲你們提供與客戶端、服務端、算法、測試、數據、前端等相關的高質量技術文章，不限於原創與翻譯。

JavaScript ES2015 規範出現後，一切都大變樣啦。 該規範很大——隨着對modules（模塊）原生支持以及不斷髮展的函數式編程，新的 JavaScript 語言重煥新生。而且每一年持續推出 ES2016，ES2017 ...

然而在面試或招聘前端開發時，指望、現實和需求之間存在巨大差距。 正如 Laurie Voss 在 NPM 視頻中所說的：

如今的 Web App 97% 的代碼都來自 NPM。

視頻地址：https://www.youtube.com/watch?time_continue=238&v=Qa4dxW-Qi2s

咱們是真的在寫代碼仍是隻是把代碼像樂高積木同樣疊起來？

在 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問題

一、使如下代碼正常運行：

二、如下代碼在 JavaScript 中返回`false`。 請說明爲何：

三、JavaScript 中有哪些不一樣的數據類型？

提示：只有兩種類型 - 主要數據類型和引用類型（對象）。 有六種主要類型。

四、解決如下異步代碼問題。

檢索並計算屬於同一教室中每一個學生的平均分數，例子中教室 ID 爲 75。每一個學生能夠在一年內參加一門或多門課程。如下 API 可用於檢索所需數據。

編寫一個接受教室 ID 的函數，並根據該函數計算該教室中每一個學生的平均值。 該函數的最終輸出應該是帶有平均分數的學生列表：

[
  { "id": 1, "name": "John", "average": 70.5 },
  { "id": 3, "name": "Lois", "average": 67 },
}複製代碼

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

五、使用 JavaScript Proxy實現簡單的數據綁定

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

六、解釋 JavaScript 併發模型 您是否熟悉 Elixir，Clojure，Java 等其餘編程語言中使用的任何其餘併發模型？

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

七、「new」 關鍵字在 JavaScript 中有什麼做用？

提示：在 JavaScript 中，new 是用於實例化對象的運算符。 這裏的目的是瞭解知識廣度和記憶狀況。

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

八、JavaScript 中有哪些不一樣的函數調用模式？ 詳細解釋。 提示：有四種模式，函數調用，方法調用，.call() 和 .apply()。

九、解釋即將發佈的任一新 ECMAScript 提案。

提示：好比 2018 的 BigInt，partial function，pipeline operator 等。

十、JavaScript 中的迭代器（iterators）和迭代（iterables）是什麼？ 你知道什麼是內置迭代器嗎？

十一、如何在 JSON 中序列化如下對象？

若是咱們將如下對象轉換爲 JSON 字符串，會發生什麼？

十二、你熟悉 Typed Arrays 嗎？ 若是熟悉，請解釋他們與 JavaScript 中的傳統數組相比的異同？

13. 默認參數如何工做？

若是咱們在調用 makeAPIRequest 函數時必須使用timeout的默認值，那麼正確的語法是什麼？

1四、解釋 TCO - 尾調用優化（Tail Call Optimization）。 有沒有支持尾調用優化的 JavaScript 引擎？

提示：截至 2018 年，沒有。

JavaScript前端應用設計問題

一、解釋單向數據流和雙向數據綁定。

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

二、單向數據流架構在哪些方面適合 MVC？

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

三、客戶端 MVC 與服務器端或經典 MVC 有何不一樣？

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

四、使函數式編程與面向對象或命令式編程不一樣的關鍵因素是什麼？

提示：Currying（柯里化），point-free 函數，partial function 應用，高階函數，純函數，獨立反作用，record 類型（聯合，代數數據類型）等。

五、在 JavaScript 和前端的上下文中，函數式編程與響應式編程有什麼關係？

提示：沒有正確答案。但粗略地說，函數式編程是關於小型編碼，編寫純函數和響應式編程是大型編碼，即模塊之間的數據流，鏈接以 FP 風格編寫的組件。 FRP - 功能響應式編程（ Functional Reactive Programming）是另外一個不一樣但相關的概念。

六、不可變數據結構（immutable data structures）解決了哪些問題？

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

提示：線程安全（咱們真的須要在瀏覽器 JavaScript 中擔憂嗎？），無反作用的函數，更好的狀態管理等。

七、大型應用程序是否應使用靜態類型？

如何比較 TypeScript/Flow 與 Elm/ReasonML/PureScript 等 JS 轉換語言？這些方法的優缺點是什麼？

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

什麼是類型推斷（type inference）？

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

有你知道的弱類型但靜態類型的語言嗎？有你知道的動態類型但強類型的語言嗎？舉例一二。

提示：Structural 與 Nominal 類型系統，類型穩健性，工具/生態系統支持，正確性超過方便。

八、JavaScript 中有哪些突出的模塊系統（module systems ）？評價 ES 模塊系統。

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

九、HTTP/2 將如何影響 JavaScript 應用程序打包？

列出 HTTP/2 與其上一個版本的基本區別。

十、Fetch API 相對於傳統的 Ajax 有哪些改進？

使用 Fetch API 有那些缺點/難點嗎？

那些是Ajax 能夠作的，而 fetch 不能作的？

十一、討論與 Promise 相關的問題。

提示：及早求值（eager evaluation），尷尬的取消機制，用 then() 方法假裝 map() 和 flatMap() 等。

前端基礎和理論問題

一、HTML 中 Doctype 的用途是什麼？

具體談談，如下每種狀況下會發生什麼：

• Doctype 不存在。
• 使用了 HTML4 Doctype，但 HTML 頁面使用了 HTML5 的標籤，如 <audio> 或 <video>。它會致使任何錯誤嗎？
• 使用了無效的 Doctype。

二、 DOM 和 BOM 有什麼區別？

提示：BOM，DOM，ECMAScript 和 JavaScript 都是不一樣的東西。

三、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

事件冒泡和捕獲

提示：事件捕獲和事件冒泡

四、使用單頁應用將文件上傳到服務器的有哪些方法？

提示：XMLHttpRequest2（streaming），fetch（non-streaming），File API

五、CSS 重排和重繪之間有什麼區別？

哪些 CSS 屬性會致使重排及重繪？

6. 什麼是 CSS 選擇器權重以及它如何工做？

七、CSS中的pixel與硬件/物理中的pixel有何不一樣？

提示：像素不是像素不是像素 - ppk。

八、什麼是sectioning算法？

提示：它也被稱爲 HTML5 大綱算法。特別是在構建具備語義結構的網站時很是重要。

九、若是你用過 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 中渲染？

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

十、何時應該使用 CSS animations而不是 CSS transitions？你作出這個決定標準是什麼？

十一、若是你正在 Review CSS 代碼，那麼你在代碼中常常遇到的問題是什麼？

示例：使用魔性數字，如 width: 67px; 或使用 em 代替 rem 單位，在通用代碼以前編寫 media queries（媒體查詢），濫用 ID 和類等。

十二、如何在 JavaScript 中檢測觸摸事件？

你是否不看好檢測設備對觸摸事件的支持？若是是，爲何？比較觸摸事件和點擊事件。

當設備同時支持觸摸和鼠標事件時，你認爲這些事件的正確事件順序是什麼或應該是什麼？

1三、爲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國際技術」致力於與你共享高質量的技術文章

歡迎關注咱們的公衆號、將文章分享給你的好友