令人振奋的ES2021几个新特性

ES2021

1.promise新增pormise.any()方法

  Promise.any(iterable);

ps: Promise.any() 方法依然是实验性的，尚未被所有的浏览器完全支持。它当前处于 TC39 第四阶段草案（Stage 4）

• 这个方法用于返回第一个成功的 promise 。只要有一个 promise 成功此方法就会终止，它不会等待其他的 promise 全部完成。

  // 只要一个返回成功，即进入.then(),所有都失败就返回一个失败的 promise 和AggregateError类型的实例
Promise.any([
  new Promise((resolve, reject) => setTimeout(reject, 200, 'any-reject1')),
  new Promise((resolve, reject) => setTimeout(reject, 1000, 'any-reject2')),
  new Promise((resolve, reject) => setTimeout(reject, 2000, 'any-reject3')),
])
.then(value => console.log(`res-any: ${value}`))
.catch (err => console.log(`err-any: ${err}`))

// err-any: AggregateError: All promises were rejected

• 对比Permise.all()

    Promise.all([
      new Promise((resolve, reject) => setTimeout(reject, 200, 'all-reject')),
      new Promise((resolve, reject) => setTimeout(resolve, 1000, 'all-resolve1')),
      new Promise((resolve, reject) => setTimeout(resolve, 2000, 'all-resolve2')),
    ])
    .then(value => console.log(`res-all: ${value}`))
    .catch (err => console.log(`err-all: ${err}`))
  
    Promise.any([
      new Promise((resolve, reject) => setTimeout(reject, 200, 'any-reject')),
      new Promise((resolve, reject) => setTimeout(resolve, 1000, 'any-resolve1')),
      new Promise((resolve, reject) => setTimeout(resolve, 2000, 'any-resolve2')),
    ])
    .then(value => console.log(`res-any: ${value}`))
    .catch (err => console.log(`err-any: ${err}`))
    // err-all: all-reject
    // res-any: any-resolve1
  

• 对比Permise.race()

    Promise.any([
      new Promise((resolve, reject) => setTimeout(resolve, 1000, 'any-resolve1')),
      new Promise((resolve, reject) => setTimeout(reject, 200, 'any-reject')),
      new Promise((resolve, reject) => setTimeout(resolve, 2000, 'any-resolve2')),
    ])
    .then(value => console.log(`res-any: ${value}`))
    .catch (err => console.log(`err-any: ${err}`))
  
    Promise.race([
      new Promise((resolve, reject) => setTimeout(resolve, 1000, 'race-resolve1')),
      new Promise((resolve, reject) => setTimeout(reject, 200, 'race-reject')),
      new Promise((resolve, reject) => setTimeout(resolve, 2000, 'race-resolve2')),
    ])
    .then(value => console.log(`res-race: ${value}`))
    .catch (err => console.log(`err-race: ${err}`))
    // err-race: race-reject
    // res-any: any-resolve1
  

• 特点：

  • any只需关心一个Permise成功，而不关心具体是哪一个,遇到成功就返回
  • 所有失败才返回一个reject的

• 浏览器支持

  • Chrome: 85+ （内核： 以前是webkit,现在是blink）
  • Edge: 85+ （内核：EdgeHTML）
  • Firefox: 79+ （内核： Gecko）
  • Safari: 14+ （内核： Webkit）
  • IE: 不支持 （内核： Trident）
  • Opera: 不支持 （内核： 最初Presto，之后webkit，现在是blink）

• Node.js支持：15.0.0+

2.逻辑运算符和赋值表达式(&&=，||=，??=)

在业务中，我们有很多赋值操作，大部分赋值操作也是基于一定条件的。

• 带有 && 运算符的逻辑赋值运算符 &&=
  我们看下面这个例子：

    let a = 1;
    if(a) {
      a = 3;
    }
    console.log(a)
    // && 简化
    let a = 1;
    a && a = 3
    console.log(a)
  

  && 运算符已经极大简洁了我们，消除了if分支，但是还有重复的a。&&=就为了解决我们这一类的条件赋值。我们可以将上面再次简化为

    let a = 1;
    a &&= 3
    console.log(a)
  

  对比一下之前的if语句，是不是就简洁很多了呢。

• 带有 || 运算符的逻辑赋值运算符 ||=
  上面的**&&=**只能满足我们部分的业务场景，还有时候是会判断a若为假值，则给他赋值。我们来看看下面的例子：

    let a;
    if(!a) {
      a = 3;
    }
    // 三目运算符简化，丢掉if分支
    a = a ? a : 3;
    // || 运算符
    a || a = 3;
  
    // ||=  去除重复的a
    a ||= 3;
    console.log(a)
  

  可以看到，合理的使用运算符，会简化代码。

• 带有?? 运算符的逻辑赋值运算符 ??=
  我们来回顾一下ES2020新增的*??*空值合并运算符：

    activeValue ?? defaultValue
    // 等价于
    activeValue !== null && activeValue !== undefined ? activeValue : defaultValue
  

  ?? 空值合并运算符值类似于||， 不同的是||针对的是所有假值，而??只针对undefined和null
  我们来看看下面的例子：

   let a;
   if(a===undefined || a===null) {
     a = 3;
   }
   // 三目运算符简化，丢掉if分支
   a = (a===undefined || a===null) ? 3 : undefined;
   // ?? 运算符
   a = a ?? 3;  // 或者a ?? a = 3;
  
   // ??=  去除重复的a
   a ??= 3;
   console.log(a)
  

3.数字分隔符_

个人觉得，这个分隔符不是很必要，可能是我接触到的不会使用很多大量的数据（会把人看晕的那种），但是这也确实可以起到辅助分辨的功能，可以适当使用。

  let num = 100_000_000;
  console.log(num)
  // 100000000

4.String.prototype.replaceAll()

在我们是实际业务代码中，字符串的应用场景尤其多，对字符串的操作也是很多。js给我们提供了很多api，而且很多看名字就知道是干嘛的。
比如这个replaceAll(),我们很容易想到replace()方法，替换字符串中匹配的值。

• 定义：
  replaceAll() 方法返回一个新字符串，新字符串所有满足 pattern 的部分都已被replacement 替换。

  replace()方法只会替换找到的第一个值

• 语法：

    // pattern可以是一个字符串或一个 RegExp， replacement可以是一个字符串或一个在每次匹配被调用的函数。
    const newStr = str.replaceAll(regexp|substr, newSubstr|function)
  

• 对比replace()

    let str = 'yyc is 18 years old. yyc is pretty!';
    const newStr = str.replace('yyc', 'dongling');
    // dongling is 18 years old. yyc is pretty!
    const newStr = str.replaceAll('yyc', 'dongling');
    // dongling is 18 years old. dongling is pretty!
    console.log(newStr)
  

5.WeakRef and Finalizers

这两个新增特性，大家就去官方文档了解一下吧，使用率不是很高，而且官方建议：能不使用就尽量不要使用

• WeakRef
• Finalizers