八個(gè) ES2024 實(shí)用特性，讓代碼量減少 60%
ECMAScript（簡稱 ES）作為 JavaScript 的標(biāo)準(zhǔn)，每年都會(huì)推出新的特性，不斷優(yōu)化我們的開發(fā)體驗(yàn)，分享幾個(gè)實(shí)用的新特性。
1. Temporal API - 現(xiàn)代化的日期時(shí)間處理
// 舊寫法
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1; // 注意 month 是從 0 開始的
const day = now.getDate();
// ES2024寫法
const now = Temporal.Now.plainDateTimeISO();
const year = now.year;
const month = now.month;
const day = now.day;Temporal API 提供了更直觀和不可變的日期時(shí)間操作方式。它解決了傳統(tǒng) Date API 的許多問題，比如更容易處理時(shí)區(qū)、更清晰的方法名稱，以及更可預(yù)測(cè)的行為。
2. 數(shù)組分組操作 - Object.groupBy 和 Map.groupBy
// 舊寫法
const groups = users.reduce((acc, user) => {
if (!acc[user.role]) {
acc[user.role] = [];
}
acc[user.role].push(user);
return acc;
}, {});
// ES2024寫法
const groups = Object.groupBy(users, (user) => user.role);
const groupsMap = Map.groupBy(users, (user) => user.role);這個(gè)新特性極大簡化了數(shù)據(jù)分組操作。Object.groupBy 返回普通對(duì)象，而 Map.groupBy 返回 Map 實(shí)例。它們都接受一個(gè)回調(diào)函數(shù)來決定分組的鍵，避免了手動(dòng)實(shí)現(xiàn)分組邏輯。
3. RegExp match indices
// 舊寫法
const str = "hello world";
const regexp = /world/
const match = str.match(regexp);
const start = match.index;
// ES2024寫法
const str = "hello world";
const regexp = /world/d;
const match = str.match(regexp);
const start = match.indices[0][0]直接返回索引位置，無需再處理匹配結(jié)果。
4. Atomics.waitAsync - 異步等待
// 舊寫法
while (Atomics.load(sharedInt32Array, 0) !== 1) {
await new Promise(resolve => setTimeout(resolve, 0));
}
// ES2024寫法
await Atomics.waitAsync(sharedInt32Array, 0, 0).value;waitAsync 提供了一種非阻塞方式來等待共享內(nèi)存的變化，避免了手動(dòng)實(shí)現(xiàn)輪詢邏輯，更適合在現(xiàn)代 Web Workers 中使用。
5. ArrayBuffer.prototype.transfer - 高效內(nèi)存轉(zhuǎn)移
// 舊寫法
const newBuffer = new ArrayBuffer(buffer.byteLength);
new Uint8Array(newBuffer).set(new Uint8Array(buffer));
// ES2024寫法
const newBuffer = buffer.transfer();transfer() 方法提供了零拷貝方式轉(zhuǎn)移 ArrayBuffer 的所有權(quán)，原buffer會(huì)被置為0長度。這在處理大型二進(jìn)制數(shù)據(jù)時(shí)特別有用，可以顯著提高性能。
6. 結(jié)構(gòu)化錯(cuò)誤堆棧 - Error.prototype.cause
// 舊寫法
try {
doSomething();
} catch (error) {
console.error('Operation failed:', error);
throw error;
}
// ES2024寫法
try {
doSomething();
} catch (error) {
throw new Error('Operation failed', {
cause: error,
stack: { structured: true }
});
}新的錯(cuò)誤處理方式支持結(jié)構(gòu)化堆棧信息，使錯(cuò)誤追蹤和調(diào)試更容易。通過 cause 屬性可以保留完整的錯(cuò)誤鏈，structured: true 提供更詳細(xì)的堆棧信息。
7. 弱引用集合方法改進(jìn)
// 舊寫法
const weakRef = new WeakRef(obj);
if (weakRef.deref()) {
// 使用對(duì)象
}
// ES2024寫法
const weakSet = new WeakSet([obj]);
if (weakSet.has(obj)) {
weakSet.cleanup(); // 顯式清理失效引用
}新增的 cleanup() 方法允許顯式觸發(fā)垃圾回收，避免內(nèi)存泄露。
8. Promise.withResolvers() - 簡化 Promise 創(chuàng)建
// 舊寫法
let resolvePromise, rejectPromise;
const promise = new Promise((resolve, reject) => {
resolvePromise = resolve;
rejectPromise = reject;
});
// ES2024寫法
const { promise, resolve, reject } = Promise.withResolvers();withResolvers() 讓我們?cè)谝恍写a中同時(shí)獲取 promise 及其控制函數(shù)，避免了使用閉包來獲取 resolve 和 reject 函數(shù)的復(fù)雜寫法。特別適合需要在外部控制 Promise 狀態(tài)的場(chǎng)景。
