ECMAScript 2020（ES2020）的新增语法

是时候对不断变化的艺术作品(即JavaScript)进行另一个更新了。在本文中，我们将回顾ES2020的一些最新和最强大的功能。

安装

自从很多人不认为更新他们的浏览器是为了让他们的开发工作更简单，我们需要使用babel转码来开始使用一些新的语法特性。为了简单起见，我将使用Parcel bundler让所有东西尽可能快地运行。

$ yarn add parcel-bundler

package.json

"scripts": {
  "start": "parcel index.html"
},

遗憾的是，在写这篇文章的时候，我们使用的语法是非常新的，市面上少有一个ES2020的工作预置环境。将下面代码写入到.babelrc文件并保存，Parcel应该可以为您处理所有安装。

.babelrc

{
  "plugins": [
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-private-methods",
    "@babel/plugin-syntax-bigint"
  ]
}

类的私有变量

类的主要目的之一是将代码包含到可重用的模块中。

你创建一个在许多不同地方使用的类，你可能不希望它内部的所有内容都是全局可用的。

现在，通过在变量或函数前面添加一个简单的哈希符号，我们可以将它们完全保留为类内部使用。

class Message {
  // 定义一个私有变量
  #message = "Howdy"

  greet() { console.log(this.#message) }
}

const greeting = new Message()
// 通过实例方法调用访问
greeting.greet() // Howdy
// 直接访问类变量
console.log(greeting.#message) // Private name #message is not defined

Promise.allSettled

当我们在使用多实例promises的时候，特别是当他们互相依赖的时候，记录每次调试发生的错误是非常有用的，通过使用Promise.allSettled，我们可以创建一个仅仅当全部的promises完成才返回的promise，他将返回一个包含每个promise执行结果的数组。

const p1 = new Promise((res, rej) => setTimeout(res, 1000));

const p2 = new Promise((res, rej) => setTimeout(rej, 1000));

Promise.allSettled([p1, p2]).then(data => console.log(data));

// [
//   Object { status: "fulfilled", value: undefined},
//   Object { status: "rejected", reason: undefined}
// ]

空值合并运算符（??）

空值合并运算符（??）是一个逻辑运算符。当左侧操作数为 null 或 undefined 时，其返回右侧的操作数。否则返回左侧的操作数。

与逻辑或（||）操作符不同，逻辑或会在左操作数为 假值 时返回右侧操作数。也就是说，如果你使用 || 来为某些变量设置默认的值时，你可能会遇到意料之外的行为。比如为假值（例如，'' 或 0）时。见下面的例子。

const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// expected output: 0

可选链式操作符（?.）

与空值合并操作符类似，JavaScript在处理错误值时可能无法按我们希望的方式工作。如果他是未定义的，我们可以返回一个值，但是如果到它的路径是未定义的呢?

通过在点表示法之前添加一个问号，我们可以使值的路径的任何部分成为可选的，这样我们仍然可以与它交互。

如果访问对象上不存在的属性上的属性，使用.操作符会直接报错。

let person = {};

// 如果person对象不包含profile会报错
console.log(person.profile.name ?? "Anonymous"); // person.profile is undefined
// 下面的路径是可选的，如果person对象不包含profile属性直接返回"Anonymous"
console.log(person?.profile?.name ?? "Anonymous");
console.log(person?.profile?.age ?? 18);

BigInt

我们不会深入讨论技术细节，但是由于JavaScript处理数字的方式，当您达到足够高的级别时，就会出现一些意料之外的事情。JavaScript能处理的最大数字是2的53次方，我们可以使用Number的MAX_SAFE_INTEGER属性得到这个值。

const max = Number.MAX_SAFE_INTEGER;

console.log(max); // 9007199254740991

如果超过了这个范围，事情就会变得有点奇怪……

console.log(max + 1); // 9007199254740992
console.log(max + 2); // 9007199254740992
console.log(max + 3); // 9007199254740994
console.log(Math.pow(2, 53) == Math.pow(2, 53) + 1); // true

我们可以使用新的BigInt数据类型来解决这个问题。通过把字母n放在末尾，我们可以开始使用并与大得离谱的数字进行交互。我们无法将标准数字与BigInt数字混合在一起，因此任何数学运算都需要使用BigInt来完成。

const bigNum = 100000000000000000000000000000n;

console.log(bigNum * 2n); // 200000000000000000000000000000n

动态引入（Dynamic Import）

如果你有一个工具函数文件，其中一些函数可能很少被使用，将他们完整导入可能只是浪费资源。现在我们可以使用async/await来动态地导入我们需要的依赖项。

这与我们当前Parcel的设置不兼容，因为我们使用的导入只能在Node.js环境中工作。

math.js

const add = (num1, num2) => num1 + num2;

export { add };

index.js

const doMath = async (num1, num2) => {
  if (num1 && num2) {
    const math = await import('./math.js');
    console.log(math.add(5, 10));
  };
};

doMath(4, 2);

结论

本文不完全翻译至：https://alligator.io/js/es2020/

其中加了很多自己的想法和影子，方便阅读。

翻译完全是为了让自己以及更多的人了解，学习新的语法。