2024 年 6 月 26 日,第 127 屆 ECMA 大會(huì)正式批準(zhǔn)了 ECMAScript 2024 語(yǔ)言規(guī)范,這意味著它現(xiàn)在正式成為最新 ECMAScript 標(biāo)準(zhǔn)。
圖片
下面就來(lái)看看 ECMAScript 2024 都有哪些新特性吧!
Promise.withResolvers() 允許創(chuàng)建一個(gè)新的 Promise,并同時(shí)獲得 resolve 和 reject 函數(shù)。
Promise.withResolvers() 等同于以下代碼,不過(guò)代碼會(huì)更簡(jiǎn)潔:
let resolve, reject;const promise = new Promise((res, rej) => { resolve = res; reject = rej;});
通常,當(dāng)創(chuàng)建一個(gè)新的 Promise 時(shí),會(huì)傳遞一個(gè)執(zhí)行器函數(shù)給 Promise 構(gòu)造函數(shù),這個(gè)執(zhí)行器函數(shù)接收兩個(gè)參數(shù):resolve 和 reject 。但在某些情況下,可能想要在 Promise 創(chuàng)建之后仍然能夠訪問(wèn)到這兩個(gè)函數(shù)。這就是 Promise.withResolvers() 的用武之地。
使用 Promise.withResolvers() 的例子:
const { promise, resolve, reject } = Promise.withResolvers(); // 在這里可以使用 resolve 和 reject 函數(shù) setTimeout(() => resolve('成功!'), 8000); promise.then(value => { console.log(value); // 輸出: 成功! });
使用 Promise.withResolvers() 關(guān)鍵的區(qū)別在于resolve 和 reject函數(shù)現(xiàn)在與 Promise 本身處于同一作用域,而不是在執(zhí)行器中被創(chuàng)建和一次性使用。這可能使得一些更高級(jí)的用例成為可能,例如在重復(fù)事件中重用它們,特別是在處理流和隊(duì)列時(shí)。這通常也意味著相比在執(zhí)行器內(nèi)包裝大量邏輯,嵌套會(huì)更少。這個(gè)方法對(duì)于那些需要更細(xì)粒度控制 Promise 的狀態(tài),或者在 Promise 創(chuàng)建后仍然需要訪問(wèn) resolve 和 reject 函數(shù)的場(chǎng)景來(lái)說(shuō)非常有用。
瀏覽器支持:
圖片
Object.groupBy() 和 Map.groupBy() 方法用于數(shù)組分組。
假設(shè)有一個(gè)由表示水果的對(duì)象組成的數(shù)組,需要按照顏色進(jìn)行分組。以前可以使用forEach循環(huán)來(lái)實(shí)現(xiàn),代碼如下:
const fruits = [ { name: "Apple", color: "red" }, { name: "Banana", color: "yellow" }, { name: "Cherry", color: "red" }, { name: "Lemon", color: "yellow" }, { name: "Grape", color: "purple" }, ];const fruitsByColor = {}; fruits.forEach(fruit => { const color = fruit.color; if (!fruitsByColor[color]) { fruitsByColor[color] = []; } fruitsByColor[color].push(fruit); }); console.log(fruitsByColor);
輸出結(jié)果如下:
圖片
也可以使用reduce方法:
const fruitsByColor = fruits.reduce((acc, fruit) => { const color = fruit.color; if (!acc[color]) { acc[color] = []; } acc[color].push(fruit); return acc; }, {});
無(wú)論哪種方式,代碼都略顯繁瑣。每次都要檢查對(duì)象,看分組的 key 是否存在,如果不存在,則創(chuàng)建一個(gè)空數(shù)組,并將項(xiàng)目添加到該數(shù)組中。
可以通過(guò)以下方式來(lái)使用新的Object.groupBy方法,代碼更簡(jiǎn)潔:
const fruitsByColor = Object.groupBy(fruits, (fruit) => fruit.color);
需要注意,使用Object.groupBy方法返回一個(gè)沒(méi)有原型(即沒(méi)有繼承任何屬性和方法)的對(duì)象。這意味著該對(duì)象不會(huì)繼承Object.prototype上的任何屬性或方法,例如hasOwnProperty或toString等。雖然這樣做可以避免意外覆蓋Object.prototype上的屬性,但也意味著不能使用一些與對(duì)象相關(guān)的方法。
const fruitsByColor = Object.groupBy(fruits, (fruit) => fruit.color);console.log(fruitsByColor.hasOwnProperty("red"));// TypeError: fruitsByColor.hasOwnProperty is not a function
在調(diào)用Object.groupBy時(shí),傳遞給它的回調(diào)函數(shù)應(yīng)該返回一個(gè)字符串或 Symbol 類型的值。如果回調(diào)函數(shù)返回其他類型的值,它將被強(qiáng)制轉(zhuǎn)換為字符串。
瀏覽器支持:
圖片
Map.groupBy和Object.groupBy的功能一樣,只是返回的結(jié)果類型不同。Map.groupBy返回一個(gè) Map 對(duì)象,而Object.groupBy返回一個(gè)普通對(duì)象。
const fruits = [ { name: "Apple", color: "red" }, { name: "Banana", color: "yellow" }, { name: "Cherry", color: "red" }, { name: "Lemon", color: "yellow" }, { name: "Grape", color: "purple" }, ];const fruitsByColor = Map.groupBy(fruits, (fruit) => fruits.color);
這里根據(jù)水果顏色進(jìn)行了分組,輸出結(jié)果如下:
圖片
可以通過(guò) Map 的 get 方法來(lái)來(lái)獲取分組分組結(jié)果:
fruitsByColor.get("red");// [{"name": "Apple", "color": "red"}, {"name": "Cherry", "color": "red"}]
瀏覽器支持:
isWellFormed() 用于檢查一個(gè) UTF-16 編碼的字符串是否包含孤立的代理項(xiàng)(即未與另一個(gè)代理項(xiàng)配對(duì)的高代理或低代理)。UTF-16使用代理對(duì)來(lái)表示Unicode中超過(guò)基本多文種平面的字符。一個(gè)有效的UTF-16字符串應(yīng)該只包含正確配對(duì)的代理對(duì)或單獨(dú)的BMP字符。
下面來(lái)看一個(gè)例子
const strings = [ // 單獨(dú)的前導(dǎo)代理 "ab/uD800", "ab/uD800c", // 單獨(dú)的后尾代理 "/uDFFFab", "c/uDFFFab", // 格式正確 "abc", "ab/uD83D/uDE04c",];for (const str of strings) { console.log(str.isWellFormed());}// 輸出:// false// false// false// false// true// true
如果傳遞的字符串格式不正確, encodeURI 會(huì)拋出錯(cuò)誤。可以通過(guò)使用 isWellFormed() 在將字符串傳遞給 encodeURI() 之前測(cè)試字符串來(lái)避免這種情況。
const illFormed = "https://example.com/search?q=/uD800";try { encodeURI(illFormed);} catch (e) { console.log(e); // URIError: URI malformed}if (illFormed.isWellFormed()) { console.log(encodeURI(illFormed));} else { console.warn("Ill-formed strings encountered."); // Ill-formed strings encountered.}
isWellFormed() 函數(shù)的使用場(chǎng)景主要包括以下幾種情況:
瀏覽器支持:
圖片
toWellFormed() 方法返回一個(gè)字符串,其中該字符串的所有單獨(dú)代理項(xiàng)都被替換為 Unicode 替換字符 U+FFFD。
toWellFormed() 迭代字符串的碼元,并將任何單獨(dú)代理項(xiàng)替換為 Unicode 替換字符 U+FFFD。這確保了返回的字符串格式正確并可用于期望正確格式字符串的函數(shù),比如 encodeURI。由于引擎能夠直接訪問(wèn)字符串的內(nèi)部表示,與自定義實(shí)現(xiàn)相比 toWellFormed() 更高效。
const strings = [ // 單獨(dú)的前導(dǎo)代理 "ab/uD800", "ab/uD800c", // 單獨(dú)的后尾代理 "/uDFFFab", "c/uDFFFab", // 格式正確 "abc", "ab/uD83D/uDE04c",];for (const str of strings) { console.log(str.toWellFormed());}// 輸出:// "ab?"http:// "ab?c"http:// "?ab"http:// "c?ab"http:// "abc"http:// "ab
本文鏈接:http://www.www897cc.com/showinfo-26-97282-0.htmlECMAScript 2024 正式發(fā)布,新特性一覽!
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。郵件:2376512515@qq.com