ES2021 新特性！

大佬教程收集整理的这篇文章主要介绍了ES2021 新特性！，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

以下正文：

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

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

主要有5个新特性：

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

逻辑赋值运算符

??= &&= 和 ||=

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

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

@H_675_27@// 旧
let a = null;
a = a ?? 'daoTin';
a = a && 'daoTin';
a = a || 'daoTin';

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

数字分隔符

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

@H_675_27@1_000_000_000           // Ah, so a billion
101_475_938.38          // and this is @R_506_4892@ 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

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

@H_675_27@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>
  //   ]
}

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

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

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

String.prototype.replaceAll

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

@H_675_27@'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引擎垃圾回收器才会销毁该对象并且回收该对象所占的内存空间。

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

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

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

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

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

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

@H_675_27@// 构建监听对象被垃圾回收器清除的回调
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/6978514117006983176

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

--- End ---

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

以上，如果你看了觉得对你有所帮助，就点个赞叭，这样队长也有更新下去的动力，跪谢各位父老乡亲啦~~~ 听说喜欢点赞的人，一个月内都会有好运降临哦 ~~

大佬总结

以上是大佬教程为你收集整理的ES2021 新特性！全部内容，希望文章能够帮你解决ES2021 新特性！所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。