ES2022 新特性概覽：Top-Level Await、.at() 及更多內容

引言

隨著 TC39 委員會的年度發布流程，JavaScript 語言每年都在不斷演進。ECMAScript 2022 (ES2022) 帶來了一系列旨在提升開發者體驗和程式碼可讀性的新功能。讓我們一起看看其中最亮眼的幾個特性。

1. Top-Level await

這是 ES2022 中最受期待的特性之一。在此之前，await 關鍵字只能在 async 函式內部使用。這在模組的頂層作用域中處理非同步操作時非常不便，我們通常需要藉助 IIFE（立即呼叫函式運算式）來包裹非同步程式碼。

之前 👎:

// data.js
import { fetchData } from './api.js';

let data;
(async () => {
  data = await fetchData();
  // ... 只能在这里使用 data
})();

export { data }; // 导出时 data 还是 undefined

現在 (ES2022) 👍:

// data.js
import { fetchData } from './api.js';

const data = await fetchData();

export { data }; // 模块会等待 await 完成后再被其他模块评估

Top-level await 極大地簡化了模組的動態載入、相依性初始化等場景，讓非同步程式碼寫起來更符合直覺。

2. .at() 陣列／字串索引方法

在 JavaScript 中，取得陣列的最後一個元素通常需要寫 arr[arr.length - 1]，這既冗長又容易出錯。ES2022 引入了 .at() 方法，統一了正向和反向索引的體驗。

.at() 方法接收一個整數，如果是正數，則回傳對應索引的元素；如果是負數，則從末尾開始倒數。

之前 👎:

const arr = [1, 2, 3, 4, 5];
const lastElement = arr[arr.length - 1]; // 5
const secondToLast = arr[arr.length - 2]; // 4

現在 (ES2022) 👍:

const arr = [1, 2, 3, 4, 5];
const lastElement = arr.at(-1); // 5
const secondToLast = arr.at(-2); // 4

// 同样适用于字符串
const str = 'hello';
console.log(str.at(-1)); // 'o'

3. Object.hasOwn(obj, prop)

檢查一個物件是否擁有某個自有屬性（而不是繼承來的屬性），我們通常使用 Object.prototype.hasOwnProperty.call(obj, prop)。這種寫法非常繁瑣，且在某些情況下（如 Object.create(null) 建立的物件）會出錯。

Object.hasOwn() 提供了一個更短、更可靠的靜態方法。

之前 👎:

const obj = { a: 1 };
console.log(Object.prototype.hasOwnProperty.call(obj, 'a')); // true
console.log(Object.prototype.hasOwnProperty.call(obj, 'toString')); // false

現在 (ES2022) 👍:

const obj = { a: 1 };
console.log(Object.hasOwn(obj, 'a')); // true
console.log(Object.hasOwn(obj, 'toString')); // false

4. 其他值得關注的特性

• Error Cause: Error 建構函式現在可以接收第二個參數，用於指定錯誤的「原因」，方便建構更清楚的錯誤鏈。

  try {
    // ...
  } catch (err) {
    throw new Error('New error message', { cause: err });
  }

• RegExp Match Indices (/d flag): 當使用 /d 旗標時，規則運算式的比對結果會額外提供每個擷取群組的起始和結束索引。

結論

ES2022 的新特性雖然沒有帶來顛覆性的變革，但它們在細節上打磨了 JavaScript，解決了許多開發者長期以來的痛點，讓程式碼變得更簡潔、更健壯。