我國第一個推進到瀏覽器標準的ECMaScript提案

語言: CN / TW / HK

在2022年6月22日,第123屆Ecma大會批准了ECMAScript 2022語言規範。一起來看看ES13給我們帶來了哪些新特性吧。其中最後一個特性,是我國第一個推進到瀏覽器標準的EcmaScript提案。

1.私有屬性和私有方法

之前js中class的一個痛點就是沒有私有屬性,畢竟封裝是面向物件的三大特性,沒有私有屬性如何實現封裝。儘管我們可以用很多方法去曲線實現私有屬性比如閉包proxyweakmapsymbol等等,但是他們各自有各自的缺陷,下面的程式碼演示其中以_作為命名約定的方式實現私有屬性的缺點。

提案.PNG

在建構函式中,我們定義了兩個欄位,其中一個欄位是以_開頭的, 這是一個命名約定用於將欄位宣告為私有欄位,但是當我們在類外面訪問該欄位時,並沒有引起報錯,原因是因為它只是一個命名規範而已。\ 現在在ES13中,我們可以用更簡單的方法宣告公共和私有欄位,第一,我們不必在建構函式中定義它們了,其次,我們可以通過在欄位前面新增#號來定義一個真正的私有欄位。

提案2.PNG 有了這個特性,我們終於可以簡單輕鬆的定義一個真正的私有屬性或私有方法了。

2.私有屬性檢測

當我們嘗試訪問物件上不存在的私有屬性時會報錯,所以就需要一種方法來檢測物件是否具有某私有屬性,此時,我們可以在class中使用in關鍵字來完成此工作。

提案3.PNG

當然,你可能會發問對於具有相同名稱的私有屬性的類,in 關鍵字是否能正常工作,別擔心,請參考以下例子,User類和Person類具有相同的私有屬性name,in關鍵字可以正確的區分。

提案4.PNG

3. 類靜態初始化塊(Class Static Block)

類在初始化的時候會執行靜態初始化塊(Class Static Block),一個類可以擁有任意個靜態初始化塊,它們將會按照宣告的順序執行。靜態初始塊內還可以訪問父類的靜態屬性。

提案5.PNG

下面這個例子,我們還可以通過靜態初始化塊將私有屬性暴露出去。

提案6.PNG

4.Regexp Match Indices

之前 ECMAScript 中的 「RegExp.prototype.exec」 方法的返回值已經提供了對於匹配的捕獲組 文字與對應的捕獲組在正則表示式中的索引。儘管它已經包含輸入字串,模式匹配的索引以及包含任何已命名捕獲組的子字串的group物件,但是對於複雜情況,此資訊可能不足。

提案7.PNG

所以ES13通過新增/d修飾符,向匹配結果新增一個屬性 .indices,此屬性是一個索引陣列,其中包含每個捕獲的子字串的一對開始索引和結束索引。

提案8.PNG

5.Await operator at the top-level

之前await關鍵詞只能在aysnc function裡進行使用,想要在頂層使用await就必須要加個aysnc自執行函式,這樣十分的不方便, 所以ES13中,引入了可以直接在頂層使用Await關鍵字的特性。 動態載入模組:

提案9.PNG

依賴回退:

提案10.PNG

載入最快的資源

提案11.PNG

6 .at()方法

之前,我們如果想要獲取一個數組的元素,如果是正序獲取一個元素,我們可以採取arr[0]這樣的方式, 但是如果我們要倒序訪問一個數組的元素,就需要採取arr[arr.length - 2]這樣的方式,陣列的名稱arr我們寫了兩次,而且還要寫個length,這很不優雅,複雜的情況下就更是難受。

提案12.PNG

為了解決這個問題, ES13引入了at()方法,無論正序還是倒序獲取元素都非常的優雅,有了這個方法,我們可以在陣列、字串、TypedArray上通過索引值方便的獲取元素。

提案13.PNG

7.Object.hasOwn(obj, propKey)

之前我們如果想要判斷某物件是否具有某屬性,我們會通過inobj.hasOwnProperty,但是如果指定的屬性位於原型鏈中,“in”運算子也會返回true。所以之前要想判斷物件自身是否具有某屬性我們一般都通過obj.hasOwnProperty來判斷。\ 但是obj.hasOwnProperty也有自身的缺點:因為hasOwnProperty是不受保護的屬性,所以,人們可能會在物件上定義個自己的hasOwnProperty,如下所示,自定義的hasOwnProperty永遠返回false,這是一個坑。

提案14.PNG

另一個問題是使用Object.create(null) 建立一個不繼承自 Object.prototype 的物件,使 hasOwnProperty 方法時會報錯。

提案15.PNG

所以,為了解決上面的問題,ES13引入了Object.hasOwn(obj, propKey)。用法如下所示:

提案16.PNG

8.Error Cause

Error Cause提案由阿里巴巴的「昭朗」同學負責,是我國第一個成為瀏覽器標準的EcmaScript提案。

以前因為 Error Cause 沒有標準化的引數定義及官方實現,所以容易丟失 error 的屬性或需要寫比較多的程式碼自定義等,並且開發者工具也難以依賴於非語言特性的自定義方案。 try {     apiCallThatCanThrow();   } catch (err) {     throw new Error('New error message', { cause: err });   } 有了這個新特性,藉助cause屬性,我們可以記下導致這個Error的前一個Error物件,錯誤物件就可以以一種簡單優雅的方式連結起來。

9.總結

以上就是ES13的新特性,新特性會給js生態帶來更多好的東西,提高開發者的效率和體驗。