概述

ECMAScript2024于2024年6月26日正式发布， 本文会介绍ECMAScript2024(ES15)，即ECMAScript的第15个版本的新特性。

以下摘自官网：ecma-262 (opens new window)

ECMAScript 2024, the 15th edition, added facilities for resizing and transferring ArrayBuffers and SharedArrayBuffers; added a new RegExp /v flag for creating RegExps with more advanced features for working with sets of strings; and introduced the Promise.withResolvers convenience method for constructing Promises, the Object.groupBy and Map.groupBy methods for aggregating data, the Atomics.waitAsync method for asynchronously waiting for a change to shared memory, and the String.prototype.isWellFormed and String.prototype.toWellFormed methods for checking and ensuring that strings contain only well-formed Unicode.

ECMAScript2024的新特性如下：

• Group By分组：Object.groupBy和Map.group
• Promise.withResolvers
• 正则表达式标志 /v
• ArrayBuffers和SharedArrayBuffers
• String.prototype.isWellFormed/toWellFormed
• Atomics.waitAsync()

Group By分组

ES2024引入Object.groupBy和Map.groupBy方法就是用于根据指定的条件对对象或可迭代对象进行分组。需要注意的是Object.groupBy方法返回的对象是没有原型的对象，无法继承Object.prototype上的任何属性或方法；另外它的第二个参数回调函数应该返回一个字符串或Symbol类型。

const animals = [
    { name: "Lion", type: "Mammal" },
    { name: "Shark", type: "Fish" },
    { name: "Elephant", type: "Mammal" }
];
// 使用Object.groupBy
const objectGrouped = Object.groupBy(animals, animal => animal.type);
console.log(objectGrouped);
// 输出 { Mammal: [ { name: 'Lion', type: 'Mammal' }, { name: 'Elephant', type: 'Mammal' } ], Fish: [ { name: 'Shark', type: 'Fish' } ] }

// 使用Map.groupBy
const mapGrouped = new Map();
Map.groupBy(animals, animal => animal.type, mapGrouped);
console.log(mapGrouped);
// 输出 Map(2) { 'Mammal' => [ { name: 'Lion', type: 'Mammal' }, { name: 'Elephant', type: 'Mammal' } ], 'Fish' => [ { name: 'Shark', type: 'Fish' } ] }

兼容性

Promise.withResolvers

ES2024引入Promise.withResolvers方法，用于创建一个Promise对象，该对象的resolve和reject方法可以在任何时候调用。使用示例如下

const { promise, resolve, reject } = Promise.withResolvers();  
  
// 在这里可以使用 resolve 和 reject 函数  
setTimeout(() => resolve('成功！'), 8000);  
  
promise.then(value => {  
  console.log(value); 
});

其中resolve和reject与promise本身是处于同一作用域，而不是在执行器中被创建和一次性使用，这对于更细粒度控制Promise状态非常有用。

兼容性

正则表达式v标志

ES2024提出的v标志是u标志的超集，且v还提供另外两个功能：

• 字符串的Unicode属性：通过Unicode属性转义，可以使用字符串的属性
• 设置符号：允许在字符类之间进行集合操作

const str = "hello world";
const regex = /\w+/v;
const match = str.match(regex);
console.log(match); // 输出["hello", "world"]

ArrayBuffers与SharedArrayBuffers

ArrayBuffers

• ArrayBuffer.prototype.resize：用于调整ArrayBuffer的实例大小，以字节为单位，并且该指定的大小不能大于该实例的maxByteLength
• ArrayBuffer.prototype.transfer：将当前ArrayBuffer的字节复制到一个新的ArrayBuffer对象中

SharedArrayBuffers

SharedArrayBuffer通用可调整大小，但是它只能扩大而不能缩小，而且也不能转移。

// 创建一个可调整大小的ArrayBuffer
const buffer = new ArrayBuffer(8, { maxByteLength: 16 });
buffer.resize(12);
console.log(buffer.byteLength); // 输出12

// 创建一个可调整大小的SharedArrayBuffer
const sharedBuffer = new SharedArrayBuffer(8, { maxByteLength: 16 });
sharedBuffer.grow(12);
console.log(sharedBuffer.byteLength); // 输出12

// 转移ArrayBuffer所有权
const sourceBuffer = new ArrayBuffer(8);
const targetBuffer = sourceBuffer.transfer();
console.log(sourceBuffer.byteLength); // 输出0
console.log(targetBuffer.byteLength); // 输出8

兼容性

isWellFormed/toWellFormed

• isWellFormed：用于检查一个UTF-16编码字符串是否包含孤立的代理项
• toWellFormed：用于将一个UTF-16编码字符串中的孤立代理项替换为替换字符U+FFFD

const badString = '\uD83D\uDCA9\uffff'; // 包含非法字符
console.log(badString.isWellFormed()); // 输出false
const wellFormedString = badString.toWellFormed();
console.log(wellFormedString); // 输出 �\uDCA9\uffff，将非法字符替换为替换字符

兼容性

Atomics.waitAsync

Atomics.waitAsync静态方法异步等待共享内存的特定位置并返回一个Promise。

const { SharedArrayBuffer, Atomics } = require('worker_threads');
const sab = new SharedArrayBuffer(4);
const int32Array = new Int32Array(sab);
int32Array[0] = 0;

Atomics.waitAsync(int32Array, 0, 0).then(() => {
    console.log('Shared memory has changed');
});

// 在另一个线程或时机修改共享内存
setTimeout(() => {
    Atomics.store(int32Array, 0, 1);
}, 1000);

兼容性