這些 JavaScript 新功能太酷了吧！
每年，JavaScript 都會引入眾多新特性。本文就來看看，即將在 ECMAScript 2025 規范中出現的新功能！
注意：本文提到的這些新特性很多已經被主流瀏覽器支持！
圖片
Promise.try
Promise.try 旨在解決JavaScript中處理可能返回Promise的函數時的一些不便之處，包括：
- 統一處理同步和異步函數：：在實際編程中，經常遇到需要處理一個函數f，這個函數可能是同步的，也可能是異步的（即返回Promise）。傳統上，為了統一處理這兩種情況，開發者可能不得不使用如Promise.resolve().then(f)這樣的模式，但這會導致即使f是同步函數，它也會在下一個事件循環中異步執行。
- 異常處理：：對于可能拋出異常的函數，開發者希望有一種簡潔的方式來捕獲并處理這些異常。Promise.try提供了一種類似于try-catch語句的語義，使得異常處理更加直觀和方便。
- 代碼可讀性和簡潔性：傳統的Promise處理方式（如Promise.resolve().then(f)或new Promise(resolve => resolve(f()))）相對冗長且不易記憶。Promise.try提供了一種更加簡潔和易于理解的語法，使得代碼更加清晰和易于維護。
新的Promise方法try就是為了解決上述問題。這個方法接受一個函數f作為參數，并立即執行該函數。如果f是同步函數并返回一個值，則Promise.try會返回一個解析為該值的Promise。如果f是異步函數并返回一個Promise，則Promise.try會返回該Promise并保持其狀態。如果f拋出異常，則Promise.try會返回一個拒絕的Promise，并帶有該異常作為拒絕原因。
舉個例子：
const f = () => {
console.log('Function f is executing');
return 42; // 假設這是一個同步函數，返回一個值
};
Promise.try(f).then(value => {
console.log('Received value:', value); // 輸出: Received value: 42
});
console.log('This will execute before the Promise.try callback');在這個示例中，函數f是同步的，并返回一個值42。使用Promise.try包裝f后，可以在.then方法中接收到這個值，并且這個處理過程是異步的。但是，與Promise.resolve().then(f)不同的是，使用Promise.try時，如果f是同步函數，它會在當前事件循環中立即執行，而不是在下一個事件循環中。
另外，如果f是一個異步函數，比如返回一個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
});在這個示例中，函數asyncF是異步的，并返回一個在1秒后解析的Promise。使用Promise.try包裝asyncF后，可以在.then方法中接收到這個異步值。
目前，Chrome、Edge、Firfox 的最新版本已支持該功能：
圖片
全新 Set 方法
JavaScript 的內置Set類將新增一些方法，以便執行集合論中常見的操作，包括：
- 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)：判斷兩個集合是否不相交。
舉個例子：
// 創建兩個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 模塊導入語句中將支持內聯語法，允許指定模塊屬性，以便支持不同類型的模塊。這些屬性通過with關鍵字后跟一個對象字面量來指定，對象中可以包含不同的鍵值對，例如{ type: "json" }。這樣可以提高安全性，防止服務器意外返回不同的MIME類型，導致代碼被意外執行。
舉個例子：
// 導入一個JSON模塊
import json from "./foo.json" with { type: "json" };
// 動態導入一個JSON模塊
import("foo.json", { with: { type: "json" } });在這個例子中，import語句和import()函數都使用了with關鍵字來指定模塊的類型。這告訴JavaScript環境，foo.json是一個JSON模塊，而不是一個JavaScript模塊。
另外，還將對export語句進行擴展，允許在導出模塊時指定屬性。例如：
// 導出一個模塊，并指定其類型
export { val } from './foo.js' with { type: "javascript" };JSON 模塊
目前，JavaScript模塊系統并不直接支持導入JSON文件，這導致開發者需要使用一些非標準的方法來導入JSON數據。在JavaScript 環境中，未來將以一種通用的方式導入JSON模塊。以標準化JSON模塊的導入過程，確保在所有符合ECMAScript規范的宿主環境中都能一致地處理JSON模塊。
解決方案是利用導入屬性來指示一個模塊是JSON格式的。這意味著開發者可以使用以下語法來導入JSON模塊：
import json from "./foo.json" with { type: "json" };
import("foo.json", { with: { type: "json" } });在這個例子中，with { type: "json" }部分告訴JavaScript環境，foo.json是一個JSON模塊，應該被解析為JSON對象，并且該對象成為模塊的默認導出。
迭代
盡管迭代器是表示大型或可能是無限枚舉數據集的有用方式，但它們缺乏一些輔助方法，使得它們不如數組和其他有限數據結構那樣易于使用。這導致一些問題本可以通過迭代器更好地表示，但卻不得不用數組或使用庫來引入必要的輔助方法來解決。
迭代器原型上將引入一系列新方法，允許更通用的使用和消費迭代器，包括：
- .map(mapperFn)：允許對迭代器返回的每個元素應用一個函數。
- .filter(filtererFn)：允許跳過迭代器中未通過過濾器函數的值。
- .take(limit)：返回一個迭代器，最多產生底層迭代器產生的給定數量的元素。
- .drop(limit)：跳過底層迭代器產生的給定數量的元素，然后產生任何剩余的元素。
- .flatMap(mapperFn)：返回一個迭代器，它產生的是應用映射函數到底層迭代器產生的元素所生成的迭代器的所有元素。
- .reduce(reducer [, initialValue ])：允許對迭代器返回的每個元素應用一個函數，同時跟蹤Reducer的最新結果（memo）。
- .toArray()：將非無限迭代器轉換為數組。
- .forEach(fn)：用于對迭代器執行副作用，接受一個函數作為參數。
- .some(fn)：檢查迭代器中的任何值是否與給定的謂詞匹配。
- .every(fn)：檢查迭代器生成的每個值是否通過了測試函數。
- .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正則表達式中有一個限制：命名捕獲組的名稱必須是唯一的。在某些情況下，開發者可能需要匹配具有多種格式的相同內容，例如日期，它們可能以YYYY-MM或MM-YYYY的形式出現。如果不允許重復使用組名，開發者就無法為這兩種格式使用相同的組名來提取年份。
而未來將為不同的模式片段使用相同的組名，只要這些片段不是在同一選擇分支中。這樣，即使在復雜的正則表達式中，開發者也可以為相同類型的數據使用相同的組名，從而簡化了正則表達式的編寫和理解。
舉個例子：
// 假設想匹配兩種日期格式 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
}
