每年，JavaScript 都會(huì)引入眾多新特性。本文就來(lái)看看，即將在 ECMAScript 2025 規(guī)范中出現(xiàn)的新功能！

注意：本文提到的這些新特性很多已經(jīng)被主流瀏覽器支持！

圖片

Promise.try

Promise.try 旨在解決JavaScript中處理可能返回Promise的函數(shù)時(shí)的一些不便之處，包括：

• 統(tǒng)一處理同步和異步函數(shù)：：在實(shí)際編程中，經(jīng)常遇到需要處理一個(gè)函數(shù)f，這個(gè)函數(shù)可能是同步的，也可能是異步的（即返回Promise）。傳統(tǒng)上，為了統(tǒng)一處理這兩種情況，開發(fā)者可能不得不使用如Promise.resolve().then(f)這樣的模式，但這會(huì)導(dǎo)致即使f是同步函數(shù)，它也會(huì)在下一個(gè)事件循環(huán)中異步執(zhí)行。
• 異常處理：：對(duì)于可能拋出異常的函數(shù)，開發(fā)者希望有一種簡(jiǎn)潔的方式來(lái)捕獲并處理這些異常。Promise.try提供了一種類似于try-catch語(yǔ)句的語(yǔ)義，使得異常處理更加直觀和方便。
• 代碼可讀性和簡(jiǎn)潔性：傳統(tǒng)的Promise處理方式（如Promise.resolve().then(f)或new Promise(resolve => resolve(f()))）相對(duì)冗長(zhǎng)且不易記憶。Promise.try提供了一種更加簡(jiǎn)潔和易于理解的語(yǔ)法，使得代碼更加清晰和易于維護(hù)。

新的Promise方法try就是為了解決上述問題。這個(gè)方法接受一個(gè)函數(shù)f作為參數(shù)，并立即執(zhí)行該函數(shù)。如果f是同步函數(shù)并返回一個(gè)值，則Promise.try會(huì)返回一個(gè)解析為該值的Promise。如果f是異步函數(shù)并返回一個(gè)Promise，則Promise.try會(huì)返回該P(yáng)romise并保持其狀態(tài)。如果f拋出異常，則Promise.try會(huì)返回一個(gè)拒絕的Promise，并帶有該異常作為拒絕原因。

舉個(gè)例子：

const f = () => {  
  console.log('Function f is executing');  
  return 42; // 假設(shè)這是一個(gè)同步函數(shù)，返回一個(gè)值  
};  
  
Promise.try(f).then(value => {  
  console.log('Received value:', value); // 輸出: Received value: 42  
});  
  
console.log('This will execute before the Promise.try callback');

在這個(gè)示例中，函數(shù)f是同步的，并返回一個(gè)值42。使用Promise.try包裝f后，可以在.then方法中接收到這個(gè)值，并且這個(gè)處理過程是異步的。但是，與Promise.resolve().then(f)不同的是，使用Promise.try時(shí)，如果f是同步函數(shù)，它會(huì)在當(dāng)前事件循環(huán)中立即執(zhí)行，而不是在下一個(gè)事件循環(huán)中。

另外，如果f是一個(gè)異步函數(shù)，比如返回一個(gè)Promise，那么Promise.try同樣可以處理這種情況：

const asyncF = () => {  
  return new Promise((resolve) => {  
    setTimeout(() => {  
      resolve('Async value');  
    }, 1000);  
  });  
};  
  
Promise.try(asyncF).then(value => {  
  console.log('Received async value:', value); // 一秒后輸出: Received async value: Async value  
});

在這個(gè)示例中，函數(shù)asyncF是異步的，并返回一個(gè)在1秒后解析的Promise。使用Promise.try包裝asyncF后，可以在.then方法中接收到這個(gè)異步值。

目前，Chrome、Edge、Firfox 的最新版本已支持該功能：

圖片

全新 Set 方法

JavaScript 的內(nèi)置Set類將新增一些方法，以便執(zhí)行集合論中常見的操作，包括：

• Set.prototype.intersection(other)：返回兩個(gè)集合的交集。
• Set.prototype.union(other)：返回兩個(gè)集合的并集。
• Set.prototype.difference(other)：返回第一個(gè)集合與第二個(gè)集合的差集。
• Set.prototype.symmetricDifference(other)：返回兩個(gè)集合的對(duì)稱差。
• Set.prototype.isSubsetOf(other)：判斷第一個(gè)集合是否是第二個(gè)集合的子集。
• Set.prototype.isSupersetOf(other)：判斷第一個(gè)集合是否是第二個(gè)集合的超集。
• Set.prototype.isDisjointFrom(other)：判斷兩個(gè)集合是否不相交。

舉個(gè)例子：

// 創(chuàng)建兩個(gè)Set實(shí)例
const setA = new Set([1, 2, 3, 4]);
const setB = new Set([3, 4, 5, 6]);

// 交集: 返回兩個(gè)集合的公共元素
const intersection = setA.intersection(setB); // Set {3, 4}

// 并集: 返回兩個(gè)集合的所有元素，不重復(fù)
const union = setA.union(setB); // Set {1, 2, 3, 4, 5, 6}

// 差集: 返回第一個(gè)集合中有而第二個(gè)集合中沒有的元素
const difference = setA.difference(setB); // Set {1, 2}

// 對(duì)稱差: 返回在兩個(gè)集合中的元素，但不返回同時(shí)存在于兩個(gè)集合中的元素
const symmetricDifference = setA.symmetricDifference(setB); // Set {1, 2, 5, 6}

// 子集判斷: 判斷第一個(gè)集合是否是第二個(gè)集合的子集
const isSubset = setA.isSubsetOf(setB); // false

// 超集判斷: 判斷第一個(gè)集合是否是第二個(gè)集合的超集
const isSuperset = setA.isSupersetOf(setB); // false

// 不相交判斷: 判斷兩個(gè)集合是否不相交
const isDisjoint = setA.isDisjointFrom(setB); // false

目前，這些新方法已被主流瀏覽器普遍支持：

圖片

全新正則表達(dá)式修飾符

正則表達(dá)式引擎將新增一些模式修飾符，包括：

• i — 忽略大小寫（Ignore Case）
• m — 多行模式（Multiline）
• s — 單行模式（Single-line），也稱為“點(diǎn)全”模式
• x — 擴(kuò)展模式（Extended mode）

舉個(gè)例子：

// 這個(gè)正則表達(dá)式在匹配時(shí)忽略大小寫，但只在第一個(gè)字符上忽略
const re1 = /^[a-z](?-i:[a-z])$/i;
console.log(re1.test("ab")); // true
console.log(re1.test("Ab")); // true
console.log(re1.test("aB")); // false

// 這個(gè)正則表達(dá)式在匹配時(shí)忽略大小寫
const re2 = /^(?i:[a-z])[a-z]$/;
console.log(re2.test("ab")); // true
console.log(re2.test("Ab")); // true
console.log(re2.test("aB")); // false

導(dǎo)入屬性

在 JavaScript 模塊導(dǎo)入語(yǔ)句中將支持內(nèi)聯(lián)語(yǔ)法，允許指定模塊屬性，以便支持不同類型的模塊。這些屬性通過with關(guān)鍵字后跟一個(gè)對(duì)象字面量來(lái)指定，對(duì)象中可以包含不同的鍵值對(duì)，例如{ type: "json" }。這樣可以提高安全性，防止服務(wù)器意外返回不同的MIME類型，導(dǎo)致代碼被意外執(zhí)行。

舉個(gè)例子：

// 導(dǎo)入一個(gè)JSON模塊
import json from "./foo.json" with { type: "json" };

// 動(dòng)態(tài)導(dǎo)入一個(gè)JSON模塊
import("foo.json", { with: { type: "json" } });

在這個(gè)例子中，import語(yǔ)句和import()函數(shù)都使用了with關(guān)鍵字來(lái)指定模塊的類型。這告訴JavaScript環(huán)境，foo.json是一個(gè)JSON模塊，而不是一個(gè)JavaScript模塊。

另外，還將對(duì)export語(yǔ)句進(jìn)行擴(kuò)展，允許在導(dǎo)出模塊時(shí)指定屬性。例如：

// 導(dǎo)出一個(gè)模塊，并指定其類型
export { val } from './foo.js' with { type: "javascript" };

JSON 模塊

目前，JavaScript模塊系統(tǒng)并不直接支持導(dǎo)入JSON文件，這導(dǎo)致開發(fā)者需要使用一些非標(biāo)準(zhǔn)的方法來(lái)導(dǎo)入JSON數(shù)據(jù)。在JavaScript 環(huán)境中，未來(lái)將以一種通用的方式導(dǎo)入JSON模塊。以標(biāo)準(zhǔn)化JSON模塊的導(dǎo)入過程，確保在所有符合ECMAScript規(guī)范的宿主環(huán)境中都能一致地處理JSON模塊。

解決方案是利用導(dǎo)入屬性來(lái)指示一個(gè)模塊是JSON格式的。這意味著開發(fā)者可以使用以下語(yǔ)法來(lái)導(dǎo)入JSON模塊：

import json from "./foo.json" with { type: "json" };
import("foo.json", { with: { type: "json" } });

在這個(gè)例子中，with { type: "json" }部分告訴JavaScript環(huán)境，foo.json是一個(gè)JSON模塊，應(yīng)該被解析為JSON對(duì)象，并且該對(duì)象成為模塊的默認(rèn)導(dǎo)出。

迭代

盡管迭代器是表示大型或可能是無(wú)限枚舉數(shù)據(jù)集的有用方式，但它們?nèi)狈σ恍┹o助方法，使得它們不如數(shù)組和其他有限數(shù)據(jù)結(jié)構(gòu)那樣易于使用。這導(dǎo)致一些問題本可以通過迭代器更好地表示，但卻不得不用數(shù)組或使用庫(kù)來(lái)引入必要的輔助方法來(lái)解決。

迭代器原型上將引入一系列新方法，允許更通用的使用和消費(fèi)迭代器，包括：

• .map(mapperFn)：允許對(duì)迭代器返回的每個(gè)元素應(yīng)用一個(gè)函數(shù)。
• .filter(filtererFn)：允許跳過迭代器中未通過過濾器函數(shù)的值。
• .take(limit)：返回一個(gè)迭代器，最多產(chǎn)生底層迭代器產(chǎn)生的給定數(shù)量的元素。
• .drop(limit)：跳過底層迭代器產(chǎn)生的給定數(shù)量的元素，然后產(chǎn)生任何剩余的元素。
• .flatMap(mapperFn)：返回一個(gè)迭代器，它產(chǎn)生的是應(yīng)用映射函數(shù)到底層迭代器產(chǎn)生的元素所生成的迭代器的所有元素。
• .reduce(reducer [, initialValue ])：允許對(duì)迭代器返回的每個(gè)元素應(yīng)用一個(gè)函數(shù)，同時(shí)跟蹤Reducer的最新結(jié)果（memo）。
• .toArray()：將非無(wú)限迭代器轉(zhuǎn)換為數(shù)組。
• .forEach(fn)：用于對(duì)迭代器執(zhí)行副作用，接受一個(gè)函數(shù)作為參數(shù)。
• .some(fn)：檢查迭代器中的任何值是否與給定的謂詞匹配。
• .every(fn)：檢查迭代器生成的每個(gè)值是否通過了測(cè)試函數(shù)。
• .find(fn)：用于查找迭代器中第一個(gè)匹配的元素。

舉個(gè)例子：

function* naturals() {
  let i = 0;
  while (true) {
    yield i;
    i += 1;
  }
}

const result = naturals()
  .map(value => value * value)
  .take(3);

result.next(); // {value: 0, done: false}
result.next(); // {value: 1, done: false}
result.next(); // {value: 4, done: false}
result.next(); // {value: undefined, done: true}

正則表達(dá)式捕獲組命名支持重復(fù)

目前，在 JavaScript正則表達(dá)式中有一個(gè)限制：命名捕獲組的名稱必須是唯一的。在某些情況下，開發(fā)者可能需要匹配具有多種格式的相同內(nèi)容，例如日期，它們可能以YYYY-MM或MM-YYYY的形式出現(xiàn)。如果不允許重復(fù)使用組名，開發(fā)者就無(wú)法為這兩種格式使用相同的組名來(lái)提取年份。

而未來(lái)將為不同的模式片段使用相同的組名，只要這些片段不是在同一選擇分支中。這樣，即使在復(fù)雜的正則表達(dá)式中，開發(fā)者也可以為相同類型的數(shù)據(jù)使用相同的組名，從而簡(jiǎn)化了正則表達(dá)式的編寫和理解。

舉個(gè)例子：

// 假設(shè)想匹配兩種日期格式 YYYY-MM 或 MM-YYYY 并提取年份
let regex = /(?<year>[0-9]{4})-[0-9]{2}|[0-9]{2}-(?<year>[0-9]{4})/;

// 使用這個(gè)正則表達(dá)式匹配字符串
let str = "2023-10";
let match = str.match(regex);

// 無(wú)論日期格式如何，都能提取出年份
if (match) {
  console.log(match.groups.year); // 輸出: 2023
}