每個開發者都應該知道的33個JavaScript概念

作者：Ahmad Shadeed 譯者：前端小智 來源：dev

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub http://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

首先，問大家一個問題，你對 JS 的熟練程度有多深？

今天，我們來介紹一下 JS 中的33個概念，這些概念中，你可能知道，也有可能不知道，甚至連聽都沒聽過。

這些概念是作為前端都應該需要知道的，那我們開始吧。

1. 呼叫堆疊

呼叫堆疊是一種機制，用於直譯器（如網路瀏覽器中的JavaScript直譯器）跟蹤其在呼叫多個函式的指令碼中的位置--當前正在執行什麼函式，以及從該函式中呼叫什麼函式，等等。

2. 原始型別

除了物件之外，所有的型別都定義了不可變的值（也就是說，不能改變的值）。例如（與C語言不同），字串是不可變的。我們把這些型別的值稱為 "原始值"。

3. 值型別和引用型別

被分配了一個非原始值的變數被賦予了一個對該值的引用。該引用指向該物件在記憶體中的位置。變數實際上並不包含該值。

4. Implicit, Explicit, Nominal, Structuring and Duck Typing

型別強制是指當運算子的運算元為不同型別時，其中一個運算元將被轉換為另一個運算元型別的 "等價 "值。

參考：http://stackoverflow.com/questions/19915688/what-exactly-is-type-coercion-in-javascript

5. == vs === vs typeof

JavaScript有兩種視覺上相似但又非常不同的方法來測試相等性。你可以用 == 或 == 來測試相等性。

6. 函式作用域，塊作用域和詞法作用域

1: 函式作用域 2：塊作用域 3：記法作用域

7. 表示式與宣告式

進行這種區分很重要，因為表示式可以像宣告式一樣行動，這就是為什麼我們也有表示式語句。然而，另一方面，宣告式不能像表示式那樣行動。

8. IIFE，模組和名稱空間

參考：http://vvkchandra.medium.com/essential-javascript-mastering-immediately-invoked-function-expressions-67791338ddc6

9. 訊息佇列和事件迴圈

"JavaScript是如何做到非同步和單執行緒的？" 簡短的回答是，JavaScript語言是單執行緒的，非同步行為不是JavaScript語言本身的一部分，而是建立在瀏覽器（或程式設計環境）中的核心JavaScript語言之上，並通過瀏覽器的API訪問。

參考：http://medium.com/front-end-weekly/javascript-event-loop-explained-4cd26af121d4

10. setTimeout, setInterval 和 requestAnimationFrame

我們希望不要黎曼執行一個函式，而是在以後的某個時間執行。這就是所謂的 "排程呼叫"。

參考：http://javascript.info/settimeout-setinterval

11. JavaScript引擎

為Web編寫程式碼有時感覺有點神奇，因為開發人員編寫了一系列字元，這些字元在瀏覽器中變成了具體的影象、文字和動作。理解這項技術可以幫助開發人員更好地調整他們作為程式設計師的技能。

參考：http://www.softwaremag.com/javascript-engines/

12. 按位運算子，型別陣列和陣列緩衝區

從技術上來說，對於計算機來說，所有東西都是1和0。它不使用數字、字元或字串，它只使用二進位制數字(位)。簡單解釋主濁，所有東西都以二進位制形式儲存。然後計算機使用諸如UTF-8之類的編碼將儲存的位組合對映到字元、數字或不同的符號(ELI5版本)。

參考：http://hackernoon.com/programming-with-js-bitwise-operations-393eb0745dc4

13. DOM和佈局樹

文件物件模型(Document Object Model)，通常被稱為DOM，是使網站具有互動性的重要組成部分。它是一種允許程式語言操作網站內容、結構和風格的介面。JavaScript是連線到網際網路瀏覽器中的DOM的客戶端指令碼語言。

參考：http://www.digitalocean.com/community/tutorials/introduction-to-the-dom

14. 工廠和類

JavaScript是一種基於原型的語言，意味著物件的屬性和方法可以通過具有克隆和擴充套件能力的通用物件來共享。這被稱為原型繼承，與類繼承不同。

參考：http://www.digitalocean.com/community/tutorials/understanding-prototypes-and-inheritance-in-javascript

15. this, call, apply 和 bind

這些函式對每個JavaScript開發者來說都非常重要，幾乎每個JavaScript庫或框架都會用到。

參考：http://levelup.gitconnected.com/grokking-call-apply-and-bind-methods-in-javascript-392351a4be8b

16. new, Constructor, instanceof 和 Instances

每個JavaScript物件都有一個原型。JavaScript中的所有物件都從其原型繼承其方法和屬性。

參考：http://codeburst.io/javascript-for-beginners-the-new-operator-cee35beb669e

17. 原型繼承和原型鏈

對於有基於類的語言（如Java或C++）經驗的開發者來說，JavaScript有點令人困惑，因為它是動態的，本身不提供類的實現（ES2015中引入了 class的關鍵字，但只是語法糖，JavaScript仍然是基於原型的）。

參考：http://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

18. Object.create 和 Object.assign

Object.create 方法是在JavaScript中建立一個新物件的方法之一。

參考：http://medium.com/@happymishra66/object-create-in-javascript-fa8674df6ed2

19. map, reduce, filter

即使你不知道函數語言程式設計是什麼，你也可能一直在使用map、filter和reduce，因為它們非常有用，可以讓你寫出更整潔的邏輯，從而讓你的程式碼不那麼糟糕。

參考：http://medium.com/@bojangbusiness/javascript-functional-programming-map-filter-and-reduce-846ff9ba492d

20.純函式、副作用、狀態突變和事件傳播

我們的許多bug都源於與IO相關的、資料突變的、產生副作用的程式碼。這些問題在我們的程式碼庫中隨處可見--從接受使用者輸入、通過http呼叫接收一個意外的響應，或向檔案系統寫入等。是一個殘酷的現實，所以我們也要正確的對待並解決它。

參考：http://hackernoon.com/javascript-and-functional-programming-pt-3-pure-functions-d572bb52e21c

21.閉包

閉包是將函式與對其周圍狀態(詞法環境)的引用捆綁在一起的組合。換句話說，閉包允許我們從內部函式訪問外部函式的作用域。在JavaScript中，閉包在每次建立函式時建立。

參考：http://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

22. 高階函式

JavaScript可以接受高階函式。這種處理高階函式的能力，以及其他特點，使JavaScript成為非常適合函數語言程式設計的程式語言之一。

參考：http://www.sitepoint.com/higher-order-functions-javascript/

23. 遞迴

參考：http://www.freecodecamp.org/news/recursion-in-javascript-1608032c7a1f

24. 收集器和生成器

生成器物件是由生成器函式返回的，它同時符合可迭代協議和迭代器協議。

參考：http://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator

25. Promise

Promise物件表示一個非同步操作的最終完成（或失敗）及其結果值。

參考：http://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

26. async/await

參考：http://javascript.info/async-await

27. 資料結構

Javascript每天都在不斷髮展。隨著React、Angular、Vue、NodeJS、Electron、React Native等框架和平臺的迅速發展，在大規模應用中使用javascript已經變得相當普遍。

參考：http://blog.cloudboost.io/playing-with-data-structures-in-javascript-stack-a55ebe50f29d

28. 昂貴的運算和大O符號

"什麼是大O符號？"這是一個非常常見的開發人員的工作面試問題。簡而言之，它是一種數學表達方式，即根據輸入的時間長短，一個演算法需要執行多長時間，通常說的是最壞情況。

參考：http://medium.com/cesars-tech-insights/big-o-notation-javascript-25c79f50b19b

29. 演算法

在數學和電腦科學中，演算法是一個定義明確的指令的有限序列，通常用於解決一類特定問題或進行計算。

30. 繼承、多型性和程式碼重用

類的繼承是一個類擴充套件另一個類的方式，因此我們可以在現有的基礎上建立新的功能。

參考：http://javascript.info/class-inheritance

31. 設計模式

每個開發人員都在努力編寫可維護、可閱讀和可重用的程式碼。當應用程式變得越來越大時，程式碼的結構化變得更加重要。設計模式被證明是解決這一挑戰的關鍵--為特定情況下的共同問題提供一個組織結構。

參考：http://www.digitalocean.com/community/tutorial_series/javascript-design-patterns

32. 區域性應用、柯里化、組成和管道

函式組合是一種將多個簡單的函式組合起來以建立一個更復雜的函式的機制。

參考：http://www.codementor.io/@michelre/use-function-composition-in-javascript-gkmxos5mj

33. 簡潔程式碼

編寫乾淨的、可理解的、可維護的程式碼是每個開發者都要掌握的一項技能。

參考：http://www.freecodecamp.org/news/clean-coding-for-beginners/

如果你覺得這份清單很有用，別忘了把它收藏起來，並關注我以獲得更多類似的內容。

---

編輯中可能存在的bug沒法實時知道，事後為了解決這些bug,花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

http://dev.to/eludadev/33-javascript-concepts-every-beginner-should-know-with-tutorials-4kao

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub http://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。