ES2021 的所有新功能

本文最初发布在我的博客上。更多文章和教程，请访问inspiredwebdev.com。查看我在Educative上的JavaScript 课程，学习从 ES6 到 ES2020 的所有内容。

自 2015 年以来，每年JavaScript都会不断更新其规格并添加新的有趣功能。

尽管 ES2021 的发布还很遥远，但我们已经可以预见其未来，因为许多功能已经达到第 4 阶段并将包含在规范中。

对于那些不知道的人来说，提案过程分为 4 个阶段，其中第 4 个阶段是最后一个阶段，标志着提案完成。

作为开发者，及时了解语言的最新规范至关重要。如果你觉得自己跟不上JavaScript过去几年的诸多更新，我推荐你阅读我的书，它涵盖了从语言基础知识到最新 ES2020 规范的所有内容，甚至还包含一些简介。你可以在GithubTypeScript上免费阅读，那里还有购买电子书的链接，或者你也可以在Educative上查看我的课程。

现在，让我们开始了解 ES2021 的第一个新功能：

String.prototype.replaceAll

String.replace是一个很有用的方法，它允许我们将字符串中的模式替换为其他内容。问题是，如果我们想使用string而不是正则表达式作为模式，那么只有第一个匹配项会被替换。

const str = 'I like my dog, my dog loves me';
const newStr = str.replace('dog', 'cat');
newStr;
// "I like my cat, my dog loves me"

顾名思义，String.replaceAll它将完全按照我们在这种情况下所需要的那样做，替换所有匹配的模式，使我们能够轻松替换所有提及的子字符串，而无需使用 RegEx：

const str = 'I like my dog, my dog loves me';
const newStr = str.replaceAll('dog', 'cat');
newStr;
// "I like my cat, my cat loves me"

Promise.any

在过去的几年中，我们已经看到了新的方法，例如ES6 中的Promise.all和Promise.race，Promise.allSettled去年的 ES2020 和 ES2021 将引入一个新方法：Promise.any。

我敢打赌你已经可以从方法名称中知道它的作用了。

Promise.any一旦给定的承诺得到履行，就会短路，但会持续到所有承诺都被拒绝。

不要与混淆，Promise.race因为一旦给定的承诺之一解决或拒绝，race承诺就会短路。

他们在满足感方面有类似的行为，但在拒绝方面却有很大不同。

如果里面的所有承诺都Promise.any失败了，它会抛出一个AggregateError（的子类Error），其中包含所有承诺的拒绝原因。

我们可以像这样使用它：

// example taken from: https://github.com/tc39/proposal-promise-any
Promise.any(promises).then(
  (first) => {
    // Any of the promises was fulfilled.
  },
  (error) => {
    // All of the promises were rejected.
  }
);

逻辑运算符和赋值表达式

使用 ES2021，我们将能够将逻辑运算符（&&，||和??）与赋值表达式（=）结合起来，就像在 Ruby 中已经可以做到的那样。

如果你跳过了 ES2020，你可能不知道??哪个是空值合并运算符。我们来看一个例子：

const a = null ?? 'test';
// 'test'
const b = 0 ?? 'test';
// 0

当左侧为或时，空值合并运算符返回右侧，否则返回左侧。在第一个例子中，左侧为，因此它返回右侧；而在第二个例子中，它返回左侧，因为它既不是也不是。nullundefinednullnullundefined

回到 ES2021 的内容，JavaScript我们已经有许多赋值运算符，如以下基本示例：

let a = 0;
a +=2;
// 2

但有了这个新提案，我们将能够做到以下几点：

a ||= b;
// equivalent to a = a || b

c &&= d;
// equivalent to c = c && d

e ??= f;
// equivalent to e = e ?? f

让我们逐一回顾一下：

a ||= ba如果a是真值则返回，b否则a返回假值
c &&= dd如果和c为d真，则返回，c否则
e ??= ff如果e是则返回null，undefined否则返回e

数字分隔符

_数字分隔符的引入将通过使用（下划线）字符在数字组之间提供分隔，使读取数值变得更容易。

让我们看更多的例子：

x = 100_000;
// 100 thousand

dollar = 55_90;
// 55 dollar 90 cents

fraction = 0.000_1;
// 1 thousandth

弱引用

来自MDN：对象的弱引用是一种不会阻止对象被垃圾收集器回收的引用。

借助 ES2021 的这项新提案，我们将能够使用类创建对对象的弱引用WeakRef。请点击下方链接阅读更深入的解释。

国际列表格式

该Intl.ListFormat对象是启用语言敏感列表格式的对象的构造函数。

看一个例子比解释它更容易：

const list = ['Apple', 'Orange', 'Banana'];

new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' }).format(list);
// Apple, Orange and Banana

new Intl.ListFormat('en-GB', { style: 'short', type: 'disjunction' }).format(list);
// Apple, Orange or Banana

您不仅限于英语，让我们尝试几种不同的语言：

const list = ['Apple', 'Orange', 'Banana'];

// Italian
console.log(new Intl.ListFormat('it', { style: 'long', type: 'conjunction' }).format(list));
// Apple, Orange e Banana

// Spanish
console.log(new Intl.ListFormat('es', { style: 'long', type: 'conjunction' }).format(list));
// Apple, Orange y Banana

// German
console.log(new Intl.ListFormat('de', { style: 'long', type: 'conjunction' }).format(list));
// Apple, Orange und Banana

是不是很棒？想更详细地了解这个规范，请查看下面的链接。

Intl.DateTimeFormat 的 dateStyle 和 timeStyle 选项

我们可以使用dateStyle和timeStyle来请求给定长度的特定语言环境的日期和时间。

// short
new Intl.DateTimeFormat("en" , {
  timeStyle: "short"
}).format(Date.now())
// "2:45 PM"

// medium
new Intl.DateTimeFormat("en" , {
  timeStyle: "medium"
}).format(Date.now())
// "2:45:53 PM"

// long
new Intl.DateTimeFormat("en" , {
  timeStyle: "long"
}).format(Date.now())
// "2:46:05 PM GMT+7"

现在让我们尝试一下dateStyle：

// short
new Intl.DateTimeFormat("en" , {
  dateStyle: "short"
}).format(Date.now())
// "7/25/20"

// medium
new Intl.DateTimeFormat("en" , {
  dateStyle: "medium"
}).format(Date.now())
// "Jul 25, 2020"

// long
new Intl.DateTimeFormat("en" , {
  dateStyle: "long"
}).format(Date.now())
// "July 25, 2020"

您可以传递任何您想要的区域设置，也可以同时传递dateStyle和timeStyle选项，在“短”、“中”和“长”三个选项之间进行选择，以最适合您的需要。

你最想尝试的功能是什么？请在下方留言。对我来说，最想尝试的功能可能是逻辑运算符和赋值表达式的组合，我喜欢简洁明了的语法。

如果你想学习从 ES6 到 ES2020 的 JavaScript 知识，可以看看我的书，这本书可以在Github上免费阅读。Educative上也有课程。

文章来源：https://dev.to/albertomontalesi/everything-new-coming-in-es2021-2l5l