JavaScript ES15 新特性正式發(fā)布!全網(wǎng)最詳細(xì)講解!
2024 年 6 月 26 日,第 127 屆 Ecma 大會(huì)批準(zhǔn)了 ECMAScript 2024 語(yǔ)言規(guī)范,這意味著它現(xiàn)在正式成為標(biāo)準(zhǔn)。
新特性如下:
- Object.groupBy、Map.groupBy
- Promise.withResolvers
- String.prototype.isWellFormed、String.prototype.toWellFormed
- Atomics.waitAsync()
- 正則表達(dá)式 v 標(biāo)識(shí)
圖片
接下來(lái)給大家講講這些新特性吧!
Object.groupBy、Map.groupBy
背景 & 使用
不知道你們有沒(méi)有遇到過(guò)這樣的類似的需求,比如現(xiàn)在有以下的數(shù)據(jù),我想要按照年齡 age 字段,給這些數(shù)據(jù)分個(gè)組,那你們會(huì)怎么做呢?
圖片
其實(shí)可以直接使用 reduce 這個(gè)數(shù)組方法去做,就可以實(shí)現(xiàn)我們想要的效果
圖片
圖片
但是有一個(gè)lodash的方法,叫g(shù)roupBy,可以很簡(jiǎn)單做到我們想要的效果
圖片
這個(gè)方法很好用,但他是 lodash 的方法,而不是原生的,要是他是原生的就好了~~
然而,原生已經(jīng)支持了這個(gè)方法!??!在 Object 身上!請(qǐng)看下方的代碼,但是需要在 谷歌瀏覽器117以上的版本 才能運(yùn)行
圖片
同時(shí)也支持了Map.groupBy這個(gè)方法,但是我感覺(jué)這個(gè)方法不太實(shí)用。。。。。
圖片
兼容性
圖片
圖片
Promise.withResolvers
背景 & 使用
有時(shí)候我們需要把 Promise 的 resolve 或者 reject 這兩個(gè)參數(shù)給取出來(lái),去實(shí)現(xiàn)某種目的。
就比如下面例子,我想手動(dòng)控制 Promise 的 fullfiled 的時(shí)機(jī),所以需要把 resolve 給取出來(lái),然后在我覺(jué)得適當(dāng)?shù)臅r(shí)機(jī)去執(zhí)行這個(gè) resolve,這樣 Promise 就變 fullfiled 了。
圖片
但是這樣挺麻煩的,我總是得定義一個(gè)額外的變量去存儲(chǔ)這個(gè) resolve。
Promise.withResolvers就是為了解決這件事情。
它的作用是把 Promise實(shí)例、resolve、reject 解構(gòu)出來(lái)供我們使用,還是剛剛的例子,使用Promise.withResolvers。
圖片
兼容性
圖片
String.prototype.isWellFormed、String.prototype.toWellFormed
JavaScript 中的字符串是UTF-16編碼的。UTF-16編碼中有代理對(duì)的概念,這一概念在UTF-16字符、Unicode 碼位和字素簇部分有詳細(xì)介紹。
isWellFormed
isWellFormed()讓你能夠測(cè)試一個(gè)字符串是否是格式正確的(即不包含單獨(dú)代理項(xiàng))。由于引擎能夠直接訪問(wèn)字符串的內(nèi)部表示,與自定義實(shí)現(xiàn)相比 isWellFormed() 更高效。如果你需要將字符串轉(zhuǎn)換為格式正確的字符串,可以使用 toWellFormed()方法。isWellFormed()讓你可以對(duì)格式正確和格式錯(cuò)誤的字符串進(jìn)行不同的處理,比如拋出一個(gè)錯(cuò)誤或?qū)⑵錁?biāo)記為無(wú)效。
圖片
如果傳遞的字符串格式不正確,encodeURI會(huì)拋出錯(cuò)誤??梢酝ㄟ^(guò)使用isWellFormed()在將字符串傳遞給 encodeURI() 之前測(cè)試字符串來(lái)避免這種情況。
圖片
圖片
toWellFormed
toWellFormed()迭代字符串的碼元,并將任何單獨(dú)代理項(xiàng)替換為Unicode替換字符U+FFFD。這確保了返回的字符串格式正確并可用于期望正確格式字符串的函數(shù),比如encodeURI。由于引擎能夠直接訪問(wèn)字符串的內(nèi)部表示,與自定義實(shí)現(xiàn)相比toWellFormed()更高效。
當(dāng)在某些上下文中使用格式不正確的字符串時(shí),例如TextEncoder,它們會(huì)自動(dòng)轉(zhuǎn)換為使用相同替換字符的格式正確的字符串。當(dāng)單獨(dú)代理項(xiàng)被呈現(xiàn)時(shí),它們也會(huì)呈現(xiàn)為替換字符(一個(gè)帶有問(wèn)號(hào)的鉆石形狀)。
圖片
如果傳遞的字符串格式不正確,encodeURI會(huì)拋出錯(cuò)誤??梢韵韧ㄟ^(guò)使用toWellFormed()將字符串轉(zhuǎn)換為格式正確的字符串來(lái)避免這種情況。
圖片
圖片
Atomics.waitAsync()
背景 & 使用
Atomics.waitAsync()靜態(tài)方法異步等待共享內(nèi)存的特定位置并返回一個(gè)Promise。
與Atomics.wait()不同,waitAsync是非阻塞的且可用于主線程。語(yǔ)法如下:
圖片
此操作僅適用于基于SharedArrayBuffer的 Int32Array或 BigInt64Array 視圖。
舉一個(gè)簡(jiǎn)單的例子,給定一個(gè)共享的 Int32Array:
圖片
令一個(gè)讀取線程休眠并在位置 0 處等待,預(yù)期該位置的值為 0。result.value 將是一個(gè) Promise:
圖片
在該讀取線程或另一個(gè)線程中,對(duì)內(nèi)存位置 0 調(diào)用以令該 Promise 解決為 "ok":
圖片
如果它沒(méi)有解決為 "ok",則共享內(nèi)存該位置的值不符合預(yù)期(value 將是 "not-equal" 而不是一個(gè) Promise)或已經(jīng)超時(shí)(該 Promise 將解決為 "time-out")
兼容性
圖片
正則表達(dá)式 v 標(biāo)識(shí)
RegExp v 標(biāo)志是 u 標(biāo)志的超集,并提供了另外兩個(gè)功能:
- 字符串的 Unicode 屬性:通過(guò) Unicode 屬性轉(zhuǎn)義,可以使用字符串的屬性。
圖片
- 設(shè)置符號(hào):允許在字符類之間進(jìn)行集合操作。
圖片
在 JavaScript 中,使用 "u" 標(biāo)志的正則表達(dá)式進(jìn)入 Unicode 模式,它擴(kuò)展了正則表達(dá)式的處理能力以包含 Unicode 序列,而非僅限于 ASCII 字符集。這樣做有多種好處:
- Unicode 字符的準(zhǔn)確處理: 不加 "u" 標(biāo)志的正則表達(dá)式可能無(wú)法正確處理超出基本多文種平面(BMP)的 Unicode 字符。啟用 "u" 標(biāo)志允許正則表達(dá)式匹配任何有效的 Unicode 字符。
- 量詞行為的變化: 在啟用了 "u" 標(biāo)志的情況下,量詞(如 *、+、?、{n}、{n,} 和 {n,m})將適用于任何有效的 Unicode 字符,而不僅是 ASCII 字符。
- 支持 Unicode 屬性轉(zhuǎn)義: 使用 "\p{...}" 和 "\P{...}" 轉(zhuǎn)義序列,可以分別匹配或排除具有特定 Unicode 屬性的字符,如 "\p{Script=Arabic}" 可以匹配所有阿拉伯腳本的字符。
- Unicode 轉(zhuǎn)義的正確處理: Unicode 模式允許使用 "\u{...}" 表示 Unicode 字符,其中的 {...} 是一個(gè)十六進(jìn)制數(shù)。
- 正則表達(dá)式方法行為的改進(jìn): 在 Unicode 模式下,例如 String.prototype.match()、String.prototype.replace()、String.prototype.search() 和 RegExp.prototype.exec() 等方法的返回結(jié)果更為精確。