這些 JavaScript 新功能太酷了吧！
每年，JavaScript 都會引入眾多新特性。本文就來看看，即將在 ECMAScript 2025 規(guī)范中出現(xiàn)的新功能！
注意：本文提到的這些新特性很多已經(jīng)被主流瀏覽器支持！
圖片
Promise.try
Promise.try 旨在解決JavaScript中處理可能返回Promise的函數(shù)時的一些不便之處，包括：
- 統(tǒng)一處理同步和異步函數(shù)：：在實(shí)際編程中，經(jīng)常遇到需要處理一個函數(shù)f，這個函數(shù)可能是同步的，也可能是異步的（即返回Promise）。傳統(tǒng)上，為了統(tǒng)一處理這兩種情況，開發(fā)者可能不得不使用如Promise.resolve().then(f)這樣的模式，但這會導(dǎo)致即使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提供了一種更加簡潔和易于理解的語法，使得代碼更加清晰和易于維護(hù)。
新的Promise方法try就是為了解決上述問題。這個方法接受一個函數(shù)f作為參數(shù)，并立即執(zhí)行該函數(shù)。如果f是同步函數(shù)并返回一個值，則Promise.try會返回一個解析為該值的Promise。如果f是異步函數(shù)并返回一個Promise，則Promise.try會返回該P(yáng)romise并保持其狀態(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ù)，它會在當(dāng)前事件循環(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實(shí)例
const setA = new Set([1, 2, 3, 4]);
const setB = new Set([3, 4, 5, 6]);
// 交集: 返回兩個集合的公共元素
const intersection = setA.intersection(setB); // Set {3, 4}
// 并集: 返回兩個集合的所有元素，不重復(fù)
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目前，這些新方法已被主流瀏覽器普遍支持：
圖片
全新正則表達(dá)式修飾符
正則表達(dá)式引擎將新增一些模式修飾符，包括：
- i — 忽略大小寫（Ignore Case）
- m — 多行模式（Multiline）
- s — 單行模式（Single-line），也稱為“點(diǎn)全”模式
- x — 擴(kuò)展模式（Extended mode）
舉個例子：
// 這個正則表達(dá)式在匹配時忽略大小寫，但只在第一個字符上忽略
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
// 這個正則表達(dá)式在匹配時忽略大小寫
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)入語句中將支持內(nèi)聯(lián)語法，允許指定模塊屬性，以便支持不同類型的模塊。這些屬性通過with關(guān)鍵字后跟一個對象字面量來指定，對象中可以包含不同的鍵值對，例如{ type: "json" }。這樣可以提高安全性，防止服務(wù)器意外返回不同的MIME類型，導(dǎo)致代碼被意外執(zhí)行。
舉個例子：
// 導(dǎo)入一個JSON模塊
import json from "./foo.json" with { type: "json" };
// 動態(tài)導(dǎo)入一個JSON模塊
import("foo.json", { with: { type: "json" } });在這個例子中，import語句和import()函數(shù)都使用了with關(guān)鍵字來指定模塊的類型。這告訴JavaScript環(huán)境，foo.json是一個JSON模塊，而不是一個JavaScript模塊。
另外，還將對export語句進(jìn)行擴(kuò)展，允許在導(dǎo)出模塊時指定屬性。例如：
// 導(dǎo)出一個模塊，并指定其類型
export { val } from './foo.js' with { type: "javascript" };JSON 模塊
目前，JavaScript模塊系統(tǒng)并不直接支持導(dǎo)入JSON文件，這導(dǎo)致開發(fā)者需要使用一些非標(biāo)準(zhǔn)的方法來導(dǎo)入JSON數(shù)據(jù)。在JavaScript 環(huán)境中，未來將以一種通用的方式導(dǎo)入JSON模塊。以標(biāo)準(zhǔn)化JSON模塊的導(dǎo)入過程，確保在所有符合ECMAScript規(guī)范的宿主環(huán)境中都能一致地處理JSON模塊。
解決方案是利用導(dǎo)入屬性來指示一個模塊是JSON格式的。這意味著開發(fā)者可以使用以下語法來導(dǎo)入JSON模塊：
import json from "./foo.json" with { type: "json" };
import("foo.json", { with: { type: "json" } });在這個例子中，with { type: "json" }部分告訴JavaScript環(huán)境，foo.json是一個JSON模塊，應(yīng)該被解析為JSON對象，并且該對象成為模塊的默認(rèn)導(dǎo)出。
迭代
盡管迭代器是表示大型或可能是無限枚舉數(shù)據(jù)集的有用方式，但它們?nèi)狈σ恍┹o助方法，使得它們不如數(shù)組和其他有限數(shù)據(jù)結(jié)構(gòu)那樣易于使用。這導(dǎo)致一些問題本可以通過迭代器更好地表示，但卻不得不用數(shù)組或使用庫來引入必要的輔助方法來解決。
迭代器原型上將引入一系列新方法，允許更通用的使用和消費(fèi)迭代器，包括：
- .map(mapperFn)：允許對迭代器返回的每個元素應(yīng)用一個函數(shù)。
- .filter(filtererFn)：允許跳過迭代器中未通過過濾器函數(shù)的值。
- .take(limit)：返回一個迭代器，最多產(chǎn)生底層迭代器產(chǎn)生的給定數(shù)量的元素。
- .drop(limit)：跳過底層迭代器產(chǎn)生的給定數(shù)量的元素，然后產(chǎn)生任何剩余的元素。
- .flatMap(mapperFn)：返回一個迭代器，它產(chǎn)生的是應(yīng)用映射函數(shù)到底層迭代器產(chǎn)生的元素所生成的迭代器的所有元素。
- .reduce(reducer [, initialValue ])：允許對迭代器返回的每個元素應(yīng)用一個函數(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}正則表達(dá)式捕獲組命名支持重復(fù)
目前，在 JavaScript正則表達(dá)式中有一個限制：命名捕獲組的名稱必須是唯一的。在某些情況下，開發(fā)者可能需要匹配具有多種格式的相同內(nèi)容，例如日期，它們可能以YYYY-MM或MM-YYYY的形式出現(xiàn)。如果不允許重復(fù)使用組名，開發(fā)者就無法為這兩種格式使用相同的組名來提取年份。
而未來將為不同的模式片段使用相同的組名，只要這些片段不是在同一選擇分支中。這樣，即使在復(fù)雜的正則表達(dá)式中，開發(fā)者也可以為相同類型的數(shù)據(jù)使用相同的組名，從而簡化了正則表達(dá)式的編寫和理解。
舉個例子：
// 假設(shè)想匹配兩種日期格式 YYYY-MM 或 MM-YYYY 并提取年份
let regex = /(?<year>[0-9]{4})-[0-9]{2}|[0-9]{2}-(?<year>[0-9]{4})/;
// 使用這個正則表達(dá)式匹配字符串
let str = "2023-10";
let match = str.match(regex);
// 無論日期格式如何，都能提取出年份
if (match) {
console.log(match.groups.year); // 輸出: 2023
}
