JavaScript 是最流行的編程語言之一，每年都會添加新的特性。
本文介紹了添加在 ECMAScript 2020（又稱ES11）中的新特性。
在引入 ECMAScript 2015（又稱 ES6）之前，JavaScript 發(fā)展的非常緩慢。
但自 2015 年起，每年都有新特性添加進來。
需要注意的是，不是所有特性都被現(xiàn)代瀏覽器支持，但是由于 JavaScript 編譯器 Babel 的存在，我們已經(jīng)可以使用新特性了。
本文將介紹 ECMAScript 2020（ES11）的一些最新特性。
Optional Chaining 可選鏈式調(diào)用大部分開發(fā)者都遇到過這個問題：
TypeError: Cannot read property ‘x’ of undefined這個錯誤表示我們正在訪問一個不屬于對象的屬性。
訪問對象的屬性const flower = {
colors: {
red: true }
}
console.log(flower.colors.red) // 正常運行 console.log(flower.species.lily) // 拋出錯誤：
TypeError: Cannot read property '
lily'
of undefined在這種情況下，JavaScript 引擎會像這樣拋出錯誤。
但是某些情況下值是否存在并不重要，因為我們知道它會存在。
于是，可選鏈式調(diào)用就派上用場了！我們可以使用由一個問號和一個點組成的可選鏈式操作符，去表示不應該引發(fā)錯誤。
如果沒有值，應該返回 undefined。
console.log(flower.species?.lily) // 輸出 undefined當訪問數(shù)組或調(diào)用函數(shù)時，也可以使用可選鏈式調(diào)用。
訪問數(shù)組let flowers = ['
lily'
, '
daisy'
, '
rose'
] console.log(flowers[1]) // 輸出：
daisy flowers = null console.log(flowers[1]) // 拋出錯誤：
TypeError: Cannot read property '
1'
of null console.log(flowers?.[1]) // 輸出：
undefined調(diào)用函數(shù)let plantFlowers = () => {
return '
orchids'
}
console.log(plantFlowers()) // 輸出：
orchids plantFlowers = null console.log(plantFlowers()) // 拋出錯誤：
TypeError: plantFlowers is not a function console.log(plantFlowers?.()) // 輸出：
undefinedNullish Coalescing 空值合并目前，要為變量提供回退值，邏輯操作符 || 還是必須的。
它適用于很多情況，但不能應用在一些特殊的場景。
例如，初始值是布爾值或數(shù)字的情況。
舉例說明，我們要把數(shù)字賦值給一個變量，當變量的初始值不是數(shù)字時，就默認其為 7 ：
let number = 1 let myNumber = number || 7變量 myNumber 等于 1，因為左邊的（number）是一個 真 值 1。
但是，當變量 number 不是 1 而是 0 呢？let number = 0 let myNumber = number || 70 是 假 值，所以即使 0 是數(shù)字。
變量 myNumber 將會被賦值為右邊的 7。
但結果并不是我們想要的。
幸好，由兩個問號組成：
?? 的合并操作符就可以檢查變量 number 是否是一個數(shù)字，而不用寫額外的代碼了。
let number = 0 let myNumber = number ?? 7操作符右邊的值僅在左邊的值等于 null 或 undefined 時有效，因此，例子中的變量 myNumber 現(xiàn)在的值等于 0 了。
Private Fields 私有字段許多具有 classes 的編程語言允許定義類作為公共的，受保護的或私有的屬性。
Public 屬性可以從類的外部或者子類訪問，protected 屬性只能被子類訪問，private 屬性只能被類內(nèi)部訪問。
JavaScript 從 ES6 開始支持類語法，但直到現(xiàn)在才引入了私有字段。
要定義私有屬性，必須在其前面加上散列符號：
#。
class Flower {
#leaf_color = "green";
constructor(name) {
this.name = name;
}
get_color() {
return this.#leaf_color;
}
}
const orchid = new Flower("orchid");
console.log(orchid.get_color());
// 輸出：
green console.log(orchid.#leaf_color) // 報錯：
SyntaxError: Private field '
#leaf_color'
must be declared in an enclosing class如果我們從外部訪問類的私有屬性，勢必會報錯。
Static Fields 靜態(tài)字段如果想使用類的方法，首先必須實例化一個類，如下所示：
class Flower {
add_leaves() {
console.log("Adding leaves");
}
}
const rose = new Flower();
rose.add_leaves();
Flower.add_leaves() // 拋出錯誤：
TypeError: Flower.add_leaves is not a function試圖去訪問沒有實例化的 Flower 類的方法將會拋出一個錯誤。
但由于 static 字段，類方法可以被 static 關鍵詞聲明然后從外部調(diào)用。
class Flower {
constructor(type) {
this.type = type;
}
static create_flower(type) {
return new Flower(type);
}
}
const rose = Flower.create_flower("rose");
// 正常運行Top Level Await 頂級 Await目前，如果用 await 獲取 promise 函數(shù)的結果，那使用 await 的函數(shù)必須用 async 關鍵字定義。
const func = async () => {
const response = await fetch(url) }
頭疼的是，在全局作用域中去等待某些結果基本上是不可能的。
除非使用 立即調(diào)用的函數(shù)表達式（IIFE）。
(async () => {
const response = await fetch(url) }
)()但引入了 頂級 Await 后，不需要再把代碼包裹在一個 async 函數(shù)中了，如下即可：
const response = await fetch(url)這個特性對于解決模塊依賴或當初始源無法使用而需要備用源的時候是非常有用的。
let Vue try {
Vue = await import('
url_1_to_vue'
) }
catch {
Vue = await import('
url_2_to_vue) }
Promise.allSettled 方法等待多個 promise 返回結果時，我們可以用 Promise.all([promise_1, promise_2])。
但問題是，如果其中一個請求失敗了，就會拋出錯誤。
然而，有時候我們希望某個請求失敗后，其他請求的結果能夠正常返回。
針對這種情況 ES11 引入了 Promise.allSettled 。
promise_1 = Promise.resolve('
hello'
) promise_2 = new Promise((resolve, reject) => setTimeout(reject, 200, '
problem'
)) Promise.allSettled([promise_1, promise_2]) .then(([promise_1_result, promise_2_result]) => {
console.log(promise_1_result) // 輸出：
{
status: '
fulfilled'
, value: '
hello'
}
console.log(promise_2_result) // 輸出：
{
status: '
rejected'
, reason: '
problem'
}
}
)成功的 promise 將返回一個包含 status 和 value 的對象，失敗的 promise 將返回一個包含 status 和 reason 的對象。
Dynamic Import 動態(tài)引入你也許在 webpack 的模塊綁定中已經(jīng)使用過動態(tài)引入。
但對于該特性的原生支持已經(jīng)到來：
// Alert.js export default {
show() {
// 代碼 }
}
// 使用 Alert.js 的文件 import('
/components/Alert.js'
) .then(Alert => {
Alert.show() }
)考慮到許多應用程序使用諸如 webpack 之類的模塊打包器來進行代碼的轉譯和優(yōu)化，這個特性現(xiàn)在還沒什么大作用。
MatchAll 匹配所有項如果你想要查找字符串中所有正則表達式的匹配項和它們的位置，MatchAll 非常有用。
const regex = /(apple)+/;
const fruits = "pear, apple, banana, apple, orange, apple";
for (const match of fruits.match(regex)) {
console.log(match);
}
// 輸出 // // '
apple'
// '
apple'
相比之下，matchAll 返回更多的信息，包括找到匹配項的索引。
for (const match of fruits.matchAll(regex)) {
console.log(match);
}
// 輸出 // // [ // '
apple'
, // '
apple'
, // index: 6, // input: '
pear, apple, banana, apple, orange, apple'
, // groups: undefined // ], // [ // '
apple'
, // '
apple'
, // index: 21, // input: '
pear, apple, banana, apple, orange, apple'
, // groups: undefined // ], // [ // '
apple'
, // '
apple'
, // index: 36, // input: '
pear, apple, banana, apple, orange, apple'
, // groups: undefined // ]globalThis 全局對象JavaScript 可以在不同環(huán)境中運行，比如瀏覽器或者 Node.js。
瀏覽器中可用的全局對象是變量 window，但在 Node.js 中是一個叫做 global 的對象。
為了在不同環(huán)境中都使用統(tǒng)一的全局對象，引入了 globalThis 。
// 瀏覽器 window == globalThis // true // node.js global == globalThis // trueBigIntJavaScript 中能夠精確表達的最大數(shù)字是 2^53 - 1。
而 BigInt 可以用來創(chuàng)建更大的數(shù)字const theBiggerNumber = 9007199254740991n const evenBiggerNumber = BigInt(9007199254740991)結論我希望這篇文章對您有用，并像我一樣期待 JavaScript 即將到來的新特性。
如果想了解更多，可以看看 tc39 委員會的官方Github倉庫。
推薦教程：
《JS教程》以上就是ECMAScript 2020 的新特性的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！
微信
分享相關標簽：
ECMAScript本文轉載于：
掘金社區(qū)，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
你會用 vue 寫小程序嗎
下一篇：
微信公眾號子菜單怎么添加很多文章？相關文章相關視頻ECMAScript6入門之Class對象的實例詳...JavaScript和ECMAScript 之間的...ECMAscript 變量作用域總結教程詳解ECMAScript7規(guī)范中instanceo...ECMAScript 2020 的新特性ECMAScript語法基礎ECMAScript語法基礎-1ECMAScript語法基礎-2 [溫州做微信公眾號]