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