ES2020中实用的新特性一览

私有变量 Private Class Variables

类的主要作用之一是将我们的代码包含在可重用的模块中。所以会在许多不同地方使用到同一个类，而你可能不希望其中的所有内容在全局范围内都可用。

现在，通过在变量或函数前面添加一个哈希符号#，可以将它们设为私有属性，只在类内部可用。

class Message {
  #message = "Howdy"

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

const greeting = new Message()

greeting.greet() // Howdy
console.log(greeting.#message) // Private field '#message' must be declared in an enclosing class

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或未定义时才允许使用默认值。

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

可选链 Optional Chaining Operator

与空值合并运算符相似，JavaScript处理假值时可能无法发挥我们想要的作用。如果我们想要的是未定义的，我们可以返回一个值，但是如果它的路径是未定义的，该怎么办？

通过在点符号前添加问号，我们可以将值路径的任何部分设置为可选，以便我们仍然可以与之交互。

let person = {};

console.log(person.profile.name ?? "Anonymous"); // Cannot read property 'name' of undefined
console.log(person?.profile?.name ?? "Anonymous"); // Anonymous
console.log(person?.profile?.age ?? 18); // 18

BigInt

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

使用BigInt数据类型可以解决此问题。通过在数字末尾加上字母n，我们就可以使用大数字运算。注意标准数字与BigInt数字不能混合使用。

const bigNum = 100000000000000000000000000000n;

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

动态导入 Dynamic Import

在项目中，某些功能可能很少使用，而导入所有依赖项可能只是浪费资源。现在可以使用async / await在需要时动态导入依赖项。

math.js 导出模块:

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);

原文: https://alligator.io/js/es2020/