JavaScript is one of the most popular programming languages, with new features added every year. This article introduces the new features added in ECMAScript 2020 (also known as ES11).

Before the introduction of ECMAScript 2015 (also known as ES6), JavaScript was developing very slowly. But since 2015, new features have been added every year. It should be noted that not all features are supported by modern browsers, but thanks to the JavaScript compiler Babel, we can already use the new features. This article will introduce some of the latest features of ECMAScript 2020 (ES11).

Optional Chaining Optional chaining call

Most developers have encountered this problem:

TypeError: Cannot read property 'x' of undefined

This error means that we are accessing a property that does not belong to the object.

Accessing the properties of an object

const flower = {
    colors: {
        red: true
    }
}
console.log(flower.colors.red) // 正常運(yùn)行

console.log(flower.species.lily) // 拋出錯(cuò)誤：TypeError: Cannot read property 'lily' of undefined

In this case, the JavaScript engine will throw an error like this. But in some cases it doesn't matter whether the value exists because we know it will. So, optional chained calls come in handy!

We can use the optional chain operator consisting of a question mark and a dot to indicate that an error should not be raised. If there is no value, undefined should be returned.

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

Optional chained calls can also be used when accessing an array or calling a function.

Accessing the array

let flowers =  ['lily', 'daisy', 'rose']

console.log(flowers[1]) // 輸出：daisy

flowers = null

console.log(flowers[1]) // 拋出錯(cuò)誤：TypeError: Cannot read property '1' of null
console.log(flowers?.[1]) // 輸出：undefined

Calling the function

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

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

plantFlowers = null

console.log(plantFlowers()) // 拋出錯(cuò)誤：TypeError: plantFlowers is not a function

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

Nullish Coalescing Null value merging

Currently, to provide a fallback value for a variable, the logical operator || is still required. It is suitable for many situations, but cannot be applied in some special scenarios. For example, the initial value is a Boolean value or a number. For example, we want to assign a number to a variable. When the initial value of the variable is not a number, it defaults to 7:

let number = 1
let myNumber = number || 7

The variable myNumber is equal to 1, because the left (number) is a true value 1 . But what if the variable number is not 1 but 0?

let number = 0
let myNumber = number || 7

0 is a false value, so even though 0 is a number. The variable myNumber will be assigned the value 7 on the right. But the result is not what we want. Fortunately, the union operator consisting of two question marks: ?? can check whether the variable number is a number without writing additional code.

let number = 0
let myNumber = number ?? 7

The value on the right side of the operator is only valid when the value on the left is equal to null or undefined. Therefore, the variable myNumber in the example now has a value equal to 0.

Private Fields Private Fields

Many programming languages ??with classes allow defining classes as public, protected or private properties. Public properties can be accessed from outside the class or subclasses, protected properties can only be accessed by subclasses, and private properties can only be accessed within the class. JavaScript has supported class syntax since ES6, but private fields were not introduced until now. To define a private property, it must be preceded by a hash symbol: #.

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) // 報(bào)錯(cuò)：SyntaxError: Private field '#leaf_color' must be declared in an enclosing class

If we access the private properties of the class from the outside, an error will inevitably be reported.

Static Fields Static Fields

If you want to use class methods, you must first instantiate a class, as shown below:

class Flower {
  add_leaves() {
    console.log("Adding leaves");
  }
}

const rose = new Flower();
rose.add_leaves();

Flower.add_leaves() // 拋出錯(cuò)誤：TypeError: Flower.add_leaves is not a function

Attempting to access a method of a Flower class that has not been instantiated will throw an error. But due to static fields, class methods can be declared with the static keyword and then called from outside.

class Flower {
  constructor(type) {
    this.type = type;
  }
  static create_flower(type) {
    return new Flower(type);
  }
}

const rose = Flower.create_flower("rose"); // 正常運(yùn)行

Top Level Await Top Level Await

Currently, if you use await to get the result of a promise function, the function using await must be defined with the async keyword.

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

The headache is that it is basically impossible to wait for certain results in the global scope. Unless using an immediately invoked function expression (IIFE).

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

But after the introduction of top-level Await, there is no need to wrap the code in an async function, as follows:

const response = await fetch(url)

This feature cannot be used to solve module dependencies or when the initial source This is very useful when a backup source is needed.

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

Promise.allSettled method

When waiting for multiple promises to return results, we can use Promise.all([promise_1, promise_2]). But the problem is that if one of the requests fails, an error will be thrown. However, sometimes we hope that after a request fails, the results of other requests can be returned normally. For this situation, ES11 introduced 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'}
    })

A successful promise will return an object containing status and value, and a failed promise will return an object containing status and reason.

Dynamic Import Dynamic Import

You may have used dynamic import in webpack's module binding. But native support for this feature has arrived:

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


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

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

MatchAll 匹配所有項(xiàng)

如果你想要查找字符串中所有正則表達(dá)式的匹配項(xiàng)和它們的位置，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 返回更多的信息，包括找到匹配項(xiàng)的索引。

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 全局對(duì)象

JavaScript 可以在不同環(huán)境中運(yùn)行，比如瀏覽器或者 Node.js。瀏覽器中可用的全局對(duì)象是變量 window，但在 Node.js 中是一個(gè)叫做 global 的對(duì)象。為了在不同環(huán)境中都使用統(tǒng)一的全局對(duì)象，引入了 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)

結(jié)論

我希望這篇文章對(duì)您有用，并像我一樣期待 JavaScript 即將到來的新特性。如果想了解更多，可以看看 tc39 委員會(huì)的官方Github倉庫。

推薦教程：《JS教程》

The above is the detailed content of What's new in ECMAScript 2020. For more information, please follow other related articles on the PHP Chinese website!