最新 ECMAScript 2022 (ES2022) 標準都新增了什麼特性?

前言

https://tc39.es/ecma262/ 文檔內容是最準確和最新的 ECMAScript 規範。

ECMAScript 2022 是 ECMAScript 規範的第十三次改版,自 2015 年(ES6)之後,TC39 決定每年都進行一次更改,因此每年都會添加新的特性。一般來說標準的提案需要經過四個階段,到 stage 4 的標準也意味著制定的工作已經基本結束。

本篇文章將會列出已通過 stage 4 的提案,即 ES2022 的新特性

對 TC39 的提案流程和進度有興趣的可以參考:https://github.com/tc39/proposals

類的字段聲明

在 ES2022 之前,類中的字段定義和初始化都是在類的建構子(constructor)中完成的,但是在 ES2022 中,類的字段定義可以在類別最上方初始化。

ES6 中的寫法:

  • 類中的公共字段可以藉由實例去訪問和修改(:這個例子在下方私有字段會再次使用到)
carbon 最新 ECMAScript 2022 (ES2022) 標準都新增了什麼特性?

ES2022,我們可以直接在類的最上方初始化字段,而不是在建構子中。因此上方例子可以改寫成:

carbon 1 最新 ECMAScript 2022 (ES2022) 標準都新增了什麼特性?

提案:https://github.com/tc39/proposal-class-fields

類的私有字段及方法

可以在字段名稱前面加上 # 將字段設為私有,如此一來類外便不能訪問及修改該字段。

回顧一下剛剛提到的例子,我們可以藉由實例訪問和修改類中的字段,但如果我們在字段前方加上 # 將字段設為私有,通過實例也不能在類外訪問和修改字段:

carbon 2 最新 ECMAScript 2022 (ES2022) 標準都新增了什麼特性?

這個新寫法提供更安全的方式來隱藏私人字段不被訪問及修改,能夠代替以往使用的下劃線 _

除了字段之外,我們也可以使用 # 定義私有方法(private method)和私有類別存取器(private accessors):

carbon 3 最新 ECMAScript 2022 (ES2022) 標準都新增了什麼特性?

:不能從外部修改私有變數,但可以通過內部方法修改。

類的靜態字段和方法

我們都知道,當你希望字段或方法僅存在於原型而不會存在類的每個實例中時,我們可以將字段或方法定義成靜態(static)。

ES6 開始我們可以在類本身上這麼去定義靜態字段:

carbon 1 1 最新 ECMAScript 2022 (ES2022) 標準都新增了什麼特性?

現在我們可以在類中使用關鍵字 static 定義靜態字段:

carbon 2 1 最新 ECMAScript 2022 (ES2022) 標準都新增了什麼特性?

同樣的我們也可以藉由 # 定義私有靜態字段和方法,在類的外部無法訪問及修改這些私有靜態字段和方法,但能夠藉由類的內部訪問和修改:

carbon 3 1 最新 ECMAScript 2022 (ES2022) 標準都新增了什麼特性?

檢測類中私有字段

當我們要訪問一個尚未被聲明公共字段(public field)時會回傳 undefined,訪問私有字段(private field)時則會拋出一個異常,但是引發異常的原因有很多種,這會造成開發者 debug 時更加麻煩。

新的提案有一個解決方法,使用 in 操作符,如果指定的 字段/屬性 在指定的 物件/類 中則會返回 true,並且能判斷私有字段。

carbon 4 最新 ECMAScript 2022 (ES2022) 標準都新增了什麼特性?

正則表達式匹配索引

我們可以藉由 String.matchAll 將字串中匹配項返回,回傳結果包含完整字串和括號內的子字串:

carbon 2 2 最新 ECMAScript 2022 (ES2022) 標準都新增了什麼特性?

雖然能夠得知匹配的項目在原始字串中的索引,但無法得知每個子字串匹配索引

我們可以藉由新的 /d flag 來獲取每個匹配的開始及結束索引

carbon 3 2 最新 ECMAScript 2022 (ES2022) 標準都新增了什麼特性?

提案:https://github.com/tc39/proposal-regexp-match-indices

頂層 await

在 ES2022 之前,我們只能在 async function 內使用 await,若是在外部使用會引發 SyntaxError,但在 ES2022 允許在async function 之外使用 await 關鍵字。

這是 ES2022 前在 async function 外部使用 await 關鍵字的例子:

  • 許多開發人員利用立即調用的異步函數表達式作為其中一種解決方式。
carbon 5 最新 ECMAScript 2022 (ES2022) 標準都新增了什麼特性?

現在我們可以直接在 async function 外使用 await 關鍵字而不會引發 SyntaxError

carbon 1 2 最新 ECMAScript 2022 (ES2022) 標準都新增了什麼特性?

這是一個等待資源加載的例子:

carbon 2 3 最新 ECMAScript 2022 (ES2022) 標準都新增了什麼特性?

詳細:https://tc39.es/proposal-top-level-await/

相對索引

使用 .at() 方法可以給定相對索引來獲取元素,如果給定的索引值為就和直接使用中括號訪問相同,如果給定的索引值為,則會從陣列最後一項往回數。

適用類型:Array、String、TypedArray

carbon 6 最新 ECMAScript 2022 (ES2022) 標準都新增了什麼特性?

從這個例子中可以得知, arr[arr.length -1]arr.at(-1) 輸出結果皆為陣列最後一個元素 4

提案:https://github.com/tc39/proposal-relative-indexing-method

Object.hasOwn()

新增 Object.hasOwn() ,使 Object.prototype.hasOwnProperty() 更易於訪問。

carbon 1 3 最新 ECMAScript 2022 (ES2022) 標準都新增了什麼特性?

提案:https://github.com/tc39/proposal-accessible-object-hasownproperty

類靜態初始化區塊

對靜態字段和靜態私有字段提供一種新的機制,能夠在類聲明/定義期間執行靜態初始化區塊。

carbon 2 4 最新 ECMAScript 2022 (ES2022) 標準都新增了什麼特性?

靜態區塊提供了在當前類聲明的上下文中評估語句的機會,具有對私有狀態(無論是實例私有還是靜態私有)的訪問特權:

carbon 3 3 最新 ECMAScript 2022 (ES2022) 標準都新增了什麼特性?

提案:https://github.com/tc39/proposal-class-static-block

參考資料

4e52d54f6bc42abb41d26eb5b0df6517?s=250&d=wavatar&r=g 最新 ECMAScript 2022 (ES2022) 標準都新增了什麼特性?
0 0 評分數
Article Rating
訂閱
通知
guest
0 Comments
在線反饋
查看所有評論