經過示例來學習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個字節('u2764uFE0F')，而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累計處理了6億+錯誤事件，獲得了Google、360、金山軟件等衆多知名用戶的承認。歡迎免費試用！

版權聲明

轉載時請註明做者Fundebug以及本文地址：
https://blog.fundebug.com/2018/07/17/new_in_es16_17_18/