ES2021 新特性！

大家好，我是前端队长Daotin，想要获取更多前端精彩内容，关注我(全网同名)，解锁前端成长新姿势。

以下正文：

2021 年 6 月 22 日，第 121 届 Ecma 国际（Ecma International）大会以远程会议形式召开。正式通过了ES2021标准，ECMAScript 2021 （ES12）成为事实的 ECMAScript 标准。

本文简要介绍了 JavaScript 今年新加了哪些语法，还好不是很多。

主要有5个新特性：

• 逻辑赋值运算符
• 数字分隔符
• Promise.any & AggregateError
• String.prototype.replaceAll
• WeakRefs & FinalizationRegistry对象

逻辑赋值运算符

??= &&= 和 ||=

??= 的判断逻辑和 ?? 一致，左值为 null 或 undefined 时返回右值，否则返回左值。

不同的是 ??= 包含向左值赋值的操作。类比于于+= -= 中的等号。

// 旧
let a = null;
a = a ?? 'daotin';
a = a && 'daotin';
a = a || 'daotin';

// 新
let a = null;
a ??= 'daotin';
a &&= 'daotin';
a ||= 'daotin'; 

数字分隔符

允许数值字面量中间包含不连续_ ，以提高可读性。

1_000_000_000           // Ah, so a billion
101_475_938.38          // And this is hundreds of millions

let a = 1_1; // 11
let a = 1__1 // 错误，只允许一个下划线作为数字分隔符
let a = 1_;  // 错误，分隔符不能在尾部 
let a = _1;  // 错误，分隔符不能在头部 

Number(1_1); // 11
Number('1_1'); // NaN

注意：分隔符不能在尾部和头部，只能在数字之间，只允许一个下划线作为数字分隔符，不可连续。分隔符不影响数值的类型转换值，也无法在字符串转数值时被识别。

Promise.any & AggregateError

Promise.any 方法：any 接受 Promise 数组作为参数，返回合成的 Promise。只要给定的迭代中的一个 promise 成功，就采用第一个 promise 的值作为它的返回值，

const promises = [
  fetch('/endpoint-a').then(() => 'a'),
  fetch('/endpoint-b').then(() => 'b'),
  fetch('/endpoint-c').then(() => 'c'),
];
try {
  const first = await Promise.any(promises);
  // Any of the promises was fulfilled.
  console.log(first);
  // → e.g. 'b'
} catch (error) {
  // All of the promises were rejected.
  console.assert(error instanceof AggregateError);
  // Log the rejection values:
  console.log(error.errors);
  // → [
  //     <TypeError: Failed to fetch /endpoint-a>,
  //     <TypeError: Failed to fetch /endpoint-b>,
  //     <TypeError: Failed to fetch /endpoint-c>
  //   ]
}

此代码示例检查哪个端点响应最快，然后将其记录下来。只有当 所有 请求都失败时，我们才最终进入代码 catch 块，然后在其中处理错误。

多个 Promise 实例，包装成一个新的 Promise 实例：

名称	描述
all	只要一个 Promise 失败，立即返回失败，全成功返回成功数组
race	ace是比赛、竞赛的意思，所以顾名思义，就是看谁快，就返回谁。只要一个 Promise 完成就返回结果（无论成功失败）
any	只要一个 Promise 成功，立即返回成功，全失败返回 AggregateError
allSettled	所有 Promise 完成才返回（无论成功失败），返回结果数组

String.prototype.replaceAll

相比于String.prototype.replace，如果不使用全局正则表达式，就无法替换字符串中子字符串的所有实例。只会替换第一次匹配的字符。

'hello world'.replace('o', '_'); // hell_ world

'hello world'.replace(/o/g, '_'); // hell_ w_rld

'hello world'.replaceAll('o', '_'); // hell_ w_rld

WeakRefs & FinalizationRegistry对象

一般来说，在JavaScript中，对象的引用是强引用的，这意味着只要持有对象的引用，它就不会被垃圾回收。只有当该对象没有任何的强引用时， js引擎垃圾回收器才会销毁该对象并且回收该对象所占的内存空间。

let obj = {a:1, b:2}; // 只要我们访问 obj 对象，这个对象就不会被垃圾回收

但是 WeakRefs 可以创建一个弱引用，对象的弱引用是指当该对象应该被 js引擎垃圾回收器回收时不会阻止垃圾回收器的回收行为。

Weakref 实例具有一个方法 deref，该方法返回被引用的原始对象，如果原始对象已被收集，则返回 undefined 对象。

const ref = new WeakRef({ name: 'daotin' });
let obj = ref.deref();
if (obj) {
  console.log(obj.name); // daotin
} 

注意：正确使用它们需要仔细考虑，如果可能，最好避免使用它们。

使用 FinalizationRegistry 对象可以在垃圾回收器回收对象时执行回调函数。

// 构建监听对象被垃圾回收器清除的回调
const registry = new FinalizationRegistry(heldValue => {
      console.log('----', heldValue);
});

const obj = {};
const token = {};

// 注册监听
registry.register(obj, "obj deleted!", token);

// 取消监听
registry.unregister(token);

// 可能很久以后，回调执行
// ---- obj deleted!

register 参数分别为：

•需要监听的对象•执行回调函数的参数•取消监听用的标识符

参考链接：

•https://h3manth.com/ES2021•https://juejin.cn/post/697851...

•https://mp.weixin.qq.com/s/pRkTLu6mocANvl8UDwZPwg#at

--- End ---

你好，我是前端队长Daotin，专注分享前端与认知。希望在这里，和你分享我的前端学习和工作经验，记录个人成长。

想要获取更多前端精彩内容，关注我(全网同名)，解锁前端成长新姿势。