ES2021更新的内容！

Posted 2021-09-09 前端精髓

2021 年 6 月 22 日，发布了 ES2021 标准，Github 链接 。标准在每年的 6 月份正式发布一次，作为当年的正式版本。

任何人都可以向标准委员会（又称 TC39 委员会）提案，要求修改语言标准。

一种新的语法从提案到变成正式标准，需要经历五个阶段。每个阶段的变动都需要由 TC39 委员会批准。

1、Stage 0 - Strawman（展示阶段）
2、Stage 1 - Proposal（征求意见阶段）
3、Stage 2 - Draft（草案阶段）
4、Stage 3 - Candidate（候选人阶段）
5、Stage 4 - Finished（定案阶段）

一个提案只要能进入 Stage 2，就差不多肯定会包括在以后的正式标准里面。ECMAScript 当前的所有提案，可以在 TC39 的官方网站 https://tc39.es/ecma262 查看。

更新内容

This specification, the 12th edition, introduces the replaceAll method for Strings; Promise.any, a Promise combinator that short-circuits when an input value is fulfilled; AggregateError, a new Error type to represent multiple errors at once; logical assignment operators (??=, &&=, ||=); WeakRef, for referring to a target object without preserving it from garbage collection, and FinalizationRegistry, to manage registration and unregistration of cleanup operations performed when target objects are garbage collected; separators for numeric literals (1_000); and Array.prototype.sort was made more precise, reducing the amount of cases that result in an implementation-defined sort order.

上面是原文内容，简要介绍了 javascript 今年新加了哪些语法，还好不是很多。

主要有5个新特性：

1、逻辑赋值运算符：(??=, &&=, ||=)
2、数字分隔符：(1_000)
3、Promise.any & AggregateError
4、String.prototype.replaceAll
5、WeakRefs & FinalizationRegistry 对象

快速上手

逻辑赋值运算符

ES2021 引入了三个新的逻辑赋值运算符，将逻辑运算符与赋值运算符进行结合。

// 或赋值运算符
x ||= y
// 等同于
x || (x = y)

// 与赋值运算符
x &&= y
// 等同于
x && (x = y)

// Null 赋值运算符
x ??= y
// 等同于
x ?? (x = y)

这三个运算符||=、&&=、??=相当于先进行逻辑运算，然后根据运算结果，再视情况进行赋值运算。

它们的一个用途是，为变量或属性设置默认值。

// 老的写法
user.id = user.id || 1;

// 新的写法
user.id ||= 1;

上面示例中，user.id属性如果不存在，则设为1，新的写法比老的写法更紧凑一些。

数字分隔符

ES2021，允许 JavaScript 的数值使用下划线（_）作为分隔符。

let budget = 1_000_000_000_000;
budget === 10 ** 12 // true
budget === 1000000000000

String.prototype.replaceAll

之前，字符串的实例方法 replace() 只能替换第一个匹配。

'aabbcc'.replace('b', '_')
// 'aa_bcc'

上面例子中，replace() 只将第一个 b 替换成了下划线。

如果要替换所有的匹配，不得不使用正则表达式的g修饰符。

'aabbcc'.replace(/b/g, '_')
// 'aa__cc'

正则表达式毕竟不是那么方便和直观，ES2021 引入了 replaceAll() 方法，可以一次性替换所有匹配。

'aabbcc'.replaceAll('b', '_')
// 'aa__cc'

它的用法与 replace() 相同，返回一个新字符串，不会改变原字符串。

WeakRef

WeakSet 和 WeakMap 是基于弱引用的数据结构，ES2021 更进一步，提供了 WeakRef 对象，用于直接创建对象的弱引用。

let target = {};
let wr = new WeakRef(target);

上面示例中，target 是原始对象，构造函数 WeakRef() 创建了一个基于 target 的新对象 wr。这里，wr 就是一个 WeakRef 的实例，属于对 target 的弱引用，垃圾回收机制不会计入这个引用，也就是说，wr 的引用不会妨碍原始对象 target 被垃圾回收机制清除。

FinalizationRegistry

ES2021 引入了清理器注册表功能 FinalizationRegistry，用来指定目标对象被垃圾回收机制清除以后，所要执行的回调函数。

首先，新建一个注册表实例。

const registry = new FinalizationRegistry(heldValue => {
  // ....
});

上面代码中，FinalizationRegistry() 是系统提供的构造函数，返回一个清理器注册表实例，里面登记了所要执行的回调函数。回调函数作为 FinalizationRegistry() 的参数传入，它本身有一个参数 heldValue。

然后，注册表实例的 register() 方法，用来注册所要观察的目标对象。

registry.register(theObject, "some value");

上面示例中，theObject 就是所要观察的目标对象，一旦该对象被垃圾回收机制清除，注册表就会在清除完成后，调用早前注册的回调函数，并将 some value 作为参数（前面的 heldValue）传入回调函数。