ECMAScript 2020新特性

JavaScript 是最流行的编程语言之一，每年都会添加新的特性。但是需要注意的是，并非所有新的特性都被现代浏览器所支持，不过还好有 Babel 的存在，我们已经可以使用新特性了。接下来，本文将介绍 ECMAScript 2020（ES11）的一些最新特性。

Optional Chaining 可选链式调用

在平时的开发过程中，想必开发人员经常会遇到这个问题：

TypeError: Cannot read property ‘x’ of undefined

这个错误表示我们正在访问一个不属于对象的属性 x。

访问对象的属性

const Person = {
    sex: {
        male: true
    }
};

console.log(Person.sex.male); // true

console.log(Person.age.young); // 抛出错误：TypeError: Cannot read property 'young' of undefined

在这种情况下，JavaScript 引擎会抛出错误，并中断JavaScript的执行。但某些情况下，我们并不关注这个属性值是否一定存在。于是，可选链式调用就派上用场了！

我们可以使用由一个问号和一个点组成的可选链式操作符，去表示不应该引发错误。如果没有值，应该返回 undefined。

console.log(Person.age?.young); // 输出 undefined

可选链式调用不仅可以使用在对象上，还可以使用在数组或函数上。

访问数组

let country =  ['China', 'America', 'Russia'];

console.log(country[1]); // 输出：America

country = null;

console.log(country[1]); // 抛出错误：TypeError: Cannot read property '1' of null
console.log(country?.[1]); // 输出：undefined

调用函数

let country = () => {
  return 'China'
};

console.log(country()); // 输出：China

country = null;

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

console.log(country?.()); // 输出：undefined

Nullish Coalescing 空值合并

目前，要为变量提供回退值，逻辑操作符「||」 还是必须的。它能适用于很多的情况，但在一些特殊的场景下并不适用。例如，初始值是布尔值(false)或数字(0)的情况。来看一个示例：

let number = 1
let myNumber = number || 8

上面的执行结果：变量 myNumber 等于 1。因为左边的number是一个 「真」 值 1。但是，当变量 number 不是 1 而是 0 呢？

let number = 0
let myNumber = number || 8

上面的执行结果：变量 myNumber 将会被赋值为右边的 8。因为0 是 「假」 值。而我们实际上想得到的myNumber是0，但实际结果并非我们所预期的。空值合并可以帮我们解决问题，它由两个问号组成：「??」 ，可以检查变量 number 是否是一个数字，而不用写额外的代码。

let number = 0
let myNumber = number ?? 8

上面的执行结果：变量myNumber等于0。

「??」操作符右边的值仅在左边的值等于 「null」 或 「undefined」 时有效，因此，例子中的变量 myNumber 现在的值等于 0 了。

Private Fields 私有字段

许多具有 classes 的编程语言允许定义类作为公共的(public)，受保护的(protect)或私有的(private)属性。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

如果我们从外部访问类的私有属性，JavaScript引擎变会报错。

Static fields 静态字段

如果想使用类的方法，首先必须实例化一个类，如下所示：

class Person {
  add_age() {
    console.log("add age");
  }
}

const Mike = new Person();
Mike.add_age();

Mike.add_age();
// 抛出错误：TypeError: Mike.add_age is not a function

当试图去访问没有实例化的 Person类的方法将会抛出一个错误。但如果使用 「static」 字段，类方法可以被 「static」 关键词声明然后从外部调用。

class Person {
  constructor(type) {
    this.type = type;
  }
  static create_person(type) {
    return new Person(type);
  }
}

const Mike = Person.create_person("male"); // 正常运行

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])。但问题是，如果其中一个请求失败了，就会抛出错误。然而，有时候我们希望某个请求失败后，其他请求的结果能够正常返回。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)

总结

这篇文章介绍了ECMAScript2020的一些新特性。如果想了解更多，可以看看 tc39 委员会的官方Github仓库。