ECMAScript (ES) 簡介 - Part 3

前言

系列文章總共分成三篇來介紹，列在下方方便大家參考：

本篇將從 ES2018 接續介紹，還沒看過前一篇的話，可以先看 Part 2 呦！

ECMAScript 2018

這一版主要是語法更簡潔、非同步行為更一致。

非同步迭代器 (Async Iteration)

javascript
1for await (const item of asyncIterable) {
2  console.log(item);
3}

Spread / Rest 支援物件

javascript
1const clone = { ...obj };
2const { a, ...rest } = obj;

Promise.prototype.finally

正則表達式加強

s (dotAll) flag

javascript
1const regex = /f.o/s;
2  
3console.log(regex.dotAll);  // true

(?<name>...)

ECMAScript 2019

這一版持續補齊一些常用功能，也對 Array 和 Object 做了更多加強。

Array.prototype.flat：展開陣列

javascript
1[1, [2, 3]].flat(); // [1, 2, 3]

Array.prototype.flatMap
Object.fromEntries：和 Object.entries 互補。
字串方法
- trimStart / trimEnd

catch: 省略錯誤參數

javascript
1try {
2  ...
3} catch {
4  ...
5}

JSON 超過行數限制的語法修正。
Function.prototype.toString: 保留原始空白格式。

ECMAScript 2020

這一版是重要的更新版本，包含不少現代 JavaScript 常用語法。

可選串接 (Optional Chaining)
```
javascript
1user?.address?.city
```
空值合併運算子 (Nullish Coalescing)
```
javascript
1value ?? 'default'
```
Promise.allSettled
globalThis: 在任何 JS 執行環境都能取得全域物件。

BigInt: 可以處理超過 Number 限制的整數。

javascript
1const bigInt = BigInt(Number.MAX_SAFE_INTEGER) + BigInt(1);  // 9007199254740992n
2const bigIntString = BigInt("9007199254740992");  // 9007199254740992n

動態載入模組 (Dynamic import)

javascript
1const module = await import('./module.js');

ECMAScript 2021

這一版聚焦在字串、Promise 與邏輯運算的新用法。

邏輯指定運算子 (Logical Assignment Operator)
- ||=
- &&=
- ??=
String.prototype.replaceAll
Promise.any: 只要有一個 Promise 成功就回傳。
WeakRef / FinalizationRegistry
Numeric Separators
```
javascript
11_000_000  // = 1000000
```

ECMAScript 2022

這一版對 Class 做了升級，是 Class 系統進化很大的一版。

Class 新語法
- #field: 私有欄位。
- #method私有方法。
- static { ... }: 靜態初始化區塊。
Top-level Await: 模組可以直接使用 await。
```
javascript
1const data = await fetchData();
```
Object.hasOwn: 比 hasOwnProperty 更安全。
/regex/d: RegExp Match Indices，提供更完整的 match 位置資訊。

ECMAScript 2023

這一版主要是補強 Array 與 Promise，並改善對於資料操作的便利性。

Array.prototype.findLast
Array.prototype.findLastIndex
#!/usr/bin/env node: Hashbang 支援。
Symbol.prototype.description
Promise.withResolvers(): 管理 Promise 的新工具。
較嚴謹的 Array 與 TypedArray 可變性檢查。

ECMAScript 2024

這一版延續近年的趨勢，持續強化陣列原生方法，以及改善資料處理方式。

Array.prototype.toSorted: 不改變原陣列的 sort 方法。
Array.prototype.toSpliced
Array.prototype.toReversed

Array.prototype.with: 回傳更新後的新陣列。

javascript
1const arr = [1, 2, 3];
2const newArr = arr.with(1, 99);  // [1, 99, 3]

Object.groupBy / Map.groupBy: 依照 key 來對資料分組。
正則表達式新增擴充: Unicode 改善、更多 Match 的支援。

到這裡，我們已經全面了解 ECMAScript 的演進軌跡，從最早的標準到最新年度版本的語法更新與語言改善。這些更新不只豐富了 JavaScript 的功能，也讓開發工作變得更具表達力與可維護性。

雖然本文到此為止，但 ECMAScript 標準仍在每年持續演進。未來的新特性與語法糖將繼續推動語言前行。如果你喜歡這系列內容，可以關注 ECMAScript 的提案流程與更新，進一步理解語言的未來方向。

Categories