Javascript 中你最應(yīng)該知道的 33 個(gè)概念

你覺得自己對(duì)javaScript了解多少?你可能知道如何編寫函數(shù)，理解簡(jiǎn)單的算法，甚至可以編寫類。但是你知道類型化數(shù)組是什么嗎?

你現(xiàn)在不需要知道所有這些概念，但你最終會(huì)在以后的職業(yè)生涯中需要它們。這就是為什么我建議把這個(gè)列表起來(lái)，因?yàn)槟憧赡軙?huì)遇到其中一個(gè)，然后你會(huì)需要一個(gè)教程來(lái)完全理解它。

我們歸納了 33 個(gè)前端開發(fā)者需要知道的 javaScript 核心概念。希望當(dāng)你不理解這些概念的時(shí)候能去看看它們?cè)敿?xì)的介紹(我們也在每個(gè)概念的末尾給出了詳細(xì)的介紹地址)。

1. 調(diào)用堆棧

調(diào)用棧是一種解釋器機(jī)制(就像網(wǎng)頁(yè)瀏覽器中的JavaScript解釋器)，用來(lái)跟蹤它在調(diào)用多個(gè)函數(shù)的腳本中的位置——當(dāng)前正在運(yùn)行的函數(shù)以及在該函數(shù)中調(diào)用了哪些函數(shù)等等。

詳細(xì): https://developer.mozilla.org/zh-CN/docs/Glossary/Call_stack

2. 原始值

除了對(duì)象之外，所有類型都定義了不可變值(即不能更改的值)。例如(與C不同)，string是不可變的。我們將這些類型的值稱為“基本值”。

詳細(xì): https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures#原始值

3.值類型和引用類型

賦值為非原始值的變量將被賦予該值的引用。該引用指向?qū)ο笤趦?nèi)存中的位置。變量實(shí)際上并不包含值。

詳細(xì)：https://juejin.cn/post/6844904198484541454

4. 類型轉(zhuǎn)換

類型強(qiáng)制意味著，當(dāng)操作符的操作數(shù)是不同類型時(shí)，其中一個(gè)操作數(shù)將被轉(zhuǎn)換為另一個(gè)操作數(shù)類型的“等效”值。

詳細(xì)： https://stackoverflow.com/questions/19915688/what-exactly-is-type-coercion-in-javascript

5. 雙等號(hào)（==）和三等號(hào)(===)

JavaScript有兩種看起來(lái)相似但又非常不同的方法來(lái)測(cè)試是否相等。可以用==或===來(lái)測(cè)試是否相等。

詳細(xì)：https://segmentfault.com/a/1190000013267129

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

在 ES5 及之前版本，JavaScript 只擁有函數(shù)作用域，沒有塊作用域（with和 try...catch 除外）。在 ES6 中，JS 引入了塊作用域，{ }內(nèi)是單獨(dú)的一個(gè)作用域。采用 let或者 const 聲明的變量會(huì)挾持所在塊的作用域，也就是說(shuō)，這聲明關(guān)鍵字會(huì)將變量綁定到所在的任意作用域中（通常是 {...}內(nèi)部）。

詳細(xì)：https://segmentfault.com/a/1190000008440514

7. 表達(dá)式和語(yǔ)句

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

詳細(xì)：cnblogs.com/1549983239yifeng/p/14598951.html

8. IIFE，模塊和命名空間

一種常用的函數(shù)編碼模式有一個(gè)奇特的名字:立即調(diào)用函數(shù)表達(dá)式。或者更廣為人知的IIFE，發(fā)音為“iffy”。

詳細(xì)：https://developer.mozilla.org/zh-CN/docs/Glossary/IIFE

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

“異步JavaScript和單線程?”答案是JavaScript語(yǔ)言線程和異步行為不是JavaScript語(yǔ)言本身的一部分,而是建立在核心的瀏覽器中的JavaScript語(yǔ)言(或編程環(huán)境)和通過瀏覽器訪問api。

詳細(xì)：https://www.bbsmax.com/A/kjdwajrGJN/

10. setTimeout, setInterval和requestAnimationFrame

我們可能決定不立即執(zhí)行某個(gè)函數(shù)，而是在以后的某個(gè)時(shí)間執(zhí)行。這就是所謂的“電話預(yù)約”。

詳細(xì)：https://www.cnblogs.com/ling-nl/p/14245218.html

11. Javascript 引擎

為Web編寫代碼有時(shí)感覺有點(diǎn)神奇，因?yàn)殚_發(fā)人員編寫了一系列字符，就像魔術(shù)一樣，這些字符在瀏覽器中變成了具體的圖像、文字和動(dòng)作。理解這種技術(shù)可以幫助開發(fā)人員更好地理解Javascript的運(yùn)行機(jī)制。

JavaScript引擎的組成部分有哪些?

編譯器。主要工作是將源代碼編譯成抽象語(yǔ)法樹，然后在某些引擎中還包含將抽象語(yǔ)法樹轉(zhuǎn)換成字節(jié)碼。

解釋器。在某些引擎中，解釋器主要是接受字節(jié)碼，解釋執(zhí)行這個(gè)字節(jié)碼，然后也依賴來(lái)及回收機(jī)制等。

JIT工具。一個(gè)能夠JIT的工具，將字節(jié)碼或者抽象語(yǔ)法樹轉(zhuǎn)換成本地代碼，當(dāng)然它也需要依賴?yán)斡浝厥掌骱头治龉ぞ?profiler)。它們負(fù)責(zé)垃圾回收和收集引擎中的信息，幫助改善引擎的性能和功效。

詳細(xì)：https://www.cnblogs.com/onepixel/p/5090799.html

12. 位操作符，類型數(shù)組和數(shù)組緩沖區(qū)

對(duì)于計(jì)算機(jī)來(lái)說(shuō)，所有的都是1和0。它不操作數(shù)字、字符或字符串，它只使用二進(jìn)制數(shù)字(位)。簡(jiǎn)而言之，一切都是以二進(jìn)制形式存儲(chǔ)的。然后計(jì)算機(jī)使用諸如UTF-8這樣的編碼將保存的比特組合映射為字符、數(shù)字或不同的符號(hào)(ELI5版本)。

詳細(xì)：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Expressions_and_Operators#位運(yùn)算符

13. DOM 和 渲染樹

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

詳細(xì)：https://developer.mozilla.org/zh-CN/docs/Web/Performance/How_browsers_work

14. 原型繼承

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

詳細(xì)：https://developer.mozilla.org/zh-CN/docs/learn/javascript/objects/classes_in_javascript#原型式的繼承

15. this, call, apply and bind

這些函數(shù)對(duì)每個(gè)JavaScript開發(fā)人員都非常重要，幾乎在每個(gè)JavaScript庫(kù)或框架中都使用。

詳細(xì)：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this

16. new、Constructor、instanceof和Instances

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

詳細(xì)：https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/Object_prototypes

17. 原型繼承和原型鏈

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

詳細(xì)：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

18. Object.create 和 Object.assign

對(duì)象。create方法是JavaScript中創(chuàng)建新對(duì)象的方法之一。

詳細(xì)：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

19. map, reduce 和 filter

即使你不知道函數(shù)式編程是什么，你也可能使用過map、filter和reduce，因?yàn)樗鼈兎浅Ｓ杏茫梢宰屇憔帉懜逦倪壿嫞瑥亩屇愕拇a不那么糟糕。

20. 純函數(shù)，副作用，狀態(tài)突變和事件冒泡

我們的很多bug都是源于IO相關(guān)的，數(shù)據(jù)突變，副作用。這些代碼遍布我們的代碼庫(kù)——比如接受用戶輸入，通過http調(diào)用接收意外響應(yīng)，或者寫入文件系統(tǒng)。不幸的是，這是一個(gè)殘酷的現(xiàn)實(shí)，我們應(yīng)該習(xí)慣處理這些bug。

詳細(xì)：https://segmentfault.com/a/1190000018524543

21. 閉包

閉包是將一個(gè)函數(shù)捆綁在一起(封裝在一起)，并引用其周圍的狀態(tài)(詞法環(huán)境)的組合。換句話說(shuō)，閉包使您能夠從內(nèi)部函數(shù)訪問外部函數(shù)的作用域。在JavaScript中，閉包是在每次創(chuàng)建函數(shù)時(shí)創(chuàng)建的。

詳細(xì)：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures

22. 高階函數(shù)

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

高階函數(shù)是至少滿足下面一個(gè)條件的函數(shù)：

接收一個(gè)或多個(gè)函數(shù)作為參數(shù)。比如filter函數(shù)

返回一個(gè)函數(shù)。 比如bind函數(shù)

詳細(xì)：https://segmentfault.com/a/1190000018528025

23. 遞歸

一種函數(shù)調(diào)用自身的操作。遞歸被用于處理包含有更小的子問題的一類問題。一個(gè)遞歸函數(shù)可以接受兩個(gè)輸入?yún)?shù)：一個(gè)最終狀態(tài)（終止遞歸）或一個(gè)遞歸狀態(tài)（繼續(xù)遞歸）。

24. 集合和Generator

Generator對(duì)象由Generator函數(shù)返回，它符合可迭代對(duì)象協(xié)議和迭代器協(xié)議。

詳細(xì)：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Generator

25. Promises

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

詳細(xì)：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

26. async/await

有一種特殊的語(yǔ)法以一種更舒適的方式處理承諾，稱為“async/await”。它非常容易理解和使用。

await 操作符用于等待一個(gè)Promise 對(duì)象。它只能在異步函數(shù) async function中使用。

詳細(xì)：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/async_function

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/await

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

Javascript每天都在發(fā)展。隨著React、Angular、Vue、NodeJS、Electron、React Native等框架和平臺(tái)的快速發(fā)展，在大型應(yīng)用中使用javascript已經(jīng)變得非常普遍。

JavaScript 語(yǔ)言中內(nèi)建的數(shù)據(jù)結(jié)構(gòu)及其屬性，它們可以用來(lái)構(gòu)建其他的數(shù)據(jù)結(jié)構(gòu)。

詳細(xì)：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures

28. 時(shí)間復(fù)雜度

這是一個(gè)非常常見的面試問題。簡(jiǎn)而言之，它是算法運(yùn)行時(shí)間的數(shù)學(xué)表達(dá)式取決于輸入時(shí)間的長(zhǎng)短，通常談?wù)摰氖亲顗牡那闆r。

29. 算法

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

詳細(xì)：https://www.cnblogs.com/xinkuiwu/category/1594426.html

30. 繼承、多態(tài)和重用

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

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

每個(gè)開發(fā)人員都努力編寫可維護(hù)、可讀和可重用的代碼。隨著應(yīng)用程序變得越來(lái)越大，代碼結(jié)構(gòu)變得越來(lái)越重要。設(shè)計(jì)模式被證明是解決這一挑戰(zhàn)的關(guān)鍵——為特定環(huán)境中的常見問題提供組織結(jié)構(gòu)。

32. 柯里化

函數(shù)組合是將多個(gè)簡(jiǎn)單函數(shù)組合成一個(gè)更復(fù)雜函數(shù)的機(jī)制。

詳細(xì)：https://zhuanlan.zhihu.com/p/74585560

33. Clean Code

編寫干凈、可理解和可維護(hù)的代碼是每個(gè)開發(fā)人員都必須掌握的關(guān)鍵技能。

詳細(xì)：https://zhuanlan.zhihu.com/p/102367865

JavaScript

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。