JavaScript 作為最受歡迎的程式語言之一，隨著 ECMAScript 標準的持續更新，為開發者帶來了許多實用又強大的新功能。不管你是新手還是老手，這些新特性都能幫助你寫出更簡潔、更高效的程式碼！以下精選了 25 個超實用的 ES 新特性，一起來看看吧！
1. 可選鏈操作符（Optional Chaining）
告別繁瑣的空值檢查，只需用 ?. 就能輕鬆處理物件屬性訪問。
javascript
// 傳統寫法
const street = user && user.address && user.address.street;
// 新寫法
const street = user?.address?.street;
2. 空值合併運算符（Nullish Coalescing）
用 ?? 處理 null 或 undefined 的預設值設定。
javascript
const value = null;
const defaultValue = value ?? 'default'; // 結果為 'default'
3. 私有類字段（Private Class Fields）
用 # 宣告私有字段，讓封裝性更強。
javascript
class Person {
#name;
constructor(name) {
this.#name = name;
}
getName() {
return this.#name;
}
}
4. 動態匯入（Dynamic Import）
按需載入模組，提升應用效能。
javascript
button.addEventListener('click', async () => {
const module = await import('./feature.js');
module.doSomething();
});
5. Array.prototype.flat() 和 flatMap()
輕鬆展平嵌套陣列。
javascript
const nested = [1, [2, 3], [4, [5, 6]]];
const flattened = nested.flat(2); // 結果為 [1, 2, 3, 4, 5, 6]
6. 物件字面量增強
更簡潔的物件屬性與方法定義。
javascript
const name = 'Tom';
const age = 18;
const person = {
name,
age,
sayHi() {
console.log('Hi!');
}
};
7. Promise.allSettled()
等待所有 Promise 完成，不管成功或失敗。
javascript
const promises = [
fetch('/api/1'),
fetch('/api/2'),
fetch('/api/3')
];
const results = await Promise.allSettled(promises);
8. BigInt
處理超大整數。
javascript
const bigNumber = 9007199254740991n;
const result = bigNumber + 1n;
9. globalThis
統一的全域物件存取方式。
javascript
console.log(globalThis);
10. String.prototype.matchAll()
更強大的字串匹配功能。
javascript
const str = 'test1test2test3';
const regexp = /test(\d)/g;
const matches = [...str.matchAll(regexp)];
11. 邏輯賦值運算符
簡化條件賦值操作。
javascript
複製
x &&= y; // 等同於 x && (x = y)
x ||= y; // 等同於 x || (x = y)
x ??= y; // 等同於 x ?? (x = y)
12. Promise.any()
返回第一個成功的 Promise。
javascript
const promises = [
fetch('/api/1'),
fetch('/api/2'),
fetch('/api/3')
];
try {
const first = await Promise.any(promises);
console.log(first);
} catch (error) { console.log('All promises rejected');
}
13. 數字分隔符
提高大數字的可讀性。
javascript
const billion = 1_000_000_000;
const bytes = 0xFF_FF_FF_FF;
14. String.prototype.replaceAll()
一次替換字串中所有的匹配項。
15. WeakRef 和 FinalizationRegistry
更好的記憶體管理方式。
16. 頂層 await
在模組的頂層直接使用 await。
17. 類靜態初始化塊
更靈活的類靜態成員初始化。
18. at() 方法
更直觀的陣列索引訪問。
javascript
const arr = [1, 2, 3];
console.log(arr.at(-1)); // 結果為 3
19. Object.hasOwn()
更安全的屬性檢查方法。
20. 錯誤原因（Error Cause）
更好的錯誤追蹤。
21. Array.prototype.group()
方便的陣列分組操作。
22. 正則表達式命名捕獲組
更清晰的正則匹配結果。
23. Promise.withResolvers()
更優雅的 Promise 操控方式。
24. Array 複製方法
不修改原陣列的情況下進行操作。
javascript
const arr = [1, 2, 3];
const copy = arr.toReversed(); // 複製並反轉
const sorted = arr.toSorted(); // 複製並排序
25. 裝飾器
增強類與類成員的功能。
javascript
function logged(target, context) {
return class extends target {
exec(...args) {
console.log('Starting execution...');
const result = super.exec(...args);
console.log('Finished execution.');
return result;
}
};
}
@logged
class Example {
exec() {
// ...
}
}
這 25 個 JavaScript 新特性不僅讓程式碼更簡潔，也讓開發過程更加流暢！快把它們用到你的專案中，提升程式碼品質吧！