ECMAScript 2024 新特性

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.

ECMAScript 2024，第 15 版，添加了用于調(diào)整 ArrayBuffer 和 SharedArrayBuffer 大小和傳輸?shù)墓δ埽?添加了一個(gè)新的 RegExp /v 標(biāo)志，用于創(chuàng)建具有更高級功能的 RegExp，用于處理字符串集； 并介紹了用于構(gòu)造 Promise 的 Promise.withResolvers 便捷方法、用于聚合數(shù)據(jù)的 Object.groupBy 和 Map.groupBy 方法、用于異步等待共享內(nèi)存更改的 Atomics.waitAsync 方法以及 String.prototype.isWellFormed 和 String.prototype.toWellFormed 方法，用于檢查并確保字符串僅包含格式正確的 Unicode 。

一、 Promise.withResolvers ( )

This function returns an object with three properties: a new promise together with the resolve and reject functions associated with it.

該函數(shù)返回一個(gè)具有三個(gè)屬性的對象：一個(gè)新的 Promise 以及與其關(guān)聯(lián)的解決和拒絕函數(shù)。

1. 返回值

包含以下屬性的普通對象：

1.1. promise

一個(gè) Promise 對象。

1.2. resolve

一個(gè)函數(shù)，用于解決該 Promise 。

1.3. reject

一個(gè)函數(shù)，用于拒絕該 Promise 。

2. 示例

Promise.withResolvers() 的使用場景是，當(dāng)你有一個(gè) promise ，需要通過無法包裝在 promise 執(zhí)行器內(nèi)的某個(gè)事件監(jiān)聽器來解決或拒絕。

async function* readableToAsyncIterable(stream) {
  let { promise, resolve, reject } = Promise.withResolvers();
  stream.on("error", (error) => reject(error));
  stream.on("end", () => resolve());
  stream.on("readable", () => resolve());

  while (stream.readable) {
    await promise;
    let chunk;
    while ((chunk = stream.read())) {
      yield chunk;
    }
    ({ promise, resolve, reject } = Promise.withResolvers());
  }
}

3. 等價(jià)于

Promise.withResolvers() 完全等同于以下代碼：

let resolve, reject;
const promise = new Promise((res, rej) => {
  resolve = res;
  reject = rej;
});

使用 Promise.withResolvers() 關(guān)鍵的區(qū)別在于解決和拒絕函數(shù)現(xiàn)在與 Promise 本身處于同一作用域，而不是在執(zhí)行器中被創(chuàng)建和一次性使用。

4. 在非 Promise 構(gòu)造函數(shù)上調(diào)用 withResolvers()

Promise.withResolvers() 是一個(gè)通用方法。它可以在任何實(shí)現(xiàn)了與 Promise() 構(gòu)造函數(shù)相同簽名的構(gòu)造函數(shù)上調(diào)用。

例如，我們可以在一個(gè)將 console.log 作為 resolve 和 reject 函數(shù)傳入給 executor 的構(gòu)造函數(shù)上調(diào)用它：

class NotPromise {
  constructor(executor) {
    // “resolve”和“reject”函數(shù)和原生的 promise 的行為完全不同
    // 但 Promise.withResolvers() 只是返回它們，就像是原生的 promise 一樣
    executor(
      (value) => console.log("以", value, "解決"),
      (reason) => console.log("以", reason, "拒絕"),
    );
  }
}
const { promise, resolve, reject } = Promise.withResolvers.call(NotPromise);
resolve("hello");

二、 Object.groupBy ( items, callbackfn )

callbackfn is called with two arguments: the value of the element and the index of the element.

The return value of groupBy is an object that does not inherit from %Object.prototype%.

callbackfn 是一個(gè)接受兩個(gè)參數(shù)的函數(shù)。 groupBy 對 items 中的每個(gè)元素按升序調(diào)用一次 callbackfn ，并構(gòu)造一個(gè)新對象。 Callbackfn 返回的每個(gè)值都被強(qiáng)制轉(zhuǎn)換為屬性鍵。 對于每個(gè)這樣的屬性鍵，結(jié)果對象都有一個(gè)屬性，其鍵是該屬性鍵，其值是一個(gè)數(shù)組，其中包含回調(diào)函數(shù)返回值強(qiáng)制為該鍵的所有元素。

使用兩個(gè)參數(shù)調(diào)用 callbackfn ：元素的值和元素的索引。

groupBy 的返回值是一個(gè)不繼承自 Object.prototype 的對象。

1. 作用

Object.groupBy() 靜態(tài)方法根據(jù)提供的回調(diào)函數(shù)返回的字符串值對給定可迭代對象中的元素進(jìn)行分組。返回的對象具有每個(gè)組的單獨(dú)屬性，其中包含組中的元素的數(shù)組。

2. 參數(shù)

2.1. items

一個(gè)將進(jìn)行元素分組的可迭代對象（例如 Array ）。

2.2. callbackFn

對可迭代對象中的每個(gè)元素執(zhí)行的函數(shù)。它應(yīng)該返回一個(gè)值，可以被強(qiáng)制轉(zhuǎn)換成屬性鍵（字符串或 symbol ），用于指示當(dāng)前元素所屬的分組。該函數(shù)被調(diào)用時(shí)將傳入以下參數(shù)：

• element ：數(shù)組中當(dāng)前正在處理的元素。
• index ：正在處理的元素在數(shù)組中的索引。

3. 返回值

一個(gè)帶有所有分組屬性的 null 原型對象，每個(gè)屬性都分配了一個(gè)包含相關(guān)組元素的數(shù)組。

4. 示例

4.1. 根據(jù) element 元素分組

Object.groupBy([
  { name: "蘆筍", type: "蔬菜", quantity: 5 },
  { name: "香蕉", type: "水果", quantity: 0 },
  { name: "山羊", type: "肉", quantity: 23 },
  { name: "櫻桃", type: "水果", quantity: 5 },
  { name: "魚", type: "肉", quantity: 22 },
], ({name}) => name)
// 輸出
/**
{
    "蔬菜": [
        {
            "name": "蘆筍",
            "type": "蔬菜",
            "quantity": 5
        }
    ],
    "水果": [
        {
            "name": "香蕉",
            "type": "水果",
            "quantity": 0
        },
        {
            "name": "櫻桃",
            "type": "水果",
            "quantity": 5
        }
    ],
    "肉": [
        {
            "name": "山羊",
            "type": "肉",
            "quantity": 23
        },
        {
            "name": "魚",
            "type": "肉",
            "quantity": 22
        }
    ]
}
*/

4.2. 自定義分組

const myCallback = ({ quantity }) => {
  return quantity > 5 ? "ok" : "restock";
}

const result = Object.groupBy([
  { name: "蘆筍", type: "蔬菜", quantity: 5 },
  { name: "香蕉", type: "水果", quantity: 0 },
  { name: "山羊", type: "肉", quantity: 23 },
  { name: "櫻桃", type: "水果", quantity: 5 },
  { name: "魚", type: "肉", quantity: 22 },
], myCallback);
// 輸出
/**
{
    "restock": [
        {
            "name": "蘆筍",
            "type": "蔬菜",
            "quantity": 5
        },
        {
            "name": "香蕉",
            "type": "水果",
            "quantity": 0
        },
        {
            "name": "櫻桃",
            "type": "水果",
            "quantity": 5
        }
    ],
    "ok": [
        {
            "name": "山羊",
            "type": "肉",
            "quantity": 23
        },
        {
            "name": "魚",
            "type": "肉",
            "quantity": 22
        }
    ]
}
*/

三、 Map.groupBy ( items, callbackfn )

callbackfn is called with two arguments: the value of the element and the index of the element.

The return value of groupBy is a Map.

callbackfn 是一個(gè)接受兩個(gè)參數(shù)的函數(shù)。 groupBy 對 items 中的每個(gè)元素按升序調(diào)用一次回調(diào)函數(shù)，并構(gòu)造一個(gè)新的 Map 。 callbackfn 返回的每個(gè)值都用作 Map 中的鍵。 對于每個(gè)這樣的鍵，結(jié)果 Map 都有一個(gè)條目，其鍵是該鍵，其值是一個(gè)數(shù)組，其中包含 callbackfn 返回該鍵的所有元素。

使用兩個(gè)參數(shù)調(diào)用 callbackfn ：元素的值和元素的索引。

groupBy 的返回值是一個(gè) Map 。

1. 作用

Map.groupBy() 靜態(tài)方法使用提供的回調(diào)函數(shù)返回的值對給定可迭代對象中的元素進(jìn)行分組。最終返回的 Map 使用測試函數(shù)返回的唯一值作為鍵，可用于獲取每個(gè)組中的元素組成的數(shù)組。

2. 參數(shù)

2.1. items

一個(gè)將進(jìn)行元素分組的可迭代對象（例如 Array ）。

2.2. callbackFn

對可迭代對象中的每個(gè)元素執(zhí)行的函數(shù)。它應(yīng)該返回一個(gè)值（對象或原始類型）來表示當(dāng)前元素的分組。該函數(shù)被調(diào)用時(shí)將傳入以下參數(shù)：

• element ：數(shù)組中當(dāng)前正在處理的元素。
• index ：正在處理的元素在數(shù)組中的索引。

3. 返回值

一個(gè)包含了每一個(gè)組的鍵的 Map 對象，每個(gè)鍵都分配了一個(gè)包含關(guān)聯(lián)組元素的數(shù)組。

4. 示例

const restock = { restock: true };
const sufficient = { restock: false };
const result = Map.groupBy([
  { name: "蘆筍", type: "蔬菜", quantity: 9 },
  { name: "香蕉", type: "水果", quantity: 5 },
  { name: "山羊", type: "肉", quantity: 23 },
  { name: "櫻桃", type: "水果", quantity: 12 },
  { name: "魚", type: "肉", quantity: 22 },
], ({ quantity }) =>
  quantity < 6 ? restock : sufficient,
);
// 輸出 result Map
/**
new Map([
    [
        {
            "restock": false
        },
        [
            {
                "name": "蘆筍",
                "type": "蔬菜",
                "quantity": 9
            },
            {
                "name": "山羊",
                "type": "肉",
                "quantity": 23
            },
            {
                "name": "櫻桃",
                "type": "水果",
                "quantity": 12
            },
            {
                "name": "魚",
                "type": "肉",
                "quantity": 22
            }
        ]
    ],
    [
        {
            "restock": true
        },
        [
            {
                "name": "香蕉",
                "type": "水果",
                "quantity": 5
            }
        ]
    ]
])
*/

四、 Atomics.waitAsync ( typedArray, index, value, timeout )

This function returns a Promise that is resolved when the calling agent is notified or the the timeout is reached.

此函數(shù)返回一個(gè) Promise ，當(dāng)通知調(diào)用代理或達(dá)到超時(shí)時(shí)，該 Promise 會被解析。

1. 作用

Atomics.waitAsync() 靜態(tài)方法異步等待共享內(nèi)存的特定位置并返回一個(gè) Promise。

2. 參數(shù)

• typedArray ：基于 SharedArrayBuffer 的 Int32Array 或 BigInt64Array 。
• index ： typedArray 中要等待的位置。
• value ：要測試的期望值。
• timeout ：可選 等待時(shí)間，以毫秒為單位。 NaN （以及會被轉(zhuǎn)換為 NaN 的值，例如 undefined ）會被轉(zhuǎn)換為 Infinity 。負(fù)值會被轉(zhuǎn)換為 0。

3. 返回值

一個(gè) Object ，包含以下屬性：

• async ：一個(gè)布爾值，指示 value 屬性是否為 Promise 。
• value ：如果 async 是 false ，它將是一個(gè)內(nèi)容為 " not-equal " 或 " timed-out " 的字符串（僅當(dāng) timeout 參數(shù)為 0 時(shí)）。如果 async 是 true ，它將會是一個(gè) Promise ，其兌現(xiàn)值為一個(gè)內(nèi)容為 " ok " 或 " timed-out " 的字符串。這個(gè) promise 永遠(yuǎn)不會被拒絕。

4. 異常

• TypeError ：如果 typedArray 不是一個(gè)基于 SharedArrayBuffer 的 Int32Array 或 BigInt64Array ，則拋出該異常。
• RangeError ：如果 index 超出 typedArray 的范圍，則拋出該異常。

5. 示例

給定一個(gè)共享的 Int32Array 。

const sab = new SharedArrayBuffer(1024);
const int32 = new Int32Array(sab);

令一個(gè)讀取線程休眠并在位置 0 處等待，預(yù)期該位置的值為 0。 result.value 將是一個(gè) promise 。

const result = Atomics.waitAsync(int32, 0, 0, 1000);
// { async: true, value: Promise {} }

在該讀取線程或另一個(gè)線程中，對內(nèi)存位置 0 調(diào)用以令該 promise 為 " ok "。

Atomics.notify(int32, 0);
// { async: true, value: Promise {: 'ok'} }

如果它沒有為 " ok "，則共享內(nèi)存該位置的值不符合預(yù)期（ value 將是 " not-equal " 而不是一個(gè) promise ）或已經(jīng)超時(shí)（該 promise 將為 " time-out "）。

五、 String.prototype.isWellFormed ( )

1. 作用

isWellFormed() 方法返回一個(gè)表示該字符串是否包含單獨(dú)代理項(xiàng)的布爾值。

1.1. 單獨(dú)代理項(xiàng)

單獨(dú)代理項(xiàng)（lone surrogate） 是指滿足以下描述之一的 16 位碼元：

• 它在范圍 0xD800 到 0xDBFF 內(nèi)（含）（即為前導(dǎo)代理），但它是字符串中的最后一個(gè)碼元，或者下一個(gè)碼元不是后尾代理。
• 它在范圍 0xDC00 到 0xDFFF 內(nèi)（含）（即為后尾代理），但它是字符串中的第一個(gè)碼元，或者前一個(gè)碼元不是前導(dǎo)代理。

2. 返回值

如果字符串不包含單獨(dú)代理項(xiàng)，返回 true ，否則返回 false 。

3. 示例

const strings = [
  // 單獨(dú)的前導(dǎo)代理
  "ab\uD800",
  "ab\uD800c",
  // 單獨(dú)的后尾代理
  "\uDFFFab",
  "c\uDFFFab",
  // 格式正確
  "abc",
  "ab\uD83D\uDE04c",
];

for (const str of strings) {
  console.log(str.isWellFormed());
}
// 輸出：
// false
// false
// false
// false
// true
// true

六、 String.prototype.toWellFormed ( )

1. 作用

toWellFormed() 方法返回一個(gè)字符串，其中該字符串的所有單獨(dú)代理項(xiàng)都被替換為 Unicode 替換字符 U+FFFD 。

2. 返回值

新的字符串是原字符串的一個(gè)拷貝，其中所有的單獨(dú)代理項(xiàng)被替換為 Unicode 替換字符 U+FFFD 。

3. 示例

const strings = [
  // 單獨(dú)的前導(dǎo)代理
  "ab\uD800",
  "ab\uD800c",
  // 單獨(dú)的后尾代理
  "\uDFFFab",
  "c\uDFFFab",
  // 格式正確
  "abc",
  "ab\uD83D\uDE04c",
];

for (const str of strings) {
  console.log(str.toWellFormed());
}
// Logs:
// "ab?"
// "ab?c"
// "?ab"
// "c?ab"
// "abc"
// "ab?c"

七、RegExp /v

1. 作用

/v 解鎖了對擴(kuò)展字符類的支持，包括以下功能：

• 字符串的 Unicode 屬性
• 集合表示法+字符串文字語法
• 改進(jìn)的不區(qū)分大小寫的匹配

2. 示例

2.1. 基礎(chǔ)示例

const re = /…/v;

2.2. Unicode

const re = /^\p{RGI_Emoji}$/v;
re.test('?'); // '\u26BD'
// → true ?
re.test('?????'); // '\u{1F468}\u{1F3FE}\u200D\u2695\uFE0F'
// → true ?

v 標(biāo)志支持字符串的以下 Unicode 屬性：

• Basic_Emoji
• Emoji_Keycap_Sequence
• RGI_Emoji_Modifier_Sequence
• RGI_Emoji_Flag_Sequence
• RGI_Emoji_Tag_Sequence
• RGI_Emoji_ZWJ_Sequence
• RGI_Emoji

隨著 Unicode 標(biāo)準(zhǔn)定義了字符串的其他屬性，受支持的屬性列表將來可能會增加。

2.3. 結(jié)合 --

/[\p{Script_Extensions=Greek}--π]/v.test('π'); // → false
/[\p{Script_Extensions=Greek}--[αβγ]]/v.test('α'); // → false
/[\p{Script_Extensions=Greek}--[α-γ]]/v.test('β'); // → false
/[\p{Decimal_Number}--[0-9]]/v.test('?'); // → true
/[\p{Decimal_Number}--[0-9]]/v.test('4'); // → false
/^\p{RGI_Emoji_Tag_Sequence}$/v.test('???????'); // → true
/^[\p{RGI_Emoji_Tag_Sequence}--\q{???????}]$/v.test('???????'); // → false

2.4. 結(jié)合 &&

const re = /[\p{Script_Extensions=Greek}&&\p{Letter}]/v;
re.test('π'); // → true
re.test('?'); // → false

const re2 = /[\p{White_Space}&&\p{ASCII}]/v;
re2.test('\n'); // → true
re2.test('\u2028'); // → false

3. V 標(biāo)志與 U 標(biāo)志有何不同

1. 使用新語法的無效模式現(xiàn)在變得有效
2. 一些以前有效的模式現(xiàn)在是錯(cuò)誤的，特別是那些字符類包含未轉(zhuǎn)義特殊字符 ( ) [ { } / - | 的模式或雙標(biāo)點(diǎn)符號
3. u 標(biāo)志存在令人困惑的不區(qū)分大小寫的匹配行為。 v 標(biāo)志具有不同的、改進(jìn)的語義

引用

• 【 ecma262 】
• 【 MDN 】