ES 2024 新特性

日升_rs發表於2024-05-13

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 版，新增了用於調整 ArrayBuffer 和 SharedArrayBuffer 大小和傳輸的功能；新增了一個新的 RegExp /v 標誌，用於建立具有更高階功能的 RegExp，用於處理字串集；並介紹了用於構造 Promise 的 Promise.withResolvers 便捷方法、用於聚合資料的 Object.groupBy 和 Map.groupBy 方法、用於非同步等待共享記憶體更改的 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.

該函式返回一個具有三個屬性的物件：一個新的 Promise 以及與其關聯的解決和拒絕函式。

1. 返回值

包含以下屬性的普通物件：

1.1. promise

一個 Promise 物件。

1.2. resolve

一個函式，用於解決該 Promise。

1.3. reject

一個函式，用於拒絕該 Promise。

2. 示例

Promise.withResolvers() 的使用場景是，當你有一個 promise，需要透過無法包裝在 promise 執行器內的某個事件監聽器來解決或拒絕。

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. 等價於

Promise.withResolvers() 完全等同於以下程式碼：

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

使用 Promise.withResolvers() 關鍵的區別在於解決和拒絕函式現在與 Promise 本身處於同一作用域，而不是在執行器中被建立和一次性使用。

4. 在非 Promise 建構函式上呼叫 withResolvers()

Promise.withResolvers() 是一個通用方法。它可以在任何實現了與 Promise() 建構函式相同簽名的建構函式上呼叫。

例如，我們可以在一個將 console.log 作為 resolve 和 reject 函式傳入給 executor 的建構函式上呼叫它：

class NotPromise {
  constructor(executor) {
    // “resolve”和“reject”函式和原生的 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 是一個接受兩個引數的函式。 groupBy 對 items 中的每個元素按升序呼叫一次 callbackfn，並構造一個新物件。 Callbackfn 返回的每個值都被強制轉換為屬性鍵。對於每個這樣的屬性鍵，結果物件都有一個屬性，其鍵是該屬性鍵，其值是一個陣列，其中包含回撥函式返回值強制為該鍵的所有元素。

使用兩個引數呼叫 callbackfn：元素的值和元素的索引。

groupBy 的返回值是一個不繼承自 Object.prototype 的物件。

1. 作用

Object.groupBy() 靜態方法根據提供的回撥函式返回的字串值對給定可迭代物件中的元素進行分組。返回的物件具有每個組的單獨屬性，其中包含組中的元素的陣列。

2. 引數

2.1. items

一個將進行元素分組的可迭代物件（例如 Array）。

2.2. callbackFn

對可迭代物件中的每個元素執行的函式。它應該返回一個值，可以被強制轉換成屬性鍵（字串或 symbol），用於指示當前元素所屬的分組。該函式被呼叫時將傳入以下引數：

element：陣列中當前正在處理的元素。
index：正在處理的元素在陣列中的索引。

3. 返回值

一個帶有所有分組屬性的 null 原型物件，每個屬性都分配了一個包含相關組元素的陣列。

4. 示例

4.1. 根據 element 元素分組

Object.groupBy([
  { name: "蘆筍", type: "蔬菜", quantity: 5 },
  { name: "香蕉", type: "水果", quantity: 0 },
  { name: "山羊", type: "肉", quantity: 23 },
  { name: "櫻桃", type: "水果", quantity: 5 },
  { name: "魚", type: "肉", quantity: 22 },
], ({type}) => type)
// 輸出
/**
{
    "蔬菜": [
        {
            "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 是一個接受兩個引數的函式。 groupBy 對 items 中的每個元素按升序呼叫一次回撥函式，並構造一個新的 Map。 callbackfn 返回的每個值都用作 Map 中的鍵。對於每個這樣的鍵，結果 Map 都有一個條目，其鍵是該鍵，其值是一個陣列，其中包含 callbackfn 返回該鍵的所有元素。

使用兩個引數呼叫 callbackfn：元素的值和元素的索引。

groupBy 的返回值是一個 Map。

1. 作用

Map.groupBy() 靜態方法使用提供的回撥函式返回的值對給定可迭代物件中的元素進行分組。最終返回的 Map 使用測試函式返回的唯一值作為鍵，可用於獲取每個組中的元素組成的陣列。

2. 引數

2.1. items

一個將進行元素分組的可迭代物件（例如 Array）。

2.2. callbackFn

對可迭代物件中的每個元素執行的函式。它應該返回一個值（物件或原始型別）來表示當前元素的分組。該函式被呼叫時將傳入以下引數：

element：陣列中當前正在處理的元素。
index：正在處理的元素在陣列中的索引。

3. 返回值

一個包含了每一個組的鍵的 Map 物件，每個鍵都分配了一個包含關聯組元素的陣列。

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.

此函式返回一個 Promise，當通知呼叫代理或達到超時時，該 Promise 會被解析。

1. 作用

Atomics.waitAsync() 靜態方法非同步等待共享記憶體的特定位置並返回一個 Promise。

2. 引數

typedArray：基於 SharedArrayBuffer 的 Int32Array 或 BigInt64Array。
index：typedArray 中要等待的位置。
value：要測試的期望值。
timeout：可選等待時間，以毫秒為單位。NaN（以及會被轉換為 NaN 的值，例如 undefined）會被轉換為 Infinity。負值會被轉換為 0。

3. 返回值

一個 Object，包含以下屬性：

async：一個布林值，指示 value 屬性是否為 Promise。
value：如果 async 是 false，它將是一個內容為 "not-equal" 或 "timed-out" 的字串（僅當 timeout 引數為 0 時）。如果 async 是 true，它將會是一個 Promise，其兌現值為一個內容為 "ok" 或 "timed-out" 的字串。這個 promise 永遠不會被拒絕。

4. 異常

TypeError：如果 typedArray 不是一個基於 SharedArrayBuffer 的 Int32Array 或 BigInt64Array，則丟擲該異常。
RangeError：如果 index 超出 typedArray 的範圍，則丟擲該異常。

5. 示例

給定一個共享的 Int32Array。

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

令一個讀取執行緒休眠並在位置 0 處等待，預期該位置的值為 0。result.value 將是一個 promise。

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

在該讀取執行緒或另一個執行緒中，對記憶體位置 0 呼叫以令該 promise 為 "ok"。

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

如果它沒有為 "ok"，則共享記憶體該位置的值不符合預期（value 將是 "not-equal" 而不是一個 promise）或已經超時（該 promise 將為 "time-out"）。

五、String.prototype.isWellFormed ( )

1. 作用

isWellFormed() 方法返回一個表示該字串是否包含單獨代理項的布林值。

1.1. 單獨代理項

單獨代理項（lone surrogate） 是指滿足以下描述之一的 16 位碼元：

它在範圍 0xD800 到 0xDBFF 內（含）（即為前導代理），但它是字串中的最後一個碼元，或者下一個碼元不是後尾代理。
它在範圍 0xDC00 到 0xDFFF 內（含）（即為後尾代理），但它是字串中的第一個碼元，或者前一個碼元不是前導代理。

2. 返回值

如果字串不包含單獨代理項，返回 true，否則返回 false。

3. 示例

const strings = [
  // 單獨的前導代理
  "ab\uD800",
  "ab\uD800c",
  // 單獨的後尾代理
  "\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() 方法返回一個字串，其中該字串的所有單獨代理項都被替換為 Unicode 替換字元 U+FFFD。

2. 返回值

新的字串是原字串的一個複製，其中所有的單獨代理項被替換為 Unicode 替換字元 U+FFFD。

3. 示例

const strings = [
  // 單獨的前導代理
  "ab\uD800",
  "ab\uD800c",
  // 單獨的後尾代理
  "\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 解鎖了對擴充套件字元類的支援，包括以下功能：

字串的 Unicode 屬性
集合表示法+字串文字語法
改進的不區分大小寫的匹配

2. 示例

2.1. 基礎示例

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 標誌支援字串的以下 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 標準定義了字串的其他屬性，受支援的屬性列表將來可能會增加。

2.3. 結合 --

/[\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. 結合 &&

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 標誌與 U 標誌有何不同

使用新語法的無效模式現在變得有效
一些以前有效的模式現在是錯誤的，特別是那些字元類包含未轉義特殊字元 ( ) [ { } / - | 的模式或雙標點符號
u 標誌存在令人困惑的不區分大小寫的匹配行為。 v 標誌具有不同的、改進的語義

引用

【ecma262】
【MDN】

2024-05-10 ES6新特性小總結
2024-05-10
ES2023新特性
2024-04-07
ES2022新特性
2024-04-07
ES6新特性
2019-04-28
ES2021 新特性！
2021-07-10
ES-2019新特性
2019-02-11
ES的那些新特性
2018-06-26
ES7 ES8 新特性
2018-12-17
ES7-ES9新特性概述
2018-08-28
【譯】ES2018 新特性：Rest/Spread 特性
2018-07-09
REST
ES7 ES8 的新特性（部分）
2018-12-26
[譯] ES2018（ES9）的新特性
2018-06-20
[譯]ES2018（ES9）的新特性
2018-07-06
ECMA 2023(ES14) 新特性
2024-05-22
ECMA 2016(ES7)新特性
2024-05-22
ECMA 2019(ES10) 新特性
2024-05-24
ECMA 2022 (es13) 新特性
2021-10-12
前端-JavaScript新特性（ES6）
2021-10-22
前端JavaScript
ES 6新特性（Day07）
2020-11-07
ES2015新特性簡介
2018-10-25
ES6新特性總結
2018-08-11
玩轉ES6新特性
2018-08-11
Es2016、2017新特性(上)
2018-07-17
ES6 新特性之Symbol
2018-07-13
Symbol
細解JavaScript ES7 ES8 ES9 新特性
2018-11-28
JavaScript
ESMA2017(es8) 新特性
2024-05-23
ES6、ES7、ES8、ES9、ES10新特性一覽
2019-04-02
學習七、ES2016與ES2017的新特性
2020-09-27
ECMAScript 2021(ES12)新特性簡介
2021-09-22
簡單說說ES6新特性
2022-02-10
javascript ES6 新特性之解構
2019-05-09
JavaScript
ECMAScript 2018(ES9)新特性簡介
2021-03-31
js--ES6新特性之解構
2021-07-18
JS
ECMAScript 2020(ES11)新特性簡介
2021-08-05
ECMAScript 2019(ES10)新特性簡介
2021-05-04
ECMAScript 2017(ES8)新特性簡介
2021-03-17
ECMAScript 2016(ES7)新特性簡介
2021-03-12
es6新特性之 class 基本用法
2018-05-05

ES 2024 新特性

ECMAScript 2024 新特性

一、Promise.withResolvers ( )

1. 返回值

1.1. promise

1.2. resolve

1.3. reject

2. 示例

3. 等價於

4. 在非 Promise 建構函式上呼叫 withResolvers()

二、Object.groupBy ( items, callbackfn )

1. 作用

2. 引數

2.1. items

2.2. callbackFn

3. 返回值

4. 示例

4.1. 根據 element 元素分組

4.2. 自定義分組

三、Map.groupBy ( items, callbackfn )

1. 作用

2. 引數

2.1. items

2.2. callbackFn

3. 返回值

4. 示例

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

1. 作用

2. 引數

3. 返回值

4. 異常

5. 示例

五、String.prototype.isWellFormed ( )

1. 作用

1.1. 單獨代理項

2. 返回值

3. 示例

六、String.prototype.toWellFormed ( )

1. 作用

2. 返回值

3. 示例

七、RegExp /v

1. 作用

2. 示例

2.1. 基礎示例

2.2. Unicode

2.3. 結合 --

2.4. 結合 &&

3. V 標誌與 U 標誌有何不同

引用

相關文章