八个 ES2024 实用特性，让代码量减少 60%-51CTO.COM

ECMAScript（简称 ES）作为 JavaScript 的标准，每年都会推出新的特性，不断优化我们的开发体验，分享几个实用的新特性。

1. Temporal API - 现代化的日期时间处理

// 旧写法
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;1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

Temporal API 提供了更直观和不可变的日期时间操作方式。它解决了传统 Date API 的许多问题，比如更容易处理时区、更清晰的方法名称，以及更可预测的行为。

2. 数组分组操作 - 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);1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

这个新特性极大简化了数据分组操作。Object.groupBy 返回普通对象，而 Map.groupBy 返回 Map 实例。它们都接受一个回调函数来决定分组的键，避免了手动实现分组逻辑。

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]1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

直接返回索引位置，无需再处理匹配结果。

4. Atomics.waitAsync - 异步等待

// 旧写法
while (Atomics.load(sharedInt32Array, 0) !== 1) {
  await new Promise(resolve => setTimeout(resolve, 0));
}

// ES2024写法
await Atomics.waitAsync(sharedInt32Array, 0, 0).value;1.
2.
3.
4.
5.
6.
7.

waitAsync 提供了一种非阻塞方式来等待共享内存的变化，避免了手动实现轮询逻辑，更适合在现代 Web Workers 中使用。

5. ArrayBuffer.prototype.transfer - 高效内存转移

// 旧写法
const newBuffer = new ArrayBuffer(buffer.byteLength);
new Uint8Array(newBuffer).set(new Uint8Array(buffer));

// ES2024写法
const newBuffer = buffer.transfer();1.
2.
3.
4.
5.
6.

transfer() 方法提供了零拷贝方式转移 ArrayBuffer 的所有权，原buffer会被置为0长度。这在处理大型二进制数据时特别有用，可以显著提高性能。

6. 结构化错误堆栈 - 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 }
  });
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

新的错误处理方式支持结构化堆栈信息，使错误追踪和调试更容易。通过 cause 属性可以保留完整的错误链，structured: true 提供更详细的堆栈信息。

7. 弱引用集合方法改进

// 旧写法
const weakRef = new WeakRef(obj);
if (weakRef.deref()) {
  // 使用对象
}

// ES2024写法
const weakSet = new WeakSet([obj]);
if (weakSet.has(obj)) {
  weakSet.cleanup(); // 显式清理失效引用
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

新增的 cleanup() 方法允许显式触发垃圾回收，避免内存泄露。

8. Promise.withResolvers() - 简化 Promise 创建

// 旧写法
let resolvePromise, rejectPromise;
const promise = new Promise((resolve, reject) => {
  resolvePromise = resolve;
  rejectPromise = reject;
});

// ES2024写法
const { promise, resolve, reject } = Promise.withResolvers();1.
2.
3.
4.
5.
6.
7.
8.
9.

withResolvers() 让我们在一行代码中同时获取 promise 及其控制函数，避免了使用闭包来获取 resolve 和 reject 函数的复杂写法。特别适合需要在外部控制 Promise 状态的场景。