簡介

ES12是ECMA協會在2021年6月發行的一個版本，因為是ECMAScript的第十二個版本，所以也稱為ES12.

ES12發行到現在已經有一個月了，那么ES12有些什么新特性和不一樣的地方呢？一起來看看吧。

基本上ES12引入了replaceAll方法用于對String進行操作，Promise.any用于對Promise進行組合操作，AggregateError用于表示多個錯誤的集合，新的邏輯操作符??=, &&=, ||=，弱引用WeakRef，FinalizationRegistry用于垃圾回收的注冊，一個數字的分隔符1_000，更加精準的數組sort方法Array.prototype.sort。

下面本文將會一一進行講解。

replaceAll

熟悉java的朋友應該都知道，java中有兩個進行字符串替換的方法，分別是replace和replaceAll，他們的區別在于replace是替換字符串，而replaceAll是進行正則表達式匹配。

但是在javascript中兩者的涵義有所不同，在JS中replace是替換第一個出現的字符串，而replaceAll就是字面上的意思替換所有的字符串，我們舉個例子：

const string="flydean is a good fly" console.log(string.replace("fly", "butterfly"));

上面的值返回：

butterflydean is a good fly

如果改用replaceAll:

const string="flydean is a good fly" console.log(string.replaceAll("fly", "butterfly")); butterflydean is a good butterfly

私有方法

自從JS有了類的概念之后，就可以在類中定義方法，并通過實例化之后的類進行調用，如下所示：

class Student {getAge() {console.log("永遠18歲")} }student= new Student(); student.getAge();

上面代碼運行結果：

"永遠18歲"

但是如果我們不希望getAge()方法直接暴露給外部使用，也就是說希望getAge()是一個私有方法，那么只需要在方法前面加上#即可。

class Student {#getAge() {console.log("永遠18歲")} }student= new Student(); student.getAge();

同樣運行，那么會得到下面的錯誤提示：

Error: student.getAge is not a function

怎么處理呢？我們知道私有方法是可以在方法內部調用的，那么只需要創建一個公有方法，然后在這個公有方法中調用私有方法即可，如下所示：

class Student {#getAge() {console.log("永遠18歲")}getPublicAge(){this.#getAge();}}student= new Student(); student.getPublicAge();

我們可以得到同樣的結果。

私有屬性

上面講到了私有方法，那么對于私有屬性是怎處理的呢？

通常，對于屬性，我們可以以get修飾符來進行修飾，然后就可以直接通過屬性名來訪問了：

class Student {get Age() {return 18;}}student= new Student(); console.log(student.Age);

結果我們會得到18這個輸出。

同樣，可以在屬性名前面加上#，讓其變成私有變量，如下所示：

class Student {get #Age() {return 18;}}student= new Student(); console.log(student.Age);

上面代碼將會輸出undefined。

要想訪問上述的私有屬性，則可以用公有屬性去調用私有屬性方法：

class Student {get #Age() {return 18;}get publicAge() {return this.#Age} }student= new Student(); console.log(student.publicAge);

非常好用。

Promise.any() 和 AggregateError

promise.any可以返回任意一個提前resolve的結果，在現實的應用中，這種情況是非常常見的，我們來模擬一個例子：

const prom1 = new Promise((resolve, reject) => {setTimeout(() => resolve("promise one"),Math.floor(Math.random() * 100)); }); const prom2 = new Promise((resolve, reject) => {setTimeout(() => resolve("promise two"),Math.floor(Math.random() * 100)); }); const prom3 = new Promise((resolve, reject) => {setTimeout(() => resolve("promise three"),Math.floor(Math.random() * 100)); });(async function() {const result = await Promise.any([prom1, prom2, prom3]);console.log(result); })();

上述代碼可以隨機輸出promise one，promise two，promise three。

如果將上述代碼改成所有的都reject，那么會拋出AggregateError：

const prom1 = new Promise((resolve, reject) => {setTimeout(() => reject("promise one rejected"),Math.floor(Math.random() * 100)); }); const prom2 = new Promise((resolve, reject) => {setTimeout(() => reject("promise two rejected"),Math.floor(Math.random() * 100)); }); const prom3 = new Promise((resolve, reject) => {setTimeout(() => reject("promise three rejected"),Math.floor(Math.random() * 100)); });try{ (async function() {const result = await Promise.any([prom1, prom2, prom3]);console.log(result); })(); } catch(error) {console.log(error.errors); }

報的錯如下：

Uncaught (in promise) AggregateError: No Promise in Promise.any was resolved

注意，必須是所有的promise都被reject之后才會拋出AggregateError，如果有部分成功，那么將會返回成功的結果。

數字分隔符

這個新特性是為了方便程序員看代碼而出現的，如果數字比較大，那么看起來就不是那么一目了然，比如下面的長數字：

const number= 123456789；

一眼看不出這個數字的體量到底是多大，所以ES12提供了數字分隔符_。

分隔符不僅可以分割十進制，也可以分割二凈值或者十六凈值的數據，非常好用。

const number = 1_000_000_000_000; const binary = 0b1010_0101_1111_1101; const hex = 0xAF_BF_C3;

上面例子分別代表了十進制，二進制和十六進制的數據，非常直觀好用。

新的邏輯操作符

我們知道&& 和 || 是被來進行邏輯操作的運算符。

比如：

1 && 2 1 || 2

等操作，ES12提供了&& 和||的二元操作符，如下：

var x = 1; var y = 2; x &&= y; x ||= y;

另外還提供了??的二元操作符，如：

var x; var y = 2; x ??= y;

上面代碼的意思是，判斷x是不是空，如果是空那么將y的值賦給x。

總結

ES12的幾個新特性還是挺實用的，大家可以嘗試一下。

總結

以上是生活随笔為你收集整理的ECMAScript 2021(ES12)新特性简介的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。