英文 | https://javascript.plainenglish.io/9-javascript-concepts-you-should-know-before-learning-react-316069f54ce4
翻譯 | 楊小二
JavaScript 的語言自1995 年釋出以來發生了很大變化，其用途也發生了變化。該語言從一種用于 Web 的腳本語言變成了一種影響 IT 行業中許多領域的語言。
從技術上講，JavaScript 的文法在 ECMAScript 5 和 6 釋出後發生了很大的變化。這個版本帶來了所謂的現代JavaScript的概念，一種充滿點、箭頭和類的新文法。
我很自豪能夠成為JavaScript開發人員之一，然後，必須學習現代 JavaScript。
當然，舊的文法仍然有效，但是像 React 這樣的現代 JavaScript 庫非常強調使用 ES6，這樣可以充分利用現代JavaScript 庫。雖然，你仍然可以在沒有 ES6 的情況下使用 React。
JavaScript 和 React
如果你前往 React 的官方網站或任何教它的書籍或教程，你會注意到請求中存在 ES6 中先前的知識。
檢視任何 React 代碼，你會看到新的關鍵字和符号，如let, const，箭頭，類，以及對象和數組。是以，我列出了一些你在學習 React 之前必須了解的JavaScript概念。
1、變量和指派
你可能認為聲明變量不值一提，但它适用于JavaScript。在 ES6 之前，聲明變量的唯一方法是使用var關鍵字，這導緻了一些問題。
使用 const 聲明變量
像常量這樣的正常東西在 JavaScript 中不存在，但現在有了。使用const關鍵字意味着變量的值不會改變。但是，數組、對象和其他集合并非如此。
使用const關鍵字聲明數組或對象不會使其元素不可變。
用 let 聲明變量
除了不維護變量的值外，另一個在使用var關鍵字時讓 JavaScript 開發人員煩惱的問題是變量的範圍。你可以将範圍視為可以通路變量的地方。
聲明兩個具有相同名稱的變量，一個位于 if/else 塊内，另一個位于if/else塊外，應該不會造成任何問題。此規則不适用于使用 var 關鍵字聲明的變量，如下所示。
如果我們更換了塊内聲明let或者const，我們會得到别的東西，因為let和const範圍變量的塊。換句話說，在塊内聲明的任何變量都隻屬于該塊。
在使用 let 時，還有其他有趣的情況。僅僅将這些情況說明清楚，可能還需要寫一整篇文章。是以，讓我們為其他概念節省時間和空間。
2、模闆文字
在 JavaScript 中建構 HTML 标記時，會讓你感到不安的一件事是，你應該将變量與用引号括起來的字元串連接配接起來。兩三行 HTML 可能沒問題，但想象一下 20行呢？
你将不得不處理關閉和打開引号，以及許多運算符而感到頭痛。PHP 開發人員不必處理這個問題，因為他們可以毫無負擔地在兩個雙引号内寫入變量。
ES6 通過引入模闆字面量将這份禮物送給了 JavaScript 開發人員。這取決于兩件事：首先，模闆文字被反引号 (") 包圍。第二：裡面的變量用美元符号“$”和花括号{}括起來，像${element}這樣。
3、箭頭函數
用 JavaScript 編寫函數需要大量工作。這對你來說可能聽起來很奇怪，因為你一直在做這項工作，甚至不知道。想象一下我隻用一個箭頭來寫一個函數？就像這個“=>”。
我們把關鍵字“function”和“return”、括号“()”、花括号{}、箭頭和“=>”替換了，你看到這個箭頭給我們減輕了多少負擔嗎？但是，在使用它時需要遵循一些規則。
首先，箭頭函數必須作為匿名函數使用，是以應該指派給一個變量，如下圖：
你可能會注意到我們沒有省略括号。箭頭函數的其他規則之一是，當你有一個參數時，你必須使用括号。此外，如果函數體包含多個指令，則必須将函數體包裹在花括号 {} 中。
當我們将箭頭函數與數組方法一起使用時，它們的威力就會大放異彩。你會在數組部分看到它。
4、ES6 類
知道 JavaScript 沒有類讓我震驚。我非常渴望學習 OOP（面向對象程式設計）方法并了解如何使用類。但是，在 ES6 之前，沒有類。是以，我通過定期建立對象或使用構造函數來學習 OOP。
現在，該語言擁有自己的類系統，如果你有C++、PHP、VB.net 等語言基礎的話，這個類系統對你來說，它看起來也會很熟悉。什麼都沒有真正改變。你學到的關于對象和原型繼承的一切都仍然是一樣的，除了我們有了一種使用類文法來聲明對象結構的新方法。
在上面的例子中，我們建立了一個 House 類，它包含門、窗兩個屬性，以及一個顯示這些屬性值的方法。之後，我們建立了一個 House 類的執行個體。
任何想要學習 React 的人都必須了解類。就我個人而言，第一次使用 React 時，我遇到了類，因為你通常會通過擴充現有類來建立 React 元件。
雖然有一種通過函數在 React 中建立元件的新方法，但還是建議 React 開發者使用它。這比建立基于類的元件要容易得多。
5、數組、對象和其他資料集合
數組
數組結構沒有改變。改變的是操作數組中每個項目的數組方法的數量。例如，我們有：map()、filter()、find()、forEach()、reduce()、match()。每個都有一個獨特的用例。
你會在 React 中經常遇到 map 方法，實際上是在将數組中的每個項目映射到 <li> 元素時。map 方法将使你能夠周遊數組中的每個項目并更改其形狀。例如，讓我們将現有數組中的每個元素乘以兩個。
正如你在上面看到的，使用 map 方法周遊數組并更改其項比使用 for 循環的舊方法要容易得多。如果仔細觀察，你會發現我們使用了箭頭函數作為 map 方法的回調。箭頭函數在與數組一起使用時發揮最佳作用。
對象
對象現在有一些很棒的方法，可以消除處理對象結構的所有負擔。例如，我們有：
Object.values()：此方法将傳回一個包含對象中每個值的數組。
Object.keys()：它将傳回一個數組，其中包含對象中每個屬性的名稱。
Object.assign()：這個方法非常強大，它可以讓你用另一個對象的屬性更新一個對象，同時保留舊的屬性。
其他資料收集
在 ES6 之前，關于資料收集的讨論僅限于對象和數組。現在這個名單正在增長。我們有 Map（不要将它與 map() 方法混淆）、Set、WeakMap 和 WeakSet。你不會經常使用這些集合，但了解它們是很好的。
6、解構對象和數組
解構對象
大多數時候，我們使用構造函數來建立對象并将資料放入其中。如果沒有使用對象屬性或數組表示法的傳統方式，如何從對象擷取資料呢？在這種情況下，我們将使用解構指派。讓我們看看它是如何工作的。
正如你在上面的示例中看到的，我們建立了一個包含四個屬性的對象，然後我們使用解構提取了顔色和記憶體屬性的值。
為了使解構指派起作用，你要為其指派的變量的名稱應該與對象中所需屬性的名稱相比對，換句話說，這樣的指派：const {size}= phone;将給你一個未定義的值。
解構數組
對于數組，文法保持不變。幸運的是，我們不需要知道任何東西的名稱，因為數組不包含任何鍵。你隻需要尊重數組中每個項目的順序，這樣你就可以獲得所需的值。
在上面的例子中，我們不能在沒有獲得第一個值的情況下獲得數組中第二個項目的值。如果我們隻需要第四個值，我們将不得不建立三個不必要的變量。幸運的是，我們可以使用逗号代替如下所示的編寫變量名稱。
7、預設參數
當涉及到一個函數時，會有一些情況，該函數應該得到三個參數，但它隻收到了兩個參數。在正常情況下，這會抛出錯誤或未定義，但使用預設參數時，将使用預設值。
8、Spread 和 Rest 運算符
擴充運算符
正如我之前提到的，現代 JavaScript 的文法充滿了點。為什麼？嗯，那是因為擴充運算符。它被廣泛用于變量。是以，你可能會在每個 ES6+ 或現代 JavaScript 檔案中看到它。
你将使用展開運算符将數組轉換為清單。換句話說，你将傳播數組的項目。此外，你還可以将它與其他集合（如 Map）以及函數一起使用。讓我們看看它是如何工作的。
在上面的情況下，我們通過使用擴充運算符将車輛數組與項目數組連接配接起來。如果你試圖找出項“car”的索引，而不使用擴充運算符，你将得到 -1，簡而言之，它不存在。
我們也可以将擴充運算符與解構指派一起使用。
擴充運算符更有趣的是，我們可以使用它來操作數組中的值，而無需改變原始數組。
休息運算符
當我們使用 rest 運算符時，展開運算符的三點文法将為我們服務，當我們不知道函數應該獲得多少個參數時，這個文法會起作用。是以，我們将僅使用展開運算符文法：三個點後跟參數名稱。
9、 子產品
子產品，一個 JavaScript 檔案，它導出其代碼供另一個檔案使用。我們知道，當你導出某些東西時，你應該導入它。導出和導入資料的文法會有所不同，這取決于你的偏好。對于導出資料，你可以使用命名導出或預設導出。
預設導出
上面，我們建立了一個子產品，用于導出名為 Junior 的類。這個類有4個屬性。第一個屬性将在使用構造函數建立執行個體時擷取它們的值，最後一個屬性将具有預設值。這裡重要的是我們使用了 export 和 default 關鍵字來導出這個類。
使用預設關鍵字（預設導出）導出子產品資料意味着：無論我們使用哪個名稱導入資料，都會導入資料。讓我們在下面的示例中展示這一點。
請注意我們如何從prototype.js 檔案中以不同的名稱導入該類，并且這不會導緻任何錯誤。
命名導出
看起來，命名導出将根據其名稱導出資料。隻需要去掉default關鍵字，導入的時候記住資料的名字，用大括号把資料包起來。
你可以根據要導出的内容和導出方式使用導出和導入語句。順便說一下，這裡涉及到對象解構。
最後的話
我試圖向你概述在嘗試學習 React 甚至 Angular 時可能遇到的每個概念。遇到這些概念是不可避免的。你必須加強和更新有關 JavaScript 的文法知識。
對于每個概念，我承認我僅舉一個例子就隻觸及了皮毛。是以，我為你提供更多的資源供你學習，希望對你有所幫助。
資源如下：
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、箭頭函數：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、數組、對象和其他資料集合。
- 數組：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
- 對象：https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics
- 其他資料集合：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects#keyed_collections
6、解構對象和數組：https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/
7、預設參數：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters
8、Spread and Rest 運算符：https://javascript.info/rest-parameters-spread
9 、子產品：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
謝謝你的時間，感謝閱讀，祝程式設計愉快！