ECMAScript 2020 的新特性

JavaScript 是最受歡迎的程式語言之一，每年都會加入新的功能。本文介紹了新增在 ECMAScript 2020（又稱ES11）中的新特性。

在引進 ECMAScript 2015（又稱 ES6）之前，JavaScript 發展的非常緩慢。但自 2015 年起，每年都有新特性加入。需要注意的是，不是所有特性都被現代瀏覽器支持，但由於 JavaScript 編譯器 Babel 的存在，我們已經可以使用新特性了。本文將介紹 ECMAScript 2020（ES11）的一些最新特性。

Optional Chaining 可選鍊式呼叫

---

#大部分開發者都曾經遇到這個問題：

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 引擎會像這樣拋出錯誤。但是某些情況下值是否存在並不重要，因為我們知道它會存在。於是，可選鍊式呼叫就派上用場了！

我們可以使用由一個問號和一個點組成的可選鍊式運算符，去表示不應該引發錯誤。如果沒有值，應該回傳 undefined。

console.log(flower.species?.lily) // 输出 undefined

當存取陣列或呼叫函數時，也可以使用可選鍊式呼叫。

存取陣列

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

呼叫函數

let plantFlowers = () => {
  return 'orchids'
}

console.log(plantFlowers()) // 输出：orchids

plantFlowers = null

console.log(plantFlowers()) // 抛出错误：TypeError: plantFlowers is not a function

console.log(plantFlowers?.()) // 输出：undefined

Nullish Coalescing 空值合併

---

#目前，要為變數提供回退值，邏輯運算子|| 還是必須的。它適用於許多情況，但不能應用在一些特殊的場景。例如，初始值是布林值或數字的情況。舉例說明，我們要把數字賦值給一個變量，當變數的初始值不是數字時，就預設為7 ：

---

let number = 1
let myNumber = number || 7

變數myNumber 等於1，因為左邊的（number）是一個真值1 。但是，當變數 number 不是 1 而是 0 呢？

let number = 0
let myNumber = number || 7

0 是 假 值，所以即使 0 是數字。變數 myNumber 將會被賦值為右邊的 7。但結果不是我們想要的。幸好，由兩個問號組成：?? 的合併運算子就可以檢查變數 number 是否是一個數字，而不用寫額外的程式碼了。

let number = 0
let myNumber = number ?? 7

運算子右邊的值只在左邊的值等於 null 或 undefined 時有效，因此，範例中的變數 myNumber 現在的值等於 0 了。

---

Private Fields 私有欄位

許多具有 classes 的程式語言允許定義類別作為公共的，受保護的或私有的屬性。 Public 屬性可以從類別的外部或子類別訪問，protected 屬性只能被子類別訪問，private 屬性只能被類別內部存取。 JavaScript 從 ES6 開始支援類別語法，但直到現在才引入了私有欄位。要定義私有屬性，必須在其前面加上雜湊符號：#。

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 靜態欄位

如果想使用類別的方法，首先必須實例化一個類，如下所示：

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 關鍵字聲明然後從外部呼叫。

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 函數的結果，那麼使用 await 的函數必須用 async 關鍵字定義。

const func = async () => {
    const response = await fetch(url)
}

頭痛的是，在全域作用域中去等待某些結果基本上是不可能的。除非使用 立即呼叫的函數表達式（IIFE）。

(async () => {
    const response = await fetch(url)
})()

但引入了 頂級Await 後，不需要再把程式碼包裹在一個async 函數中了，如下即可：

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 動態引入############你也許在 webpack 的模組綁定中已經使用過動態引入。但對於該特性的原生支援已經到來：###

// Alert.js
export default {
    show() {
        // 代码
    }
}


// 使用 Alert.js 的文件
import('/components/Alert.js')
    .then(Alert => {
        Alert.show()
    })

考虑到许多应用程序使用诸如 webpack 之类的模块打包器来进行代码的转译和优化，这个特性现在还没什么大作用。

MatchAll 匹配所有项

---

如果你想要查找字符串中所有正则表达式的匹配项和它们的位置，MatchAll 非常有用。

const regex = /\b(apple)+\b/;
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 可以在不同环境中运行，比如浏览器或者 Node.js。浏览器中可用的全局对象是变量 window，但在 Node.js 中是一个叫做 global 的对象。为了在不同环境中都使用统一的全局对象，引入了 globalThis 。

// 浏览器
window == globalThis // true

// node.js
global == globalThis // true

BigInt

---

JavaScript 中能够精确表达的最大数字是 2^53 - 1。而 BigInt 可以用来创建更大的数字

const theBiggerNumber = 9007199254740991n
const evenBiggerNumber = BigInt(9007199254740991)

结论

---

我希望这篇文章对您有用，并像我一样期待 JavaScript 即将到来的新特性。如果想了解更多，可以看看 tc39 委员会的官方Github仓库。

推荐教程：《JS教程》

以上是ECMAScript 2020 的新特性的詳細內容。更多資訊請關注PHP中文網其他相關文章！