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 是一個語法規則和代碼風格的檢查工具，能夠用來保證寫出語法正確、風格統一的代碼。