首先，問(wèn)大家一個(gè)問(wèn)題，你對(duì) JS 的熟練程度有多深?

今天，我們來(lái)介紹一下 JS 中的33個(gè)概念，這些概念中，你可能知道，也有可能不知道，甚至連聽(tīng)都沒(méi)聽(tīng)過(guò)。

這些概念是作為前端都應(yīng)該需要知道的，那我們開(kāi)始吧。

1、調(diào)用堆棧

調(diào)用堆棧是一種機(jī)制，用于解釋器(如網(wǎng)絡(luò)瀏覽器中的JavaScript解釋器)跟蹤其在調(diào)用多個(gè)函數(shù)的腳本中的位置--當(dāng)前正在運(yùn)行什么函數(shù)，以及從該函數(shù)中調(diào)用什么函數(shù)，等等。

2、 原始類(lèi)型

除了對(duì)象之外，所有的類(lèi)型都定義了不可變的值(也就是說(shuō)，不能改變的值)。例如(與C語(yǔ)言不同)，字符串是不可變的。我們把這些類(lèi)型的值稱(chēng)為 "原始值"。

3、 值類(lèi)型和引用類(lèi)型

被分配了一個(gè)非原始值的變量被賦予了一個(gè)對(duì)該值的引用。該引用指向該對(duì)象在內(nèi)存中的位置。變量實(shí)際上并不包含該值。

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

類(lèi)型強(qiáng)制是指當(dāng)運(yùn)算符的操作數(shù)為不同類(lèi)型時(shí)，其中一個(gè)操作數(shù)將被轉(zhuǎn)換為另一個(gè)操作數(shù)類(lèi)型的 "等價(jià) "值。

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

5、 == vs === vs typeof

JavaScript有兩種視覺(jué)上相似但又非常不同的方法來(lái)測(cè)試相等性。你可以用 == 或 == 來(lái)測(cè)試相等性。

6、 函數(shù)作用域，塊作用域和詞法作用域

1: 函數(shù)作用域 2：塊作用域 3：記法作用域。

7、 表達(dá)式與聲明式

進(jìn)行這種區(qū)分很重要，因?yàn)楸磉_(dá)式可以像聲明式一樣行動(dòng)，這就是為什么我們也有表達(dá)式語(yǔ)句。然而，另一方面，聲明式不能像表達(dá)式那樣行動(dòng)。

8、 IIFE，模塊和命名空間

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

9、 消息隊(duì)列和事件循環(huán)

"JavaScript是如何做到異步和單線程的?" 簡(jiǎn)短的回答是，JavaScript語(yǔ)言是單線程的，異步行為不是JavaScript語(yǔ)言本身的一部分，而是建立在瀏覽器(或編程環(huán)境)中的核心JavaScript語(yǔ)言之上，并通過(guò)瀏覽器的API訪問(wèn)。

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

10、 setTimeout, setInterval 和 requestAnimationFrame

我們希望不要黎曼執(zhí)行一個(gè)函數(shù)，而是在以后的某個(gè)時(shí)間執(zhí)行。這就是所謂的 "調(diào)度調(diào)用"。

參考：https://javascript.info/settimeout-setinterval。

11、 JavaScript引擎

為Web編寫(xiě)代碼有時(shí)感覺(jué)有點(diǎn)神奇，因?yàn)殚_(kāi)發(fā)人員編寫(xiě)了一系列字符，這些字符在瀏覽器中變成了具體的圖像、文字和動(dòng)作。理解這項(xiàng)技術(shù)可以幫助開(kāi)發(fā)人員更好地調(diào)整他們作為程序員的技能。

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

12、 按位運(yùn)算符，類(lèi)型數(shù)組和數(shù)組緩沖區(qū)

從技術(shù)上來(lái)說(shuō)，對(duì)于計(jì)算機(jī)來(lái)說(shuō)，所有東西都是1和0。它不使用數(shù)字、字符或字符串，它只使用二進(jìn)制數(shù)字(位)。簡(jiǎn)單解釋主濁，所有東西都以二進(jìn)制形式存儲(chǔ)。然后計(jì)算機(jī)使用諸如UTF-8之類(lèi)的編碼將保存的位組合映射到字符、數(shù)字或不同的符號(hào)(ELI5版本)。

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

13、 DOM和布局樹(shù)

文檔對(duì)象模型(Document Object Model)，通常被稱(chēng)為DOM，是使網(wǎng)站具有交互性的重要組成部分。它是一種允許編程語(yǔ)言操作網(wǎng)站內(nèi)容、結(jié)構(gòu)和風(fēng)格的界面。JavaScript是連接到互聯(lián)網(wǎng)瀏覽器中的DOM的客戶端腳本語(yǔ)言。

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

14、 工廠和類(lèi)

JavaScript是一種基于原型的語(yǔ)言，意味著對(duì)象的屬性和方法可以通過(guò)具有克隆和擴(kuò)展能力的通用對(duì)象來(lái)共享。這被稱(chēng)為原型繼承，與類(lèi)繼承不同。

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

15、 this, call, apply 和 bind

這些函數(shù)對(duì)每個(gè)JavaScript開(kāi)發(fā)者來(lái)說(shuō)都非常重要，幾乎每個(gè)JavaScript庫(kù)或框架都會(huì)用到。

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

16、 new, Constructor, instanceof 和 Instances

每個(gè)JavaScript對(duì)象都有一個(gè)原型。JavaScript中的所有對(duì)象都從其原型繼承其方法和屬性。

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

17、 原型繼承和原型鏈

對(duì)于有基于類(lèi)的語(yǔ)言(如Java或C++)經(jīng)驗(yàn)的開(kāi)發(fā)者來(lái)說(shuō)，JavaScript有點(diǎn)令人困惑，因?yàn)樗莿?dòng)態(tài)的，本身不提供類(lèi)的實(shí)現(xiàn)(ES2015中引入了 class的關(guān)鍵字，但只是語(yǔ)法糖，JavaScript仍然是基于原型的)。

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

18、 Object.create 和 Object.assign

Object.create 方法是在JavaScript中創(chuàng)建一個(gè)新對(duì)象的方法之一。

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

19、 map, reduce, filter

即使你不知道函數(shù)式編程是什么，你也可能一直在使用map、filter和reduce，因?yàn)樗鼈兎浅Ｓ杏?，可以讓你?xiě)出更整潔的邏輯，從而讓你的代碼不那么糟糕。

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

20、純函數(shù)、副作用、狀態(tài)突變和事件傳播

我們的許多bug都源于與IO相關(guān)的、數(shù)據(jù)突變的、產(chǎn)生副作用的代碼。這些問(wèn)題在我們的代碼庫(kù)中隨處可見(jiàn)--從接受用戶輸入、通過(guò)http調(diào)用接收一個(gè)意外的響應(yīng)，或向文件系統(tǒng)寫(xiě)入等。是一個(gè)殘酷的現(xiàn)實(shí)，所以我們也要正確的對(duì)待并解決它。

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

21、閉包

閉包是將函數(shù)與對(duì)其周?chē)鸂顟B(tài)(詞法環(huán)境)的引用捆綁在一起的組合。換句話說(shuō)，閉包允許我們從內(nèi)部函數(shù)訪問(wèn)外部函數(shù)的作用域。在JavaScript中，閉包在每次創(chuàng)建函數(shù)時(shí)創(chuàng)建。

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

22、高階函數(shù)

JavaScript可以接受高階函數(shù)。這種處理高階函數(shù)的能力，以及其他特點(diǎn)，使JavaScript成為非常適合函數(shù)式編程的編程語(yǔ)言之一。

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

23、 遞歸

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

24、 收集器和生成器

生成器對(duì)象是由生成器函數(shù)返回的，它同時(shí)符合可迭代協(xié)議和迭代器協(xié)議。

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

25、 Promise

Promise對(duì)象表示一個(gè)異步操作的最終完成(或失敗)及其結(jié)果值。

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

26、 async/await

參考：https://javascript.info/async-await。

27、 數(shù)據(jù)結(jié)構(gòu)

Javascript每天都在不斷發(fā)展。隨著React、Angular、Vue、NodeJS、Electron、React Native等框架和平臺(tái)的迅速發(fā)展，在大規(guī)模應(yīng)用中使用javascript已經(jīng)變得相當(dāng)普遍。

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

28、 昂貴的運(yùn)算和大O符號(hào)

"什么是大O符號(hào)?"這是一個(gè)非常常見(jiàn)的開(kāi)發(fā)人員的工作面試問(wèn)題。簡(jiǎn)而言之，它是一種數(shù)學(xué)表達(dá)方式，即根據(jù)輸入的時(shí)間長(zhǎng)短，一個(gè)算法需要運(yùn)行多長(zhǎng)時(shí)間，通常說(shuō)的是最壞情況。

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

29、 算法

在數(shù)學(xué)和計(jì)算機(jī)科學(xué)中，算法是一個(gè)定義明確的指令的有限序列，通常用于解決一類(lèi)特定問(wèn)題或進(jìn)行計(jì)算。

30、 繼承、多態(tài)性和代碼重用

類(lèi)的繼承是一個(gè)類(lèi)擴(kuò)展另一個(gè)類(lèi)的方式，因此我們可以在現(xiàn)有的基礎(chǔ)上創(chuàng)建新的功能。

參考：https://javascript.info/class-inheritance。

31、 設(shè)計(jì)模式

每個(gè)開(kāi)發(fā)人員都在努力編寫(xiě)可維護(hù)、可閱讀和可重用的代碼。當(dāng)應(yīng)用程序變得越來(lái)越大時(shí)，代碼的結(jié)構(gòu)化變得更加重要。設(shè)計(jì)模式被證明是解決這一挑戰(zhàn)的關(guān)鍵--為特定情況下的共同問(wèn)題提供一個(gè)組織結(jié)構(gòu)。

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

32、 局部應(yīng)用、柯里化、組成和管道

函數(shù)組合是一種將多個(gè)簡(jiǎn)單的函數(shù)組合起來(lái)以建立一個(gè)更復(fù)雜的函數(shù)的機(jī)制。

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

33、 簡(jiǎn)潔代碼

編寫(xiě)干凈的、可理解的、可維護(hù)的代碼是每個(gè)開(kāi)發(fā)者都要掌握的一項(xiàng)技能。

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

如果你覺(jué)得這份清單很有用，別忘了把它收藏起來(lái)，并關(guān)注我以獲得更多類(lèi)似的內(nèi)容。

作者：Ahmad Shadeed 譯者：前端小智 。來(lái)源：dev https://dev.to/eludadev/33-javascript-concepts-every-beginner-should-know-with-tutorials-4kao。