JavaScript 新功能 • 給心急的程式設計師的 JavaScript（ES2022 版）

4 JavaScript 新功能

本章列出 ES2016–ES2022 的新功能，並以反向時間順序排列。從 ES2015（ES6）之後開始，因為該版本有太多功能無法在此列出。

4.1 ECMAScript 2022 的新功能

ES2022 可能會在 2022 年 6 月成為標準。以下提案已達到第 4 階段，並預計成為該標準的一部分

類別的新成員
- 現在可以透過以下方式建立屬性（公開槽）
  - 實例公開欄位
  - 靜態公開欄位
- 私有槽是新的，可以透過以下方式建立
  - 私有欄位（實例私有欄位和靜態私有欄位）
  - 私有方法和存取器（非靜態和靜態）
- 靜態初始化區塊
私有槽檢查（「私有欄位的簡潔品牌檢查」）：以下表達式檢查 obj 是否有私有槽 #privateSlot
```
#privateSlot in obj
```
模組中的頂層 await：現在可以在模組的頂層使用 await，而且不必再進入非同步函式或方法。
error.cause：Error 及其子類別現在讓我們可以指定哪個錯誤導致目前的錯誤
```
new Error('Something went wrong', {cause: otherError})
```
可索引值的方法 .at()讓我們可以在給定的索引處讀取元素（就像方括號運算子 []），並支援負索引（與方括號運算子不同）。
```
> ['a', 'b', 'c'].at(0)
'a'
> ['a', 'b', 'c'].at(-1)
'c'
```
以下「可索引」類型有方法 .at()
- 字串
- 陣列
- 所有已輸入陣列類別：Uint8Array 等。
正規運算式比對索引：如果我們將旗標新增至正規運算式，使用它會產生比對物件，記錄每個群組擷取的開始和結束索引。
Object.hasOwn(obj, propKey) 提供一個安全的方式來檢查物件 obj 是否有自訂屬性，其金鑰為 propKey。與 Object.prototype.hasOwnProperty 相反，它適用於所有物件。

ES2022 可能還會新增更多功能

如果發生這種情況，本書將會相應更新。

4.2 ECMAScript 2021 的新增功能

ECMAScript 2021 中新增了以下功能

String.prototype.replaceAll() 讓我們取代正規運算式或字串的所有比對（.replace() 只會取代字串的第一個出現）。
```
> 'abbbaab'.replaceAll('b', 'x')
'axxxaax'
```
Promise.any() 和 AggregateError：Promise.any() 會傳回一個 Promise，只要 Promise 中可迭代的 Promise 中的第一個 Promise 完成，它就會完成。如果只有拒絕，它們會放入 AggregateError，而 AggregateError 會成為拒絕值。

當我們只對幾個 Promise 中的第一個已完成 Promise 感興趣時，我們會使用 Promise.any()。
邏輯賦值運算子:
```
a ||= b
a &&= b
a ??= b
```
底線 (_) 作為分隔符號，用於
- 數字文字：123_456.789_012
- 大整數文字：6_000_000_000_000_000_000_000_000n
弱參考：此功能超出了本書的範圍。如需更多資訊，請參閱其提案。

4.3 ECMAScript 2020 的新增功能

ECMAScript 2020 中新增了以下功能

新的模組功能
- 透過 import() 進行動態匯入：正常的 import 陳述式是靜態的：我們只能在模組的最上層使用它，而且它的模組指定符是一個固定的字串。import() 會改變這個情況。它可以在任何地方使用（包括條件式陳述式），而且我們可以計算它的引數。
- import.meta 包含目前模組的元資料。它第一個廣泛支援的屬性是 import.meta.url，其中包含一個字串，內容為目前模組檔案的 URL。
- 命名空間重新匯出：以下表達式會匯入模組 'mod' 的所有匯出，放入命名空間物件 ns 中，並匯出該物件。
```
export * as ns from 'mod';
```
屬性存取和方法呼叫的選擇性鏈結。選擇性鏈結的一個範例是
```
value.?prop
```
如果 value 是 undefined 或 null，此表達式會評估為 undefined。否則，它會評估為 value.prop。此功能在屬性讀取鏈中特別有用，因為其中一些屬性可能會遺失。
空值合併運算子 (??):
```
value ?? defaultValue
```
如果 value 為 undefined 或 null，此表達式為 defaultValue，否則為 value。這個運算子讓我們可以在缺少內容時使用預設值。

以前這種情況會使用邏輯或運算子 (||)，但它有缺點，因為只要左手邊為假值就會傳回預設值（這並不總是正確的）。
大整數 – 任意精度的整數：大整數是一種新的基本類型。它支援可以任意大的整數（儲存空間會根據需要而增加）。
String.prototype.matchAll()：如果未設定旗標 /g，此方法會擲回例外，並傳回一個可迭代物件，其中包含給定字串的所有比對物件。
Promise.allSettled() 接收一個可迭代的 Promise。它會傳回一個 Promise，在所有輸入的 Promise 都已解決後才會完成。完成值是一個陣列，每個輸入 Promise 有一個物件，可能是下列其中之一
- { status: 'fulfilled', value: «fulfillment value» }
- { status: 'rejected', reason: «rejection value» }
globalThis 提供一種存取全域物件的方法，適用於瀏覽器和伺服器端平台，例如 Node.js 和 Deno。
for-in 機制：此功能超出本書的範圍。如需更多相關資訊，請參閱其提案。

4.4 ECMAScript 2019 的新增功能

ECMAScript 2019 新增了以下功能

陣列方法 .flatMap() 的運作方式類似於 .map()，但它允許回呼傳回包含零個或多個值的陣列，而不是單一的值。傳回的陣列會串接起來，成為 .flatMap() 的結果。使用案例包括
- 同時進行過濾和對應
- 將單一輸入值對應到多個輸出值
陣列方法 .flat() 將巢狀陣列轉換為平面陣列。我們可以選擇在巢狀的哪個深度停止扁平化。
Object.fromEntries() 從一個可迭代的 entries 中建立一個物件。每個 entry 都是一個包含屬性金鑰和屬性值的二元陣列。
字串方法：.trimStart() 和 .trimEnd() 的運作方式類似於 .trim()，但只會移除字串開頭或結尾的空白字元。
可選的 catch 繫結：如果我們不使用 catch 子句的參數，我們現在可以省略它。
Symbol.prototype.description 是用於讀取符號描述的 getter。以前，描述包含在 .toString() 的結果中，但無法單獨存取。

這些新的 ES2019 功能超出了本書的範圍

JSON 超集：請參閱 2ality 部落格文章。
格式良好的 JSON.stringify()：請參閱 2ality 部落格文章。
Function.prototype.toString() 修訂：請參閱 2ality 部落格文章。

4.5 ECMAScript 2018 的新增功能

以下功能已新增至 ECMAScript 2018

非同步迭代是同步迭代的非同步版本。它基於 Promises
- 對於同步可迭代對象，我們可以立即存取每個項目。對於非同步可迭代對象，我們必須在存取項目之前 await。
- 對於同步可迭代對象，我們使用 for-of 迴圈。對於非同步可迭代對象，我們使用 for-await-of 迴圈。
擴散到物件文字：透過在物件文字中使用擴散 (...)，我們可以將另一個物件的屬性複製到目前的物件中。一個使用案例是建立物件 obj 的淺層副本
```
const shallowCopy = {...obj};
```
剩餘屬性 (解構)：當對物件進行解構時，我們現在可以使用剩餘語法 (...) 來取得物件中所有先前未提及的屬性。
```
const {a, ...remaining} = {a: 1, b: 2, c: 3};
assert.deepEqual(remaining, {b: 2, c: 3});
```
Promise.prototype.finally() 與 try-catch-finally 陳述式的 finally 子句有關，類似於 Promise 方法 .then() 與 try 子句的關係，以及 .catch() 與 catch 子句的關係。

換句話說：.finally() 的回呼會執行，無論 Promise 是已完成或已拒絕。
新的正規表示法功能
- RegExp 命名擷取群組：除了依據數字存取群組之外，我們現在可以為它們命名並依據名稱存取它們
```
const matchObj = '---756---'.match(/(?<digits>[0-9]+)/)
assert.equal(matchObj.groups.digits, '756');
```
- RegExp 回顧斷言補充了預先斷言
  - 正向回顧：(?<=X) 匹配如果目前位置之前是 'X'。
  - 負向後瞻：(?<!X) 符合目前的位址前面沒有 '(?<!X)'。
- 正規表示式的 s (dotAll) 旗標。如果此旗標是作用中的，點號會符合換行符號（預設是不會）。
- RegExp Unicode 屬性跳脫字元讓我們在符合 Unicode 碼點的集合時有更大的能力 – 例如
```
> /^\p{Lowercase_Letter}+$/u.test('aüπ')
true
> /^\p{White_Space}+$/u.test('\n \t')
true
> /^\p{Script=Greek}+$/u.test('ΩΔΨ')
true
```
範本字串的修訂允許在標籤範本中使用反斜線的文字，這在字串字面值中是非法的 – 例如
```
windowsPath`C:\uuu\xxx\111`
latex`\unicode`
```

4.6 ECMAScript 2017 的新功能

以下功能已新增至 ECMAScript 2017

非同步函式 (async/await) 讓我們使用同步的語法來撰寫非同步程式碼。
Object.values() 傳回一個陣列，其中包含給定物件的所有可列舉字串鍵值屬性的值。
Object.entries() 傳回一個陣列，其中包含給定物件的所有可列舉字串鍵值屬性的鍵值對。每個配對都編碼為一個二元素陣列。
字串填補：字串方法 .padStart() 和 .padEnd() 會插入填補文字，直到接收器夠長
```
> '7'.padStart(3, '0')
'007'
> 'yes'.padEnd(6, '!')
'yes!!!'
```
函式參數清單和呼叫中的尾隨逗號：ES3 以來，尾隨逗號已允許在陣列字面值中，ES5 以來則允許在物件字面值中。現在它們也在函式呼叫和方法呼叫中被允許。
以下兩個功能超出了本書的範圍
- Object.getOwnPropertyDescriptors()（請參閱 “深入 JavaScript”）
- 共享記憶體和原子（請參閱提案）

4.7 ECMAScript 2016 的新功能

以下功能已新增至 ECMAScript 2016

Array.prototype.includes() 檢查陣列是否包含給定的值。
指數運算子 (**):
```
> 4 ** 2
16
```

4.8 本章的來源

ECMAScript 功能清單取自 TC39 已完成提案頁面。