ES2021 我学不动了，这次只学这 3 个。

╰+哭是因爲堅強的太久メ 2022-12-21 06:26 136阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 2]

## 1.逻辑赋值操作符 ##

你有遇到过这样的情况吗？

function example(a) {
        
      // Default `a` to "foo"
      if (!a) {
        
        a = "foo";
      }
      // or
      a = a || "foo";
    }

某些初始化的时候需要一些冗长的逻辑代码

function example(opts) {
        
      // Ok, but could trigger setter.
      opts.foo = opts.foo ?? "bar";
    
      // No setter, but 'feels wrong' to write.
      opts.baz ?? (opts.baz = "qux");
    }
    
    example({
         foo: "foo" });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 4]

function example(opts) {
        
      // 旧的方式
      opts.foo = opts.foo ?? "bar";
      // 新的方式
      opts.foo ??= "bar";
    
      // 旧的方式
      opts.baz ?? (opts.baz = "qux");
      // 新的方式
      opts.baz ??= "qux";
    }
    
    example({
         foo: "foo" });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 5]  
![1605350041175][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 6]

a = a + b;
    a += b;
    a = a - b;
    a -= b;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 7]

## 2.Promise.any ##

`Promise.any`。 从字面意思来看，相信聪明的你应该能大致猜出这个 API 的作用。`Promise.any` 接受一个 `Promise` 的数组。当其中任何一个 `Promise` 完成（fullfill）时，就返回那个已经有完成值的 `Promise`。如果所有的 `Promise` 都拒绝（reject），则返回一个拒绝的 `Promise`，该 `Promise` 的返回值是一个 `AggregateError` 对象。

Promise.any(promises).then(
      (first) => {
        
        // 任意一个Promise完成了
      },
      (error) => {
        
        // 所有Promise都被拒绝了
      }
    );

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 8]

Promise.any([
      fetch("https://v8.dev/").then(() => "home"),
      fetch("https://v8.dev/blog").then(() => "blog"),
      fetch("https://v8.dev/docs").then(() => "docs"),
    ])
      .then((first) => {
        
        // Any of the promises was fulfilled.
        console.log(first);
        // → 'home'
      })
      .catch((error) => {
        
        // All of the promises were rejected.
        console.log(error);
      });

例如一些播放平台，可以通过这个来测试当前延迟最低的线路是哪个，优先切换到对应的最快的线路。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 10]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 11]  
来，亮出祖传降级代码

function reverse(promise) {
        
      return new Promise((resolve, reject) =>
        Promise.resolve(promise).then(reject, resolve)
      );
    }
    function promiseAny(iterable) {
        
      return reverse(Promise.all([...iterable].map(reverse)));
    }
    // https://github.com/m0ppers/promise-any/blob/master/index.js

实现很简单，通过一个反转函数，利用 `Promisea.all` 的特性，只要一个`Promise` 被拒绝了，就进入到`reject`，因此反转`resolve` 和 `reject`就能模拟出 `Promise.any` 了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 12]  
![1605350041175][]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 13]

## 3.数字分隔符 ##

let fee = 1000000000;
    let fee = 1_000_000_000;

这个模式不仅在十进制可以用，二进制，十六进制…甚至 BigInt，都可以使用。

// Binary Literals
    let nibbles = 0b1010_0001_1000_0101;
    // Hex Literal
    let message = 0xa0_b0_c0;
    // BigInt Literal
    const max = 2n ** (64n - 1n) - 1n;
    console.log(max === 9_223_372_036_854_775_807n);

以上特性均在最新版 `chrome` 支持，快打开控制台玩耍吧。

如果想要在实际项目中使用，请使用以下两个插件。

*  [Logical Assignment Operator][]
 *  [Numeric Separator][]

## 最后 ##

更多请关注公众号《秋风的笔记》

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 14]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/ef7f63fe2f784ca4a33fb00700b393a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/83db7b86216e4d919218586a853b7fbc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/084db71f0da8413f88137eb45173093f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/605d7086f443491ab303eb8d694c19cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/630b08a8434e44c18610f0bd8021656b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221120/048a0a2c6c08415da964fa8a9827fb86.png
[1605350041175]: /images/20221120/330d9ba169504986afca27fd424dfb38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221120/7cb16a560cdf497c914d0b26f3b14be2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221120/c674df2e6d6a4f0bb5d8748c6898fb83.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221120/b4f91f4ec8f6423b99feaaad9702fcb6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221120/5f866246f0e2423ea7751e3ae2f9ebb1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221120/a36c25ab418a4220813c2349b829594c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221120/da4abb4baead4106a0ac57f73314f0c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221120/8dc505cae9ea4036b54fb97946e416fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 13]: https://img-blog.csdnimg.cn/20201115171543854.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh,size_16,color_FFFFFF,t_70#pic_center
[Logical Assignment Operator]: https://babeljs.io/docs/en/babel-plugin-proposal-logical-assignment-operators
[Numeric Separator]: https://babeljs.io/docs/en/babel-plugin-proposal-numeric-separator
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVibHVlc2t5aHVh_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20221120/55cba78b2eba4e628281569c43ff46f4.png