ES2020 新特性

1、使用 # 号快速建立类的私有变量

类的主要目的之一是把咱们的代码复用到更多模块中去，可是咱们又不但愿把全部的属性和方法都暴露出来，如今，有了这个新特性，咱们就能够很轻易的实现这个想法了，只须要在咱们的私有属性或者方法前面加一个 # 号便可：

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

2、Promise.allSelected

当咱们在使用多个 promise，尤为是这些 promise 有依赖关系时，打印每一个 promise 的日志显得尤其重要，这能够帮助咱们调试错误。有了 Promise.allSelected，咱们能够建立一个新的 promise，这个 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}
// ]

3、空值合并运算符 ??

因为 JavaScript 的类型时动态的，在分配变量时，咱们不得不去记住哪些值会被判断为真，哪些会被判断为假。当咱们在建立一个对象时，一般会初始化属性为假的值，好比一个空字符串 或者是 0。设置默认值就会变得很烦人，由于它会覆盖有效值，看下以下 demo，你就会发现这么处理真的很烦人：

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

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

上述例子中，可能结果并非咱们想要的，咱们想名字为空或者 0 岁也是合理的，应该不被代替，咱们能够用 ?? 运算符替换掉 || 运算符，由于 ?? 运算符的类型检测会更严格一点，它只会把 null 和 undefined 判断为 false。

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

4、可选链运算符

与空值合并运算符相似，JavaScript 在处理虚假值时，可能没法按照咱们的意愿进行操做。当属性值未定义时，咱们能够返回一个默认值，可是若是属性的路径未被定义呢？

答案是，能够经过在点符号前添加问号，咱们能够将属性路径的任何部分设置为可选，以便操做。

let person = {};

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

5、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

咱们可使用新的数据类型 BigInt 来处理上述问题。只需在数字后面加个符号 n，咱们就能够疯狂的使用大的数值了。咱们不能用 BigInt 数字混淆标准数字，因此通常在数学计算时使用 BigInt 类型。

const bigNum = 100000000000000000000000000000n;

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

6、使用 async/await 动态导入模块

若是咱们有不少的功能函数，有些是不多用的，那么一块儿导入会使资源浪费，如今咱们可使用 async/await 来动态导入这些依赖了，可是这个方法仅适用于 node.js 环境。

// 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/

原创文章，首发于我的网站，转载请注明出处