ES 新特性全解密！這 25 個特性讓你的代碼效率飆升 50%
作者：story
本文分享 25 個能顯著提升編程效率的 ES 新特性，讓我們的代碼更簡潔、更優(yōu)雅、更高效。
JavaScript 作為最流行的編程語言之一，通過 ECMAScript 標(biāo)準(zhǔn)的不斷演進(jìn)，為開發(fā)者帶來了大量實用的新特性。分享 25 個能顯著提升編程效率的 ES 新特性，讓我們的代碼更簡潔、更優(yōu)雅、更高效。
1. 可選鏈操作符（Optional Chaining）
告別繁瑣的空值檢查，用簡單的 ?. 優(yōu)雅處理對象屬性訪問。
// 之前的寫法
const street = user && user.address && user.address.street;
// 現(xiàn)在的寫法
const street = user?.address?.street;2. 空值合并運(yùn)算符（Nullish Coalescing）
使用 ?? 來處理 null 或 undefined 的默認(rèn)值設(shè)置。
const value = null;
const defaultValue = value ?? 'default'; // 'default'3. 私有類字段（Private Class Fields）
使用 # 聲明私有字段，增強(qiáng)面向?qū)ο缶幊痰姆庋b性。
class Person {
#name;
constructor(name) {
this.#name = name;
}
getName() {
return this.#name;
}
}4. 動態(tài)導(dǎo)入（Dynamic Import）
按需加載模塊，優(yōu)化應(yīng)用性能。
button.addEventListener('click', async () => {
const module = await import('./feature.js');
module.doSomething();
});5. Array.prototype.flat() 和 flatMap()
輕松處理嵌套數(shù)組。
const nested = [1, [2, 3], [4, [5, 6]]];
const flattened = nested.flat(2); // [1, 2, 3, 4, 5, 6]6. 對象字面量增強(qiáng)
更簡潔的對象屬性和方法定義。
const name = 'Tom';
const age = 18;
const person = {
name,
age,
sayHi() {
console.log('Hi!');
}
};7. Promise.allSettled()
等待所有 Promise 完成，無論成功與否。
const promises = [
fetch('/api/1'),
fetch('/api/2'),
fetch('/api/3')
];
const results = await Promise.allSettled(promises);8. BigInt
處理超大整數(shù)。
const bigNumber = 9007199254740991n;
const result = bigNumber + 1n;9. globalThis
統(tǒng)一的全局對象訪問方式。
// 在任何環(huán)境下都可用
console.log(globalThis);10. String.prototype.matchAll()
更強(qiáng)大的字符串匹配能力。
const str = 'test1test2test3';
const regexp = /test(\d)/g;
const matches = [...str.matchAll(regexp)];11. 邏輯賦值運(yùn)算符
簡化條件賦值操作。
// 邏輯與賦值
x &&= y; // 等同于 x && (x = y)
// 邏輯或賦值
x ||= y; // 等同于 x || (x = y)
// 空值合并賦值
x ??= y; // 等同于 x ?? (x = y)12. Promise.any()
返回第一個成功的 Promise。
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. 數(shù)字分隔符
提高大數(shù)字的可讀性。
const billion = 1_000_000_000;
const bytes = 0xFF_FF_FF_FF;14. String.prototype.replaceAll()
替換字符串中的所有匹配項。
15. WeakRef 和 FinalizationRegistry
更好的內(nèi)存管理機(jī)制。
16. 頂層 await
在模塊頂層使用 await。
17. 類靜態(tài)初始化塊
更靈活的類靜態(tài)成員初始化。
18. at() 方法
更直觀的數(shù)組索引訪問。
19. Object.hasOwn()
安全的屬性檢查方法。
20. 錯誤原因（Error Cause）
更好的錯誤追蹤。
21. Object.groupBy()
數(shù)組分組操作。
22. 正則表達(dá)式命名捕獲組
更清晰的正則表達(dá)式匹配結(jié)果。
23. Promise.withResolvers()
更優(yōu)雅的 Promise 控制。
24. Array 復(fù)制方法
方便的數(shù)組操作。
const arr = [1, 2, 3];
const copy = arr.toReversed(); // 不修改原數(shù)組
const sorted = arr.toSorted(); // 不修改原數(shù)組25. 裝飾器
增強(qiáng)類和類成員的功能。
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() {
// ...
}
}責(zé)任編輯：趙寧寧
來源：
JavaScript
