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

原文釋出時間為：2018年06月21日

原文作者：芒言

本文來源： 

掘金 https://juejin.im/entry/5b3a29f95188256228041f46

如需轉載請聯系原作者