大家好，我是前端队长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 billion101_475_938.38          // And this is hundreds of millionslet a = 1_1; // 11let a = 1__1 // 谬误，只容许一个下划线作为数字分隔符let a = 1_;  // 谬误，分隔符不能在尾部 let a = _1;  // 谬误，分隔符不能在头部 Number(1_1); // 11Number('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 失败，立刻返回失败，全胜利返回胜利数组
raceace是较量、比赛的意思，所以顾名思义，就是看谁快，就返回谁。只有一个 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，专一分享前端与认知。心愿在这里，和你分享我的前端学习和工作教训，记录个人成长。

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