小編給大家分享一下ECMAScript 2020 的新特性有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)成立于2013年，我們提供高端重慶網(wǎng)站建設(shè)公司、成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、網(wǎng)站定制、全網(wǎng)整合營銷推廣、成都小程序開發(fā)、微信公眾號開發(fā)、seo優(yōu)化服務(wù)，提供專業(yè)營銷思路、內(nèi)容策劃、視覺設(shè)計、程序開發(fā)來完成項目落地，為玻璃隔斷企業(yè)提供源源不斷的流量和訂單咨詢。

JavaScript 是最流行的編程語言之一，每年都會添加新的特性。本文介紹了添加在 ECMAScript 2020（又稱ES11）中的新特性。

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

Optional Chaining 可選鏈?zhǔn)秸{(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 引擎會像這樣拋出錯誤。但是某些情況下值是否存在并不重要，因為我們知道它會存在。于是，可選鏈?zhǔn)秸{(diào)用就派上用場了！

我們可以使用由一個問號和一個點組成的可選鏈?zhǔn)讲僮鞣?，去表示不?yīng)該引發(fā)錯誤。如果沒有值，應(yīng)該返回undefined。

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

當(dāng)訪問數(shù)組或調(diào)用函數(shù)時，也可以使用可選鏈?zhǔn)秸{(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?.()) // 輸出：undefined

Nullish Coalescing 空值合并

---

目前，要為變量提供回退值，邏輯操作符 || 還是必須的。它適用于很多情況，但不能應(yīng)用在一些特殊的場景。例如，初始值是布爾值或數(shù)字的情況。舉例說明，我們要把數(shù)字賦值給一個變量，當(dāng)變量的初始值不是數(shù)字時，就默認(rèn)其為 7 ：

let number = 1
let myNumber = number || 7

變量 myNumber 等于 1，因為左邊的（number）是一個 真 值 1。但是，當(dāng)變量 number 不是 1 而是 0 呢？

let number = 0
let myNumber = number || 7

0 是 假 值，所以即使 0 是數(shù)字。變量 myNumber 將會被賦值為右邊的 7。但結(jié)果并不是我們想要的。幸好，由兩個問號組成：?? 的合并操作符就可以檢查變量 number 是否是一個數(shù)字，而不用寫額外的代碼了。

let number = 0
let myNumber = number ?? 7

操作符右邊的值僅在左邊的值等于 null 或 undefined 時有效，因此，例子中的變量 myNumber 現(xiàn)在的值等于 0 了。

Private Fields 私有字段

---

許多具有 classes 的編程語言允許定義類作為公共的，受保護(hù)的或私有的屬性。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 關(guān)鍵詞聲明然后從外部調(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ù)的結(jié)果，那使用 await 的函數(shù)必須用 async 關(guān)鍵字定義。

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

頭疼的是，在全局作用域中去等待某些結(jié)果基本上是不可能的。除非使用 立即調(diào)用的函數(shù)表達(dá)式（IIFE）。

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

但引入了 頂級 Await 后，不需要再把代碼包裹在一個 async 函數(shù)中了，如下即可：

const response = await fetch(url)

這個特性對于解決模塊依賴或當(dāng)初始源無法使用而需要備用源的時候是非常有用的。

let Vue
try {
    Vue = await import('url_1_to_vue')
} catch {
    Vue = await import('url_2_to_vue)
}

Promise.allSettled 方法

等待多個 promise 返回結(jié)果時，我們可以用 Promise.all([promise_1, promise_2])。但問題是，如果其中一個請求失敗了，就會拋出錯誤。然而，有時候我們希望某個請求失敗后，其他請求的結(jié)果能夠正常返回。針對這種情況 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()
    })

考慮到許多應(yīng)用程序使用諸如 webpack 之類的模塊打包器來進(jìn)行代碼的轉(zhuǎn)譯和優(yōu)化，這個特性現(xiàn)在還沒什么大作用。

MatchAll 匹配所有項

---

如果你想要查找字符串中所有正則表達(dá)式的匹配項和它們的位置，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 可以在不同環(huán)境中運行，比如瀏覽器或者 Node.js。瀏覽器中可用的全局對象是變量 window，但在 Node.js 中是一個叫做 global 的對象。為了在不同環(huán)境中都使用統(tǒng)一的全局對象，引入了 globalThis 。

// 瀏覽器
window == globalThis // true

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

BigInt

---

JavaScript 中能夠精確表達(dá)的較大數(shù)字是 2^53 - 1。而 BigInt 可以用來創(chuàng)建更大的數(shù)字

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

以上是“ECMAScript 2020 的新特性有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標(biāo)題：ECMAScript2020的新特性有哪些-創(chuàng)新互聯(lián)
文章位置：http://chinadenli.net/article10/dgjjgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、移動網(wǎng)站建設(shè)、網(wǎng)站排名、響應(yīng)式網(wǎng)站、App設(shè)計、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)