ES2024新特性完全指南：Object.groupBy、Promise.withResolvers等核心功能详解（2026最新）

1
// 传统方式：reduce
2
const users = [
3
  { name: 'Alice', role: 'admin' },
4
  { name: 'Bob', role: 'user' },
5
  { name: 'Charlie', role: 'admin' },
6
  { name: 'David', role: 'guest' }
7
];
8

9
const grouped = users.reduce((acc, user) => {
10
  const key = user.role;
11
  if (!acc[key]) {
12
    acc[key] = [];
13
  }
14
  acc[key].push(user);
15
  return acc;
16
}, {});
17

18
console.log(grouped);
19
// { admin: [Alice, Charlie], user: [Bob], guest: [David] }

1
// 场景：按复杂对象分组
2
const products = [
3
  { name: 'iPhone', category: { id: 1, name: '手机' } },
4
  { name: 'MacBook', category: { id: 1, name: '手机' } },
5
  { name: 'iPad', category: { id: 2, name: '平板' } }
6
];
7

8
// Object.groupBy 无法处理对象键
9
const groupedObj = Object.groupBy(products, p => p.category);
10
// 问题：对象被转为字符串 "[object Object]"
11

12
// Map.groupBy 可以保留对象键
13
const groupedMap = Map.groupBy(products, p => p.category);
14

15
console.log(groupedMap);
16
// Map {
17
//   { id: 1, name: '手机' } => [iPhone, MacBook],
18
//   { id: 2, name: '平板' } => [iPad]
19
// }

1
Map.groupBy(items, callbackFn)

1
// 传统方式：需要外部变量
2
let resolve, reject;
3

4
const promise = new Promise((res, rej) => {
5
  resolve = res;
6
  reject = rej;
7
});
8

9
// 使用
10
setTimeout(() => {
11
  resolve('done');
12
}, 1000);

1
const { promise, resolve, reject } = Promise.withResolvers();

1
// 传统：5行
2
let resolve, reject;
3
const promise = new Promise((res, rej) => {
4
  resolve = res;
5
  reject = rej;
6
});
7

8
// ES2024：1行
9
const { promise, resolve, reject } = Promise.withResolvers();

1
// 传统ArrayBuffer：固定大小
2
const buffer = new ArrayBuffer(1024);
3

4
// 无法调整大小
5
buffer.resize(2048); // TypeError: ArrayBuffer.resize is not a function

1
// ES2024：可调整大小的ArrayBuffer
2
const buffer = new ArrayBuffer(1024, { maxByteLength: 4096 });
3

4
console.log(buffer.resizable); // true
5
console.log.buffer.maxByteLength); // 4096
6

7
// 动态调整大小
8
buffer.resize(2048);
9
console.log(buffer.byteLength); // 2048
10

11
buffer.resize(512);
12
console.log(buffer.byteLength); // 512
13

14
// 不能超过maxByteLength
15
buffer.resize(8192); // RangeError

1
new ArrayBuffer(length, { maxByteLength: maxLength })

1
// ES2024：转移所有权
2
const buffer1 = new ArrayBuffer(1024);
3
const view1 = new Uint8Array(buffer1);
4
view1[0] = 42;
5

6
// 转移到新buffer
7
const buffer2 = buffer1.transfer();
8

9
console.log(buffer1.byteLength); // 0（已分离）
10
console.log(buffer2.byteLength); // 1024
11

12
const view2 = new Uint8Array(buffer2);
13
console.log(view2[0]); // 42（数据保留）

1
buffer.transfer()
2
buffer.transfer(newLength)

1
// SharedArrayBuffer也支持resizable
2
const sharedBuffer = new SharedArrayBuffer(1024, { maxByteLength: 4096 });
3

4
sharedBuffer.grow(2048);
5
console.log(sharedBuffer.byteLength); // 2048

1
// 传统方式：u flag
2
const regex = /[\p{L}]/u; // 匹配任何字母
3

4
// 问题：集合操作复杂
5
// 匹配字母但排除汉字
6
const regex2 = /[\p{L}--[^\p{Script=Han}]]/u; // 语法不支持

1
// ES2024：v flag
2
const regex = /[\p{L}]/v;
3

4
// 集合操作：差集
5
const regex2 = /[\p{L}--\p{Script=Han}]/v;
6

7
// 集合操作：交集
8
const regex3 = /[\p{L&&\p{Script=Latin}]/v;
9

10
// 集合操作：并集
11
const regex4 = /[\p{L}\p{N}]/v; // 字母或数字

1
/pattern/v

1
// Atomics.wait：阻塞主线程
2
const sharedBuffer = new SharedArrayBuffer(4);
3
const view = new Int32Array(sharedBuffer);
4

5
// 阻塞等待（不能在主线程使用）
6
Atomics.wait(view, 0, 0, 1000);

1
// ES2024：异步等待
2
const sharedBuffer = new SharedArrayBuffer(4);
3
const view = new Int32Array(sharedBuffer);
4

5
// 异步等待（不阻塞）
6
const result = Atomics.waitAsync(view, 0, 0, 1000);
7

8
console.log(result.async); // true
9
console.log(result.value); // Promise
10

11
await result.value;
12
// "ok" - 值已改变
13
// "timed-out" - 超时

1
Atomics.waitAsync(typedArray, index, value, timeout)

1
// 传统方式：手动实现
2
const setA = new Set([1, 2, 3]);
3
const setB = new Set([2, 3, 4]);
4

5
// 交集
6
const intersection = new Set([...setA].filter(x => setB.has(x));
7

8
// 并集
9
const union = new Set([...setA, ...setB]);
10

11
// 差集
12
const difference = new Set([...setA].filter(x => !setB.has(x));

1
// 交集
2
const intersection = setA.intersection(setB);
3
// Set { 2, 3 }
4

5
// 并集
6
const union = setA.union(setB);
7
// Set { 1, 2, 3, 4 }
8

9
// 差集
10
const difference = setA.difference(setB);
11
// Set { 1 }
12

13
// 对称差集（异或）
14
const symmetricDifference = setA.symmetricDifference(setB);
15
// Set { 1, 4 }
16

17
// 子集判断
18
setA.isSubsetOf(setB); // false
19
setA.isSubsetOf(setA); // true
20

21
// 超集判断
22
setA.isSupersetOf(setB); // false
23

24
// 无交集判断
25
setA.isDisjointFrom(setB); // false

1
// Float32Array：32位浮点数
2
const f32 = new Float32Array([1.5, 2.5]);
3
// 每个元素占用4字节

1
// ES2024：16位半精度浮点数
2
const f16 = new Float16Array([1.5, 2.5]);
3
// 每个元素占用2字节
4

5
console.log(f16.BYTES_PER_ELEMENT); // 2

1
// Object.groupBy polyfill
2
if (!Object.groupBy) {
3
  Object.groupBy = function(items, callbackFn) {
4
    const result = {};
5
    for (const item of items) {
6
      const key = callbackFn(item);
7
      if (!result[key]) {
8
        result[key] = [];
9
      }
10
      result[key].push(item);
11
    }
12
    return result;
13
  };
14
}
15

16
// Map.groupBy polyfill
17
if (!Map.groupBy) {
18
  Map.groupBy = function(items, callbackFn) {
19
    const result = new Map();
20
    for (const item of items) {
21
      const key = callbackFn(item);
22
      if (!result.has(key)) {
23
        result.set(key, []);
24
      }
25
      result.get(key).push(item);
26
    }
27
    return result;
28
  };
29
}
30

31
// Promise.withResolvers polyfill
32
if (!Promise.withResolvers) {
33
  Promise.withResolvers = function() {
34
    let resolve, reject;
35
    const promise = new Promise((res, rej) => {
36
      resolve = res;
37
      reject = rej;
38
    });
39
    return { promise, resolve, reject };
40
  };
41
}

1
// 检测特性支持
2
const features = {
3
  'Object.groupBy': typeof Object.groupBy === 'function',
4
  'Map.groupBy': typeof Map.groupBy === 'function',
5
  'Promise.withResolvers': typeof Promise.withResolvers === 'function',
6
  'ArrayBuffer resizable': 'resizable' in ArrayBuffer.prototype,
7
  'RegExp v flag': (() => {
8
    try {
9
      new RegExp('', 'v');
10
      return true;
11
    } catch {
12
      return false;
13
    }
14
  })(),
15
  'Atomics.waitAsync': typeof Atomics.waitAsync === 'function'
16
};
17

18
console.table(features);