ReactNative開發必備ES6知識

引言

現代前端應用通常都會使用ES6進行開發，ReactNative專案同樣也會使用ES6進行開發，對於現代前端專案開發來說，掌握ES6成為一件十分必要的事情。對於ES6的學習，通常都會閱讀阮一峰的《ECMAScript 6 入門》，以下這本書中開發ReactNative必備的知識點。

ECMAScript 6簡介

ECMAScript6（以下簡稱ES6）是JavaScript語言的下一代標準，它的目標是讓JavaScript語言可以用來編寫複雜的大型應用程式，成為企業級開發語言。

let和const命令

ES6新增了let命令，用來宣告變數，它的用法類似於var，但是所宣告的變數，只在let命令所在的程式碼塊內有效。const宣告一個只讀的常量，一旦宣告，常量的值就不能變化。

變數的解構賦值

ES6允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構。

函式的擴充套件

• ES6能直接為函式的引數指定預設值
• 引數預設值可以與解構賦值的預設值，結合起來使用。
• 通常情況下，定義了預設值的引數，應該是函式的尾引數
• 指定了預設值以後，函式的length屬性，將返回沒有指定預設值的引數個數。
• 一旦設定了引數的預設值，函式進行宣告初始化時，引數會形成一個單獨的作用域（context）。等到初始化結束，這個作用域就會消失。
• 利用引數預設值，可以指定某一個引數不得省略，如果省略就丟擲一個錯誤。
• ES6 引入 rest 引數（形式為...變數名），用於獲取函式的多餘引數，這樣就不需要使用arguments物件了。
• 函式的name屬性，返回該函式的函式名。
• ES6 允許使用“箭頭”（=>）定義函式。
• 箭頭函式內部，還可以再使用箭頭函式。
• 尾呼叫（Tail Call）是函數語言程式設計的一個重要概念，本身非常簡單，一句話就能說清楚，就是指某個函式的最後一步是呼叫另一個函式。

陣列的擴充套件

• 擴充套件運算子（spread）是三個點（...）。它好比 rest 引數的逆運算，將一個陣列轉為用逗號分隔的引數序列。
• 由於擴充套件運算子可以展開陣列，所以不再需要apply方法，將陣列轉為函式的引數了。
• 陣列是複合的資料型別，直接複製的話，只是複製了指向底層資料結構的指標，而不是克隆一個全新的陣列。
• 擴充套件運算子提供了陣列合並的新寫法。
• 擴充套件運算子可以與解構賦值結合起來，用於生成陣列。
• 擴充套件運算子還可以將字串轉為真正的陣列。
• fill方法使用給定值，填充一個陣列。
• ES6 提供三個新的方法——entries()，keys()和values()——用於遍歷陣列。它們都返回一個遍歷器物件

物件的擴充套件

• ES6 允許直接寫入變數和函式，作為物件的屬性和方法。這樣的書寫更加簡潔。
  JavaScript 定義物件的屬性，有兩種方法。
• 函式的name屬性，返回函式名。物件方法也是函式，因此也有name屬性。
• ES6 提出“Same-value equality”（同值相等）演算法，用來解決這個問題。Object.is就是部署這個演算法的新方法。它用來比較兩個值是否嚴格相等，與嚴格比較運算子（===）的行為基本一致。
• Object.assign方法用於物件的合併，將源物件（source）的所有可列舉屬性，複製到目標物件（target）。
• Object.assign方法有很多用處。
• 物件的每個屬性都有一個描述物件（Descriptor），用來控制該屬性的行為。
• ES6 一共有 5 種方法可以遍歷物件的屬性。
• 我們知道，this關鍵字總是指向函式所在的當前物件，ES6 又新增了另一個類似的關鍵字super，指向當前物件的原型物件。

Promise物件

• Promise 是非同步程式設計的一種解決方案，比傳統的解決方案——回撥函式和事件——更合理和更強大
• ES6 規定，Promise物件是一個建構函式，用來生成Promise例項。
• Promise 例項具有then方法，也就是說，then方法是定義在原型物件Promise.prototype上的。它的作用是為 Promise 例項新增狀態改變時的回撥函式。前面說過，then方法的第一個引數是resolved狀態的回撥函式，第二個引數（可選）是rejected狀態的回撥函式。

Iterator 和 for…of 迴圈

• 遍歷器（Iterator）就是這樣一種機制。它是一種介面，為各種不同的資料結構提供統一的訪問機制。任何資料結構只要部署 Iterator 介面，就可以完成遍歷操作（即依次處理該資料結構的所有成員）。
• Iterator 介面的目的，就是為所有資料結構，提供了一種統一的訪問機制，即for...of迴圈
• 有一些場合會預設呼叫 Iterator 介面（即Symbol.iterator方法），除了下文會介紹的for...of迴圈，還有幾個別的場合
• 字串是一個類似陣列的物件，也原生具有 Iterator 介面。
• Symbol.iterator方法的最簡單實現，還是使用下一章要介紹的 Generator 函式。
• 遍歷器物件除了具有next方法，還可以具有return方法和throw方法。如果你自己寫遍歷器物件生成函式，那麼next方法是必須部署的，return方法和throw方法是否部署是可選的。
• ES6 借鑑 C++、Java、C# 和 Python 語言，引入了for...of迴圈，作為遍歷所有資料結構的統一的方法。

Class的基本語法

• ES6 提供了更接近傳統語言的寫法，引入了 Class（類）這個概念，作為物件的模板。通過class關鍵字，可以定義類。
• constructor方法是類的預設方法，通過new命令生成物件例項時，自動呼叫該方法。一個類必須有constructor方法，如果沒有顯式定義，一個空的constructor方法會被預設新增。
• 生成類的例項物件的寫法，與 ES5 完全一樣，也是使用new命令。前面說過，如果忘記加上new，像函式那樣呼叫Class，將會報錯。
• 與函式一樣，類也可以使用表示式的形式定義。
• 類不存在變數提升（hoist），這一點與 ES5 完全不同。
• 類的方法內部如果含有this，它預設指向類的例項。但是，必須非常小心，一旦單獨使用該方法，很可能報錯。
• 類相當於例項的原型，所有在類中定義的方法，都會被例項繼承。如果在一個方法前，加上static關鍵字，就表示該方法不會被例項繼承，而是直接通過類來呼叫，這就稱為“靜態方法”。

Class的繼承

• Class 可以通過extends關鍵字實現繼承，這比 ES5 的通過修改原型鏈實現繼承，要清晰和方便很多。
• Object.getPrototypeOf方法可以用來從子類上獲取父類。
• super這個關鍵字，既可以當作函式使用，也可以當作物件使用。在這兩種情況下，它的用法完全不同。
• extends關鍵字後面可以跟多種型別的值。

Module的語法

• ES6 模組的設計思想是儘量的靜態化，使得編譯時就能確定模組的依賴關係，以及輸入和輸出的變數。CommonJS 和 AMD 模組，都只能在執行時確定這些東西。比如，CommonJS 模組就是物件，輸入時必須查詢物件屬性。
• ES6 的模組自動採用嚴格模式，不管你有沒有在模組頭部加上"use strict";。
• 模組功能主要由兩個命令構成：export和import。export命令用於規定模組的對外介面，import命令用於輸入其他模組提供的功能。
• 使用export命令定義了模組的對外介面以後，其他 JS 檔案就可以通過import命令載入這個模組。
• 除了指定載入某個輸出值，還可以使用整體載入，即用星號（*）指定一個物件，所有輸出值都載入在這個物件上面。
• 為了給使用者提供方便，讓他們不用閱讀文件就能載入模組，就要用到export default命令，為模組指定預設輸出。

程式設計風格

• ES6 提出了兩個新的宣告變數的命令：let和const。其中，let完全可以取代var，因為兩者語義相同，而且let沒有副作用。
• 在let和const之間，建議優先使用const，尤其是在全域性環境，不應該設定變數，只應設定常量。
• 靜態字串一律使用單引號或反引號，不使用雙引號。動態字串使用反引號。
• 使用陣列成員對變數賦值時，優先使用解構賦值。
• 單行定義的物件，最後一個成員不以逗號結尾。多行定義的物件，最後一個成員以逗號結尾。
• 使用擴充套件運算子（…）拷貝陣列。
• 立即執行函式可以寫成箭頭函式的形式。
• 注意區分 Object 和 Map，只有模擬現實世界的實體物件時，才使用 Object。如果只是需要key: value的資料結構，使用 Map 結構。因為 Map 有內建的遍歷機制。
• 總是用 Class，取代需要 prototype 的操作。因為 Class 的寫法更簡潔，更易於理解。
• 首先，Module 語法是 JavaScript 模組的標準寫法，堅持使用這種寫法。使用import取代require。
• ESLint 是一個語法規則和程式碼風格的檢查工具，可以用來保證寫出語法正確、風格統一的程式碼。