ECMAScript 2020（ES2020）的新增语法

最新推荐文章于 2024-05-27 09:24:28 发布

凉生可可

最新推荐文章于 2024-05-27 09:24:28 发布

阅读量713

点赞数 1

分类专栏：前端 ES2020

原文链接：https://alligator.io/js/es2020/](https://alligator.io/js/es2020

版权

前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

ES2020

1 篇文章 0 订阅

订阅专栏

在本文中，我们将回顾ES2020随附的一些最新和最出色的功能。

安装

由于许多人的浏览器版本低，我们需要使用babel来让用户使用无法使用的特性。为了简单起见，我将使用Parcel bundler使一切尽快运行。

$ yarn add parcel-bundler

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

不幸的是，现在似乎还没有ES2020的有效预设。如果将它们放在.babelrc文件中并保存，Parcel应该会为您安装所有内容

{
  "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

当我们处理多个Promise时，特别是当它们相互依赖时，记录每个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}
// ]

合并空运算符

由于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

可选的链接操作

与合并空操作符类似，JavaScript在处理错误值时可能无法按我们希望的方式工作。如果我们想要的是未定义的，我们可以返回一个值，但是如果到它的路径是未定义的呢?通过在.之前添加一个问号，我们可以使值的路径的任何部分成为可选的，这样我们仍然可以与它交互。

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可以处理的最大数字是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

动态引入

如果您有一个写满实用程序功能的文件，而且其中某些功能可能很少使用，那么导入其所有依赖项可能只是浪费资源。现在，我们可以使用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);

本文译自 [https://alligator.io/js/es2020/](https://alligator.io/js/es2020/) 在本文中，我们将回顾ES2020随附的一些最新和最出色的功能。

安装