通過示例來學習ES2016, 2017, 2018的新特性

譯者按： 本文系統地總結了所有的新特性，並用淺顯的例子解釋。

• 原文: Here are examples of everything new in ECMAScript 2016, 2017, and 2018
• 譯者: Fundebug

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用於學習。

一直保持對JavaScript新特性的關注是一件很難的事情，特別是還找不到幾個有用的例子去理解它。

本文會輔以有用的例子來講述TC39中的18個特性，它們分別在ES2016, ES2017和ES2018中加入。 鑑於本文內容很長，我們將分為兩個部分來介紹，此為第一部分。

1. Array.prototype.includes

includes是一個Array上很有用的函式，用於快速查詢陣列中是否包含某個元素。(包括NaN，所以和indexOf不一樣)。

2. 指數函式的中綴形式

加/減法我們通常都是用其中綴形式，直觀易懂。在ECMAScript2016中，我們可以使用**來替代Math.pow。

1. Object.values()

Object.values()函式和Object.keys()很相似，它返回一個物件中自己屬性的所有值(通過原型鏈繼承的不算)。

2. Object.entries()

Object.entries()和Object.keys相關，不過entries()函式會將key和value以陣列的形式都返回。這樣，使用迴圈或則將物件轉為Map就很方便了。

例子1：

例子2：

3. 字串追加

提供了兩個字串追加的方法String.prototype.padStart和String.prototype.padEnd，方便我們將一個新的字串追加到某個字串的頭尾。

'someString'.padStart(numberOfCharcters [,stringForPadding]); 
'5'.padStart(10) // '          5'
'5'.padStart(10, '=*') //'=*=*=*=*=5'
'5'.padEnd(10) // '5         '
'5'.padEnd(10, '=*') //'5=*=*=*=*='
複製程式碼

這個對於格式化輸出很有用！

3.1 padStart例子

我們有一個不同長度元素的陣列，我們可以往前面追加0來使得他們列印的長度都為10。

3.2 padEnd例子

同樣，通過在後面追加字串來格式化輸出。

const cars = {
  '?BMW': '10',
  '?Tesla': '5',
  '?Lamborghini': '0'
}
Object.entries(cars).map(([name, count]) => {
  //padEnd appends ' -' until the name becomes 20 characters
  //padStart prepends '0' until the count becomes 3 characters.
  console.log(`${name.padEnd(20, ' -')} Count: ${count.padStart(3, '0')}`)
});
//Prints..
// ?BMW - - - - - - -  Count: 010
// ?Tesla - - - - - -  Count: 005
// ?Lamborghini - - -  Count: 000
複製程式碼

3.3 使用padStart和padEnd來格式化Emojis和其他寬字元

Emojis和寬字元使用多個位元組來表示，因此可能使用padStart和padEnd的結果並非如你所願。

比如：我們追加❤️到heart前面：

//你會發現不僅沒有5個桃心，有一個桃心還很奇怪。
'heart'.padStart(10, "❤️"); // prints.. '❤️❤️❤heart'
複製程式碼

這是因為❤️佔有2個位元組('\u2764\uFE0F')，而heart本身有5個位元組，因此只有5個位元組的餘地。所以只是追加了2個半的桃心。最後追加的'\u2764'會顯示為小黑桃心。

4. Object.getOwnPropertyDescriptors

該函式返回一個物件所有的屬性，甚至包括get/set函式。ES2017加入這個函式的主要動機在於方便將一個物件深度拷貝給另一個物件，同時可以將getter/setter拷貝。和Object.assign不同。

Object.assign將一個物件除了getter/setter以外的都深度拷貝了。

將原物件Car拷貝到ElectricCar，你就會發現Object.getOwnPropertyDescriptors拷貝了 getter和setter，而Object.assign沒有。

5. 允許在函式引數最後新增逗號

這是一個很小的改動，方便git演算法更加方便區分程式碼職責。我們用一個詳細的例子來理解：

值得一提的是，在函式呼叫的時候，也可以在最後新增逗號。

6. Async/Await

迄今為止，我介紹的特性中最有用的就屬這個功能了。Async函式可以幫助我們擺脫“回撥地獄”，並且整個程式碼會更加簡潔。

async關鍵字告訴JavaScript編譯器對於標定的函式要區別對待。當編譯器遇到await函式的時候會暫停。它會等到await標定的函式返回的promise。該promise要麼得到結果、要麼reject。

在下面的例子中，getAmount函式呼叫getUser和getBankBalance兩個非同步函式。我們可以用promise來實現它，不過用async await更加簡潔。

6.1 async函式返回Promise

如果你想獲取一個async函式的結果，你需要使用Promise的then語法。

在下面的例子中，我們想用console.log來列印doubleAndAdd的結果，可以使用then語法，將console.log函式作為引數傳入。

6.2 並行處理

在上面的例子中，我們顯示地呼叫了await兩次，因為每次都等待了1秒鐘，因此總計兩秒鐘。現在，我們可以使用Promise.all函式來讓他們並行處理。

6.3 async/await的錯誤處理

有很多方法來處理錯誤。

• 方法1：在函式中使用try-catch

• 方法2：catch每一個await表示式

因為每一個await表示式都會返回Promise，你可以對一個進行catch操作。

• 方法3：catch整個async-await函式

關於Fundebug

Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了7億+錯誤事件，得到了Google、360、金山軟體、百姓網等眾多知名使用者的認可。歡迎免費試用！

版權宣告

轉載時請註明作者Fundebug以及本文地址：
blog.fundebug.com/2018/07/17/…