【ES】885- ES 2021 新特性提前知，附案例

太过爱你忘了你带给我的痛 2022-11-05 00:42 27阅读 0赞

![2054df62f9cdff1dd3d45a00bf89547a.png][]

> 转自：bb老猫  
> 
> 
> https://juejin.cn/post/6914538946751889422

简介

ES2021 也就是 2021 年的 ECMAScript 版本。ES2021 并没有像 ES2015 那样提出很多新特性，但却合并了一些有用的特性。

本文将会用通俗易懂的代码示例来介绍 ES2021 的新特性。当然在这之前，你需要了解 JavaScript 的基础知识。

以下是 ES2021 的新特性概览：

*  `String.prototype.replaceAll`
 *  `Promise.any`
 *  `WeakRef`
 *  逻辑赋值运算符
 *  数字分隔符

## String.protype.replaceAll ##

在 ES2021 之前，要替换掉一个字符串中的所有指定字符，我们可以这么做：

const fruits = '????+????+????+';
    const fruitsWithBanana = fruits.replace(/\+/g, '????');
    console.log(fruitsWithBanana); //????????????????????????

ES2021 则提出了 `replaceAll` 方法，并将其挂载在 String 的原型上，可以这么用：

const fruits = '????+????+????+';
    const fruitsWithBanana = fruits.replaceAll('+', '????');
    console.log(fruitsWithBanana); //????????????????????????

## Promise.any ##

`Promise.any` 方法和 `Promise.race` 类似——只要给定的迭代中的一个 promise 成功，就采用第一个 promise 的值作为它的返回值，但与 `Promise.race` 的不同之处在于——它会等到所有 promise 都失败之后，才返回失败的值：

const myFetch = url => setTimeout(() => fetch(url), Math.floor(Math.random() * 3000));
    const promises = [
      myFetch('/endpoint-1'),
      myFetch('/endpoint-2'),
      myFetch('/endpoint-3'),
    ];
    // 使用 .then .catch
    Promise.any(promises) // 任何一个 promise 成功。
           .then(console.log) // 比如 ‘3’
           .catch(console.error); // 所有的 promise 都失败了
    // 使用 async-await
    try {
      const first = await Promise.any(promises); // 任何一个 promise 成功返回。
     console.log(first);
    }catch (error) { // 所有的 promise 都失败了
      console.log(error);
    }

## WeakRef ##

`WeakRef` 提案主要包含两个新功能：

*  可以通过 `WeakRef` 类来给某个对象创建一个弱引用
 *  可以通过 `FinalizationRegistry` 类，在某个对象被垃圾回收之后，执行一些自定义方法

上述两个新功能可以同时使用，也可以单独使用，取决于你的需求。

一个 `WeakRef` 对象包含一个对于某个对象的弱引用，被称为 *目标* 或 *引用*。通过弱引用一个对象，可以让该对象在没有其它引用的情况下被垃圾回收机制回收。

`WeakRef` 主要用来 **缓存** 和 **映射** 一些大型对象，当你希望某个对象在不被其它地方引用的情况下及时地被垃圾回收，那么你就可以使用它。

function toogle(element) {
      const weakElement = new WeakRef(element);
      let intervalId = null;
    
      function toggle() {
        const el = weakElement.deref();
        if (!el) {
           return clearInterval(intervalId);
       }
       const decoration = weakElement.style.textDecoration;
       const style= decoration === 'none' ? 'underline' : 'none';
       decoration = style;
      }
      intervalId = setInterval(toggle, 1000);
    }
    const element = document.getElementById("link");
    toogle(element);
    setTimeout(() => element.remove(), 10000);

`FinalizationRegistry` 接收一个注册器回调函数，可以利用该注册器为指定对象注册一个事件监听器，当这个对象被垃圾回收之后，会触发监听的事件，具体步骤如下。

首先，创建一个注册器：

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

接着注册一个指定对象，同时也可以给注册器回调传递一些参数：

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

## 逻辑赋值运算符 ##

> 译者注：**赋值运算符** 和 **表达式** 的区别可以 看这里。

逻辑赋值运算符结合了 **逻辑运算符** 和 **赋值表达式**。逻辑赋值运算符有两种：

*  或等于（||=）
 *  且等于（&&=）

// 或等于
    |   a   |   b   | a ||= b | a (运算后) |
    | true  | true  |   true  |        true         |
    | true  | false |   true  |        true         |
    | false | true  |   true  |        true         |
    | false | false |   false |        false        |
    a ||= b
    // 等同于:
    a || (a = b);
    
    // 且等于
    |   a   |   b   | a &&= b | a (运算后) |
    | true  | true  |   true  |        true         |
    | true  | false |   false |        false        |
    | false | true  |   false |        false        |
    | false | false |   false |        false        |
    a &&= b
    // 等同于:
    a && (a = b);

## 数字分隔符 ##

通过这个功能，我们利用 “（\_，U+005F）” 分隔符来将数字分组，提高数字的可读性：

1_000_000_000           // 十亿
    101_475_938.38          // 亿万
    
    const amount = 12345_00;  // 12,345
    const amount = 123_4500;  // 123.45 (保留 4 位小数)
    const amount = 1_234_500; // 1,234,500
    
    0.000_001 // 百万分之一
    1e10_000  // 10^10000
    
    const binary_literals = 0b1010_0001_1000_0101;
    const hex_literals = 0xA0_B0_C0;
    const bigInt_literals = 1_000_000_000_000n;
    const octal_literal = 0o1234_5670;

## 总结 ##

JavaScript 是一门动态类型语言，这在某些方面来说对于 web 开发是有益的。自 ES2015 之后，JavaScript 正在快速发展。在这篇文章里面，我们着重回顾了 ES2021 的一些新特性。

尽管你的项目可能并不会用到这些新特性，但是它们的确为项目开发提供了多种可能性，不是么？

![f02fe0b2a7250aa1a2c39bd78ef98415.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 100[\+篇原创系列汇总][Link 1]

![ca875ff67cb32500bdc81e7aae885df6.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 100+ 篇原创文章

[2054df62f9cdff1dd3d45a00bf89547a.png]: /images/20221023/4462d48ecd2d4e809f52ed9993b216e8.png
[f02fe0b2a7250aa1a2c39bd78ef98415.gif]: /images/20221023/71c166b887f249c284ce1906fbd0064c.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[ca875ff67cb32500bdc81e7aae885df6.gif]: /images/20221023/b328e1da2c8a4c148f93b6c9c7814bf5.png