ES2018 規范引入了四個新功能。這些功能包括異步迭代，rest/spread 屬性，Promise.prototype.finally() 和正則表達式改進。本問將幫你了解這些 ES2018 功能的工作原理及使用方法。

異步迭代

異步迭代是討論的比較少 ES2018 功能之一。雖然還有很多關于 ES2018 其他功能的討論，但幾乎沒有關于異步迭代這方面的內容。通過異步迭代，我們可以得到異步的可迭代對象和迭代器。

這意味著你可以把 await 關鍵字與 for…of 循環放在一起使用。你可以用這些循環對可迭代對象進行迭代。可迭代對象的包括數組、map、set，NodeList，函數的 arguments 參數，TypedArray 等。

在 ES2018 之前，for...of 循環是同步的。如果你試著迭代涉及異步操作的可迭代對象并 await，則無法正常工作。循環本身會保持同步，基本上忽略 await ，并在其內部的異步操作可以完成之前完成迭代。

// 下面的代碼在 ES2018 之前不起作用，因為循環保持同步。 
// 創建一個異步函數： 
async function processResponses(someIterable) { 
  // 對可迭代對象進行迭代 
  for (let item of someIterable) { 
    // 通過異步操作處理項目，例如promise： 
    await processItem(item) 
  } 
} 

同時 for...of 循環也可以與異步代碼一起使用。也就是說可以在遍歷可迭代對象時執行一些異步操作。for...of 循環將會是異步的，讓你能夠等待異步操作完成。

需要記住的是在哪里使用 await 關鍵字。不需要把它放進循環體中，應該將其放在for...of關鍵字中 for 的后面。現在當你用 next() 方法獲取異步迭代器的下個值時，將會得到一個 Promise。如果你想了解更多信息，可以在 GitHub 上去看看(https://github.com/tc39/proposal-async-iteration)。

// 創建一個異步函數: 
async function processResponses(someIterable) { 
  //遍歷可迭代對象并等待異步操作的結果 
  for await (let item of someIterable) { 
    processItem(item) 
  } 
} 

Rest/Spread 屬性

rest 和 spread 并不是真正的新功能。兩者都是在 ES6 中作為新的運算符引入的，它們很快就開始流行起來。可以說 JavaScript 程序員喜歡它們。唯一的問題是它們只能用在數組和參數上，不過 ES2018 把這兩個功能引入了對象中。

rest 和 spread 運算符的語法都非常簡單，由三個點(...)組成。這些點后面是要在其上使用 rest 或 spread 運算符的對象。接下來簡單的討論一下兩者的工作原理。

對象的 rest 運算符

rest 運算符使你可以將對象的所有剩余對象屬性屬性提取到新對象上。要注意這些屬性必須是可枚舉的。如果你已經對某些屬性使用了分解，那么 rest 運算符會只提取剩余的屬性。

// Rest example: 
 
const daysObj = { 
  one: 'Monday', 
  two: 'Tuesday', 
  three: 'Wednesday', 
  four: 'Thursday', 
  five: 'Friday' 
} 
 
//使用解構將變量的前兩個屬性分配給變量。 
//然后，使用rest將其余屬性分配給第三個變量。 
const { one, two, ...restOfDays } = daysObj 
// rest 僅提取 "three", "four" 和 "five"  
// 因為我們已經提取了 "one" 和 "two"  
 
console.log(one) 
// Output: 
// 'Monday' 
 
console.log(two) 
// Output: 
// 'Tuesday' 
 
console.log(restOfDays) 
// Output: 
// { three: 'Wednesday', four: 'Thursday', five: 'Friday' } 

如果要對對象使用 rest 運算符，需要記住兩點：首先，只能用一次，除非把它用在嵌套對象上。其次，必須在最后使用。這就是為什么在上面的例子中，在解構前兩個屬性之后而不是之前看到它的原因。

// 這行代碼不起作用，因為把 rest 運算符用在了最前面： 
const { ...all, one, two } = { one: 1, two: 2, three: 3 } 
 
//這行能起作用： 
const { one, two, ...all } = { one: 1, two: 2, three: 3 } 
 
// 這行不起作用，因為同一級別上有多個 rest 運算符： 
const { one, ...some, ...end } = { /* some properties */ } 
 
// 這行能起作用，在多個級別上的多個 rest 運算符： 
const { one, {...secondLevel }, ...firstLevel } = { /* some properties */ } 

對象的 spread 運算符

spread 運算符的作用是可以通過插入另一個對象的所有屬性來創建新對象。Spread 運算符還允許你從多個對象插入屬性。也可以把這個運算符與添加新屬性結合使用。

// Spread example: 
const myOriginalObj = { name: 'Joe Doe', age: 33 } 
// 用 spread 運算符創建新對象： 
const myNewObj = { ...myOriginalObj } 
 
console.log(myNewObj) 
// Output: 
// { name: 'Joe Doe', age: 33 } 
 
 
// 添加屬性的例子： 
const myOriginalObj = { name: 'Caesar' } 
// 用 spread 運算符創建新對象 
// 并添加新的屬性“genre”： 
const myNewObj = { ...myOriginalObj, genre: 'Strategy' } 
 
console.log(myNewObj) 
// Output: 
// { 
//   name: 'Caesar', 
//   genre: 'Strategy' 
// } 
 
 
// Spread 運算符并合并兩個對象： 
const myObjOne = { title: 'Eloquent JavaScript' } 
const myObjTwo = { author: 'Marijn Haverbeke' } 
 
const myNewObj = { ...myObjOne, ...myObjTwo } 
 
console.log(myNewObj) 
// Output: 
// { 
//   title: 'Eloquent JavaScript', 
//   author: 'Marijn Haverbeke' 
// } 

當從多個對象插入屬性并添加新屬性時，順序很重要。

我來解釋一下，假設你要用 spread 運算符基于兩個現有對象創建一個新對象。第一個已有對象中包含具有某些值的屬性 title。第二個對象也包含屬性 title，但是值不一樣。最終到底取哪個 title?

答案是最后一個。如果對第一個對象使用 spread 運算符，然后再對第二個對象使用，則第二個 title 會生效。如果你將 spread 運算符永在第二個對象上，則第一個 title會生效。

// Spread 運算符并合并兩個對象： 
const myObjOne = { 
  title: 'Eloquent JavaScript', 
  author: 'Marijn Haverbeke', 
} 
 
const myObjTwo = { 
  title: 'You Don\'t Know JS Yet', 
  language: 'English' 
} 
 
// 用 spread 運算符通過組合 “myObjOne” 和 “myObjTwo” 創建新對象 
// 注意：“myObjTwo” 中的 “title” 會將覆蓋 “myObjTwo” 的 “title” 
// 因為“ myObjTwo”排在最后。 
const myNewObj = { ...myObjOne, ...myObjTwo } 
 
console.log(myNewObj) 
// Output: 
// { 
//   title: "You Don't Know JS Yet", 
//   author: 'Marijn Haverbeke', 
//   language: 'English' 
// } 
 
 
// 注意：“myObjOne” 中的 “title” 將覆蓋 “myObjTwo” 的 “title” 
const myNewObj = { ...myObjTwo, ...myObjOne } 
 
console.log(myNewObj) 
// Output: 
// { 
//   title: 'Eloquent JavaScript', 
//   language: 'English', 
//   author: 'Marijn Haverbeke' 
// } 

Promise.prototype.finally()

一開始有兩個用于 Promise 的回調函數。其中一個是 then()，在實現諾 Promise 執行。第二個是catch()，在 promise 被拒絕或 then() 拋出異常時執行。ES2018 增加了用于 Promise 的第三個回調函數 finally()。

每次完成 promise 時，都會執行 finally() 回調，不管 promise 是否完成。這個回調的一般用于執行應始終發生的操作。例如關閉模態對話框、關閉數據庫連接或進行某些清理。

// finally() example: 
fetch() 
  .then(response => response.json()) 
  .then(data => console.log(data)) 
  .catch(error => console.log(error)) 
  //最后做點什么： 
  .finally(() => console.log('Operation done.')) 

對正則表達式的改進

ES2018 還對正則表達式功能進行了的一些改進。這些改進包括 s(dotAll) 標志，后行斷言，命名捕獲組和 unicode 屬性轉義。

s(dotAll)

首先是 s(dotAll) 。與點(.)不同，s(dotAll) 允許對換行符及表情符號進行匹配。

// s(dotAll) example: 
/hello.world/.test('hello\nworld') 
// Output: 
// false 
 
/hello.world/s.test('hello\nworld') 
// Output: 
// true 

后行斷言

在ES2018之前，JavaScript僅支持先行斷言。先行斷言用于基于其后的文本來匹配模式。在 ES2018 中增加了對后行斷言的支持。通過它可以基于模式之前的文本模式來進行匹配。后行斷言的語法為 ?<=。

// 后行斷言例子: 
/(?<=green) apple/.test('One red apple is on the table.') 
// Output: 
// false 
 
/(?<=green) apple/.test('One green apple is on the table.') 
// Output: 
// true 

斷言后面也有一個反向的回溯。僅當子字符串之前沒有斷言時，此斷言才與模式匹配。對后行斷言取反操作的語法是 ?<!。

/(?<!green) apple/.test('One red apple is on the table.') 
// Output: 
// true 
 
/(?<!green) apple/.test('One green apple is on the table.') 
// Output: 
// false 

命名捕獲組

另一個被 ES2018 引入到正則表達式的好功能是命名捕獲組。命名捕獲組的語法為 ?<some_name>。

const date_pattern = /(?<day>\d{2})\/(?<month>\d{2})\/(?<year>\d{4})/ 
const result = date_pattern.exec('11/12/2021') 
 
console.log(result) 
// Output: 
// [ 
//   '11/12/2021', 
//   '11', 
//   '12', 
//   '2021', 
//   index: 0, 
//   input: '11/12/2021', 
//   groups: [Object: null prototype] { day: '11', month: '12', year: '2021' } 
// ] 
 
console.log(result.groups.day) 
// Output: 
// '11' 
 
console.log(result.groups.month) 
// Output: 
// '12' 
 
console.log(result.groups.year) 
// Output: 
// '2021' 

Unicode 屬性轉義

每個 unicode 字符都有許多屬性。例如：空白字符，大小寫，字母，ASCII，表情符號等。現在你可以在正則表達式中訪問這些屬性了。

要使用這個功能需要做兩件事。首先必須使用 /u 標志。這個標志告訴 JavaScript 你的字符串是一系列 Unicode 代碼點。第二是使用 \p{}。你要檢查的屬性位于大括號之間，反之則用 \P{}。

// 用俄語創建一個字符串（西里爾字母）： 
const myStrCyr = 'Доброе утро' 
 
//創建英文字符串（拉丁字母）： 
const myStrLat = 'Good morning' 
 
//測試“ myStrCyr”是否包含西里爾字符： 
/\p{Script=Cyrillic}/u.test(myStrCyr) // true 
 
//測試“ myStrLat”是否包含西里爾字符： 
/\p{Script=Cyrillic}/u.test(myStrLat) // false 
 
// 測試“myStrLat” 是否包含西里爾字符： 
/\p{Script=Latin}/u.test(myStrCyr) // false 
 
// 測試“myStrLat” 是否包含拉丁語字符： 
/\p{Script=Latin}/u.test(myStrLat) // true