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

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

圖片

Promise.try

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

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

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

舉個例子：

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

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

另外，如果f是一個異步函數(shù)，比如返回一個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  
});

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

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

圖片

全新 Set 方法

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

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

舉個例子：

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

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

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

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

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

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

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

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

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

圖片

全新正則表達式修飾符

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

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

舉個例子：

// 這個正則表達式在匹配時忽略大小寫，但只在第一個字符上忽略
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

// 這個正則表達式在匹配時忽略大小寫
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

導入屬性

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

舉個例子：

// 導入一個JSON模塊
import json from "./foo.json" with { type: "json" };

// 動態(tài)導入一個JSON模塊
import("foo.json", { with: { type: "json" } });

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

另外，還將對export語句進行擴展，允許在導出模塊時指定屬性。例如：

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

JSON 模塊

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

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

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

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

迭代

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

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

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

舉個例子：

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}

正則表達式捕獲組命名支持重復

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

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

舉個例子：

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

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

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