正常操作，正常分析，大家好，我是 D1n910。

本文學(xué)習(xí)自掘金

[譯] ECMAScript 2020 新特性

作者：Huup_We
鏈接：https://juejin.im/post/5ec34ed96fb9a0437b76f638
來(lái)源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

主要內(nèi)容是 ECMAScript 2020（E11） 的一些新特性。

以下代碼內(nèi)容，主要跑在

Google Chrome 版本 83.0.4103.61（正式版本） （64 位）

——能跑就跑，不能跑的我會(huì)說明。

ECMAScript 2020 新特性

Optional Chaining 可選鏈?zhǔn)秸{(diào)用

當(dāng)我們?cè)L問一個(gè)不屬于對(duì)象的屬性時(shí)，會(huì)報(bào)錯(cuò)。實(shí)際上，一般情況下，我們都知道會(huì)有這個(gè)內(nèi)容。

我們經(jīng)常會(huì)用 a.b && a.b.c 的寫法來(lái)解決這種問題。

現(xiàn)在通過可選鏈?zhǔn)秸{(diào)用的方法也可以解決這個(gè)問題。

可選鏈?zhǔn)讲僮鞣梢粋€(gè)問好和一個(gè)點(diǎn)組成，它表示在訪問一個(gè)不屬于對(duì)象的屬性時(shí)，不應(yīng)該報(bào)錯(cuò)，應(yīng)該返回 undefined。

在訪問數(shù)組、函數(shù)的時(shí)候，也會(huì)有類似上面的報(bào)錯(cuò)。也可以用可選鏈?zhǔn)秸{(diào)用的進(jìn)行處理。

訪問數(shù)組

訪問函數(shù)

Nullish Coalescing 空值合并

現(xiàn)在為了變量提供回退值，邏輯操作符 || 是常用的辦法。

但是在一些特殊的場(chǎng)景中，卻不是很適用。

比如下面的場(chǎng)景，我們給我們的變量進(jìn)行賦值，規(guī)則是如果我們要賦的值不是數(shù)字時(shí)，就默認(rèn)為 7。

?但是如果我們的初始值為 0 的話，就不適用這種場(chǎng)景了。

空值合并的合并操作符 ?? 用以可以檢查左值是否是 null 或 undefined ，如果是才會(huì)返回右值。

Private Fields 私有字段

具有 classes 的編程語(yǔ)言允許定義類為公共的，受保護(hù)的或私有的屬性。Public 屬性可以從類的外部或者子類訪問，protected 屬性只能被子類訪問，private 屬性只能被類內(nèi)部訪問。

Javascript 從 ES6 開始支持類語(yǔ)法，但是直到現(xiàn)在才引入私有字段 private。

要定義私有屬性，需要在其前面加上散列符號(hào)：#

像下面這樣：

我們從外部訪問類的私有屬性，勢(shì)必會(huì)報(bào)錯(cuò)

Static Fields 靜態(tài)字段

如果想用類的方法，首先必須實(shí)例化一個(gè)類，如下所示

如果試圖去訪問沒有實(shí)例化的方法，是會(huì)報(bào)錯(cuò)的。

通過 static 關(guān)鍵詞聲明類的方法，就可以直接調(diào)用了。

這個(gè)方法是類本身的方法，不是實(shí)例的方法， 所以本身的實(shí)例是沒有這個(gè)方法的。

作用是為了定義一些類本身就有的屬性，比如一個(gè)“人”類，本身的屬性就是有兩個(gè)眼睛、兩只手，兩雙腿。那么這些其實(shí)本身就可以直接獲得到，沒有必要在實(shí)例里面去專門定義然后獲得。

Toop Level Await 頂級(jí) Await

目前，如果用 await 獲取 promise 函數(shù)的結(jié)果（就是想要等異步方法執(zhí)行完成），那么使用 await 的函數(shù)必須用 async 關(guān)鍵字定義。

下面這里演示了使用 promise 時(shí)，不用await和用await的不同。

await 會(huì)等到異步執(zhí)行完成后，再繼續(xù)后繼的同步事件。

這個(gè)頂級(jí) awiat 的意思可以直接不用 async 就能夠在全局里使用 await。

文章里說這個(gè)特性對(duì)于解決模塊依賴或當(dāng)初始源無(wú)法使用而需要備用源的時(shí)候是非常有用的。

let Vue

try {

? ? Vue = await import('url_1_to_vue')

} catch {

? ? Vue = await import('url_2_to_vue)

}?

不過我感覺好像沒啥用 QAQ

等以后看看是否有用。

Promise.allSettled 方法

等待多個(gè) promise 返回結(jié)果時(shí)，我們可以用 Promise.all([promise_1, promise_2])。但問題是，其中一個(gè)請(qǐng)求失敗了，就會(huì)拋出錯(cuò)誤。如果我們想要獲得執(zhí)行的返回，這里就不是很適用。

如果使用 allSettled 的話，就可以在 then 里捕捉到所有的執(zhí)行返回。

Dynamic Import 動(dòng)態(tài)引入

用 webpack 的模版綁定中已經(jīng)使用過動(dòng)態(tài)引入，現(xiàn)在也有原生支持了。

* 在 chrome 中，實(shí)測(cè) default 是放到 object 里的，不能夠和原文一樣直接調(diào)用。

MatchAll 匹配所有項(xiàng)

MathcAll 的作用是查找字符串中所有正則表達(dá)式的匹配項(xiàng)和它們的位置。

本身有個(gè) match

這邊按照原文用的話，會(huì)報(bào)錯(cuò)。

Uncaught TypeError: String.prototype.matchAll called with a non-global RegExp argument

查了 MDN 文檔后，了解到 matchAll 的用法一般是 Symbol.matchAll。

所以想要像原文一樣的用法，應(yīng)該是像下面這樣使用。

感覺沒啥用，說是可以包括找到匹配項(xiàng)的索引 —— 目前感覺暫時(shí)沒啥用。

globalThis 全局對(duì)象

Javascript 現(xiàn)在我們知道的，可以在瀏覽器端或者服務(wù)器端（Node.js）運(yùn)行。

瀏覽器端的全局對(duì)象是 window

服務(wù)器端的全局對(duì)象是 global

為了統(tǒng)一這兩個(gè)全局對(duì)象，特此推出了 globalThis

——這個(gè)在做 SSR 應(yīng)用的時(shí)候，比較有用～

BigInt

（1）JavaScript 中能夠精準(zhǔn)表達(dá)的最大數(shù)字是 2^53 - 1。

（2）使用 BigInt 可以用來(lái)創(chuàng)建更大的數(shù)字。

對(duì)于 （1），不用瀏覽器有不同的標(biāo)準(zhǔn)，比如谷歌瀏覽器，就能夠表達(dá) 2^53次方

到了一定數(shù)額就不能精準(zhǔn)表達(dá)了

轉(zhuǎn)換成 BigInt 類型，就可以精準(zhǔn)描述和加減法了，當(dāng)然，加減法直接加減的話要用 BigInt 類型的，特征是 BigInt 函數(shù)或者 后綴為n的數(shù)字。

如果類型不同，會(huì)報(bào)錯(cuò)的。

END