【译】ECMAScript2020(ES2020)

是时候对JavaScipt进行更新。本文我们一起回顾来自ES2020的最新的和最伟大的功能。

安装

因为很多人不以为更新浏览器可以减轻开发者的工作， 我们需要借助babel来使得用户可以使用不发使用的功能。为了这个简单的目标，我们使用Parcel bundler让一切尽可能快的运行起来。

$ yarn add parcel-bundler

package.json

"script": {
    "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的私有变量

class主要目的之一是将代码包含到更多可重复使用的模块中去。我们创建一个class使用在很多不同的地方， 但是你可能并不希望他全部的内部东西全局可用。

现在， 通过在变量和函数前添加一个简单的hash标志（#）， 这个标志可以全部保留到class内部使用。

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

当和多个promise同时工作的时候， 尤其他们相互依赖时， 记录调试错误发生了什么是很有用的。借助Promise.allSettled 我们可以创建一个当所有promise都完成时才返回的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}
// ]

Nullish Coalescing Operator（空合并运算符）

因为JavaScript是动态类型， 在分配变量时， 我们需要记住JavaScript对真/假值的处理。假如我们有一个具有多个变量的对象， 有时我们允许想空对象或者数组0这样的假值。设置默认值很快会变得很烦人， 因为他会覆盖应该是有效的值。

let person = {
  profile: {
    name: "",
    age: 0
  }
};

console.log(person.profile.name || "Anonymous"); // Anonymous
console.log(person.profile.age || 18); // 18

我们使用两个问号（空合并运算符）替代逻辑与运算符使类型更加严格， 这样做仅允许null或者undefined设置默认值。

console.log(person.profile.name ?? "Anonymous"); // ""
console.log(person.profile.age ?? 18); // 0

Optional Chaining Operator

与前一个运算相似， JavaScript在假值处理时， 可能不会按照我们的预期进行操作。如果是undefined则返回一个值， 但是如果得到这个值之前出现undefined怎么办？

我们在.之前加问号可以使路径的任何部分变为可选， 以至于可以进行交互。

let person = {};

console.log(person.profile.name ?? "Anonymous"); // person.profile is undefined
console.log(person?.profile?.name ?? "Anonymous");
console.log(person?.profile?.age ?? 18);

BigInt

我们不想探究JavaScript如何操作数字的技术细节， 但是当数字足够大时变得不稳定。JavaScript中可操作的最大值是2^53, 即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

我们用一个新的new BigInt来回避这个问题。通过在尾部加n对超级大的数字进行操作。我们无法把标准数字和BIgInt进行混合， 因此需要运算的需要都是BigInt型。

const bigNum = 100000000000000000000000000000n;

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

Dynamic Import

假如你有一个全部是工具函数的文件， 文件中的大部分很少使用且全部导入他们的依赖浪费资源。现在我们使用async/await在需要的地方动态导入我们的依赖。

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

export { add };

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

doMath(4, 2);

测试工程

原文链接