在學(xué)習(xí)React之前，你就應(yīng)該知道的9個(gè)JavaScript 概念
JavaScript 的語言自1995 年發(fā)布以來發(fā)生了很大變化，其用途也發(fā)生了變化。該語言從一種用于 Web 的腳本語言變成了一種影響 IT 行業(yè)中許多領(lǐng)域的語言。
從技術(shù)上講，JavaScript 的語法在 ECMAScript 5 和 6 發(fā)布后發(fā)生了很大的變化。這個(gè)版本帶來了所謂的現(xiàn)代JavaScript的概念，一種充滿點(diǎn)、箭頭和類的新語法。
我很自豪能夠成為JavaScript開發(fā)人員之一，然后，必須學(xué)習(xí)現(xiàn)代 JavaScript。
當(dāng)然，舊的語法仍然有效，但是像 React 這樣的現(xiàn)代 JavaScript 庫非常強(qiáng)調(diào)使用 ES6，這樣可以充分利用現(xiàn)代JavaScript 庫。雖然，你仍然可以在沒有 ES6 的情況下使用 React。
JavaScript 和 React
如果你前往 React 的官方網(wǎng)站或任何教它的書籍或教程，你會(huì)注意到請(qǐng)求中存在 ES6 中先前的知識(shí)。
查看任何 React 代碼，你會(huì)看到新的關(guān)鍵字和符號(hào)，如let, const，箭頭，類，以及對(duì)象和數(shù)組。因此，我列出了一些你在學(xué)習(xí) React 之前必須了解的JavaScript概念。
1、變量和賦值
你可能認(rèn)為聲明變量不值一提，但它適用于JavaScript。在 ES6 之前，聲明變量的唯一方法是使用var關(guān)鍵字，這導(dǎo)致了一些問題。
使用 const 聲明變量
像常量這樣的常規(guī)東西在 JavaScript 中不存在，但現(xiàn)在有了。使用const關(guān)鍵字意味著變量的值不會(huì)改變。但是，數(shù)組、對(duì)象和其他集合并非如此。
使用const關(guān)鍵字聲明數(shù)組或?qū)ο蟛粫?huì)使其元素不可變。
用 let 聲明變量
除了不維護(hù)變量的值外，另一個(gè)在使用var關(guān)鍵字時(shí)讓 JavaScript 開發(fā)人員煩惱的問題是變量的范圍。你可以將范圍視為可以訪問變量的地方。
聲明兩個(gè)具有相同名稱的變量，一個(gè)位于 if/else 塊內(nèi)，另一個(gè)位于if/else塊外，應(yīng)該不會(huì)造成任何問題。此規(guī)則不適用于使用 var 關(guān)鍵字聲明的變量，如下所示。
如果我們更換了塊內(nèi)聲明let或者const，我們會(huì)得到別的東西，因?yàn)閘et和const范圍變量的塊。換句話說，在塊內(nèi)聲明的任何變量都只屬于該塊。
在使用 let 時(shí)，還有其他有趣的情況。僅僅將這些情況說明清楚，可能還需要寫一整篇文章。因此，讓我們?yōu)槠渌拍罟?jié)省時(shí)間和空間。
2、模板文字
在 JavaScript 中構(gòu)建 HTML 標(biāo)記時(shí)，會(huì)讓你感到不安的一件事是，你應(yīng)該將變量與用引號(hào)括起來的字符串連接起來。兩三行 HTML 可能沒問題，但想象一下 20行呢？
你將不得不處理關(guān)閉和打開引號(hào)，以及許多運(yùn)算符而感到頭痛。PHP 開發(fā)人員不必處理這個(gè)問題，因?yàn)樗麄兛梢院翢o負(fù)擔(dān)地在兩個(gè)雙引號(hào)內(nèi)寫入變量。
ES6 通過引入模板字面量將這份禮物送給了 JavaScript 開發(fā)人員。這取決于兩件事：首先，模板文字被反引號(hào) (") 包圍。第二：里面的變量用美元符號(hào)“$”和花括號(hào){}括起來，像${element}這樣。
3、箭頭函數(shù)
用 JavaScript 編寫函數(shù)需要大量工作。這對(duì)你來說可能聽起來很奇怪，因?yàn)槟阋恢痹谧鲞@項(xiàng)工作，甚至不知道。想象一下我只用一個(gè)箭頭來寫一個(gè)函數(shù)？就像這個(gè)“=>”。
我們把關(guān)鍵字“function”和“return”、括號(hào)“()”、花括號(hào){}、箭頭和“=>”替換了，你看到這個(gè)箭頭給我們減輕了多少負(fù)擔(dān)嗎？但是，在使用它時(shí)需要遵循一些規(guī)則。
首先，箭頭函數(shù)必須作為匿名函數(shù)使用，所以應(yīng)該賦值給一個(gè)變量，如下圖：
你可能會(huì)注意到我們沒有省略括號(hào)。箭頭函數(shù)的其他規(guī)則之一是，當(dāng)你有一個(gè)參數(shù)時(shí)，你必須使用括號(hào)。此外，如果函數(shù)體包含多個(gè)指令，則必須將函數(shù)體包裹在花括號(hào) {} 中。
當(dāng)我們將箭頭函數(shù)與數(shù)組方法一起使用時(shí)，它們的威力就會(huì)大放異彩。你會(huì)在數(shù)組部分看到它。
4、ES6 類
知道 JavaScript 沒有類讓我震驚。我非?？释麑W(xué)習(xí) OOP（面向?qū)ο缶幊蹋┓椒ú⒘私馊绾问褂妙悺５?，?ES6 之前，沒有類。因此，我通過定期創(chuàng)建對(duì)象或使用構(gòu)造函數(shù)來學(xué)習(xí) OOP。
現(xiàn)在，該語言擁有自己的類系統(tǒng)，如果你有C++、PHP、VB.net 等語言基礎(chǔ)的話，這個(gè)類系統(tǒng)對(duì)你來說，它看起來也會(huì)很熟悉。什么都沒有真正改變。你學(xué)到的關(guān)于對(duì)象和原型繼承的一切都仍然是一樣的，除了我們有了一種使用類語法來聲明對(duì)象結(jié)構(gòu)的新方法。
在上面的例子中，我們創(chuàng)建了一個(gè) House 類，它包含門、窗兩個(gè)屬性，以及一個(gè)顯示這些屬性值的方法。之后，我們創(chuàng)建了一個(gè) House 類的實(shí)例。
任何想要學(xué)習(xí) React 的人都必須了解類。就我個(gè)人而言，第一次使用 React 時(shí)，我遇到了類，因?yàn)槟阃ǔ?huì)通過擴(kuò)展現(xiàn)有類來創(chuàng)建 React 組件。
雖然有一種通過函數(shù)在 React 中創(chuàng)建組件的新方法，但還是建議 React 開發(fā)者使用它。這比創(chuàng)建基于類的組件要容易得多。
5、數(shù)組、對(duì)象和其他數(shù)據(jù)集合
數(shù)組
數(shù)組結(jié)構(gòu)沒有改變。改變的是操作數(shù)組中每個(gè)項(xiàng)目的數(shù)組方法的數(shù)量。例如，我們有：map()、filter()、find()、forEach()、reduce()、match()。每個(gè)都有一個(gè)獨(dú)特的用例。
你會(huì)在 React 中經(jīng)常遇到 map 方法，實(shí)際上是在將數(shù)組中的每個(gè)項(xiàng)目映射到 <li> 元素時(shí)。map 方法將使你能夠遍歷數(shù)組中的每個(gè)項(xiàng)目并更改其形狀。例如，讓我們將現(xiàn)有數(shù)組中的每個(gè)元素乘以兩個(gè)。
正如你在上面看到的，使用 map 方法遍歷數(shù)組并更改其項(xiàng)比使用 for 循環(huán)的舊方法要容易得多。如果仔細(xì)觀察，你會(huì)發(fā)現(xiàn)我們使用了箭頭函數(shù)作為 map 方法的回調(diào)。箭頭函數(shù)在與數(shù)組一起使用時(shí)發(fā)揮最佳作用。
對(duì)象
對(duì)象現(xiàn)在有一些很棒的方法，可以消除處理對(duì)象結(jié)構(gòu)的所有負(fù)擔(dān)。例如，我們有：
Object.values()：此方法將返回一個(gè)包含對(duì)象中每個(gè)值的數(shù)組。
Object.keys()：它將返回一個(gè)數(shù)組，其中包含對(duì)象中每個(gè)屬性的名稱。
Object.assign()：這個(gè)方法非常強(qiáng)大，它可以讓你用另一個(gè)對(duì)象的屬性更新一個(gè)對(duì)象，同時(shí)保留舊的屬性。
其他資料收集
在 ES6 之前，關(guān)于數(shù)據(jù)收集的討論僅限于對(duì)象和數(shù)組?，F(xiàn)在這個(gè)名單正在增長。我們有 Map（不要將它與 map() 方法混淆）、Set、WeakMap 和 WeakSet。你不會(huì)經(jīng)常使用這些集合，但了解它們是很好的。
6、解構(gòu)對(duì)象和數(shù)組
解構(gòu)對(duì)象
大多數(shù)時(shí)候，我們使用構(gòu)造函數(shù)來創(chuàng)建對(duì)象并將數(shù)據(jù)放入其中。如果沒有使用對(duì)象屬性或數(shù)組表示法的傳統(tǒng)方式，如何從對(duì)象獲取數(shù)據(jù)呢？在這種情況下，我們將使用解構(gòu)賦值。讓我們看看它是如何工作的。
正如你在上面的示例中看到的，我們創(chuàng)建了一個(gè)包含四個(gè)屬性的對(duì)象，然后我們使用解構(gòu)提取了顏色和內(nèi)存屬性的值。
為了使解構(gòu)賦值起作用，你要為其賦值的變量的名稱應(yīng)該與對(duì)象中所需屬性的名稱相匹配，換句話說，這樣的賦值：const {size}= phone;將給你一個(gè)未定義的值。
解構(gòu)數(shù)組
對(duì)于數(shù)組，語法保持不變。幸運(yùn)的是，我們不需要知道任何東西的名稱，因?yàn)閿?shù)組不包含任何鍵。你只需要尊重?cái)?shù)組中每個(gè)項(xiàng)目的順序，這樣你就可以獲得所需的值。
在上面的例子中，我們不能在沒有獲得第一個(gè)值的情況下獲得數(shù)組中第二個(gè)項(xiàng)目的值。如果我們只需要第四個(gè)值，我們將不得不創(chuàng)建三個(gè)不必要的變量。幸運(yùn)的是，我們可以使用逗號(hào)代替如下所示的編寫變量名稱。
7、默認(rèn)參數(shù)
當(dāng)涉及到一個(gè)函數(shù)時(shí)，會(huì)有一些情況，該函數(shù)應(yīng)該得到三個(gè)參數(shù)，但它只收到了兩個(gè)參數(shù)。在正常情況下，這會(huì)拋出錯(cuò)誤或未定義，但使用默認(rèn)參數(shù)時(shí)，將使用默認(rèn)值。
8、Spread 和 Rest 運(yùn)算符
擴(kuò)展運(yùn)算符
正如我之前提到的，現(xiàn)代 JavaScript 的語法充滿了點(diǎn)。為什么？嗯，那是因?yàn)閿U(kuò)展運(yùn)算符。它被廣泛用于變量。因此，你可能會(huì)在每個(gè) ES6+ 或現(xiàn)代 JavaScript 文件中看到它。
你將使用展開運(yùn)算符將數(shù)組轉(zhuǎn)換為列表。換句話說，你將傳播數(shù)組的項(xiàng)目。此外，你還可以將它與其他集合（如 Map）以及函數(shù)一起使用。讓我們看看它是如何工作的。
在上面的情況下，我們通過使用擴(kuò)展運(yùn)算符將車輛數(shù)組與項(xiàng)目數(shù)組連接起來。如果你試圖找出項(xiàng)“car”的索引，而不使用擴(kuò)展運(yùn)算符，你將得到 -1，簡而言之，它不存在。
我們也可以將擴(kuò)展運(yùn)算符與解構(gòu)賦值一起使用。
擴(kuò)展運(yùn)算符更有趣的是，我們可以使用它來操作數(shù)組中的值，而無需改變?cè)紨?shù)組。
休息運(yùn)算符
當(dāng)我們使用 rest 運(yùn)算符時(shí)，展開運(yùn)算符的三點(diǎn)語法將為我們服務(wù)，當(dāng)我們不知道函數(shù)應(yīng)該獲得多少個(gè)參數(shù)時(shí)，這個(gè)語法會(huì)起作用。因此，我們將僅使用展開運(yùn)算符語法：三個(gè)點(diǎn)后跟參數(shù)名稱。
9、 模塊
模塊，一個(gè) JavaScript 文件，它導(dǎo)出其代碼供另一個(gè)文件使用。我們知道，當(dāng)你導(dǎo)出某些東西時(shí)，你應(yīng)該導(dǎo)入它。導(dǎo)出和導(dǎo)入數(shù)據(jù)的語法會(huì)有所不同，這取決于你的偏好。對(duì)于導(dǎo)出數(shù)據(jù)，你可以使用命名導(dǎo)出或默認(rèn)導(dǎo)出。
默認(rèn)導(dǎo)出
上面，我們創(chuàng)建了一個(gè)模塊，用于導(dǎo)出名為 Junior 的類。這個(gè)類有4個(gè)屬性。第一個(gè)屬性將在使用構(gòu)造函數(shù)創(chuàng)建實(shí)例時(shí)獲取它們的值，最后一個(gè)屬性將具有默認(rèn)值。這里重要的是我們使用了 export 和 default 關(guān)鍵字來導(dǎo)出這個(gè)類。
使用默認(rèn)關(guān)鍵字（默認(rèn)導(dǎo)出）導(dǎo)出模塊數(shù)據(jù)意味著：無論我們使用哪個(gè)名稱導(dǎo)入數(shù)據(jù)，都會(huì)導(dǎo)入數(shù)據(jù)。讓我們?cè)谙旅娴氖纠姓故具@一點(diǎn)。
請(qǐng)注意我們?nèi)绾螐膒rototype.js 文件中以不同的名稱導(dǎo)入該類，并且這不會(huì)導(dǎo)致任何錯(cuò)誤。
命名導(dǎo)出
看起來，命名導(dǎo)出將根據(jù)其名稱導(dǎo)出數(shù)據(jù)。只需要去掉default關(guān)鍵字，導(dǎo)入的時(shí)候記住數(shù)據(jù)的名字，用大括號(hào)把數(shù)據(jù)包起來。
你可以根據(jù)要導(dǎo)出的內(nèi)容和導(dǎo)出方式使用導(dǎo)出和導(dǎo)入語句。順便說一下，這里涉及到對(duì)象解構(gòu)。
最后的話
我試圖向你概述在嘗試學(xué)習(xí) React 甚至 Angular 時(shí)可能遇到的每個(gè)概念。遇到這些概念是不可避免的。你必須加強(qiáng)和更新有關(guān) JavaScript 的語法知識(shí)。
對(duì)于每個(gè)概念，我承認(rèn)我僅舉一個(gè)例子就只觸及了皮毛。所以，我為你提供更多的資源供你學(xué)習(xí)，希望對(duì)你有所幫助。
資源如下：
1、變量和賦值：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements#declarations
2、模板文字：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
3、箭頭函數(shù)：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
4、ES6 類：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class
5、數(shù)組、對(duì)象和其他數(shù)據(jù)集合。
數(shù)組：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
對(duì)象：https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics
其他數(shù)據(jù)集合：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects#keyed_collections
6、解構(gòu)對(duì)象和數(shù)組：https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/
7、默認(rèn)參數(shù)：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters
8、Spread and Rest 運(yùn)算符：https://javascript.info/rest-parameters-spread
9 、模塊：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
謝謝你的時(shí)間，感謝閱讀，祝編程愉快！
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
