JavaScript ES12 新特性抢先体验

迷南。 2022-12-20 02:43 129阅读 0赞

![format_png][]**文末送书彩蛋**

> 在上一篇文章中，我们介绍了ES2020的相关九大特性，里面不少实用的新特性让我们受益良多。[ES11屡试不爽的新特性，你用上了几个？][ES11]

> 而每年，JavaScript都会更新添加新的特性新标准，在今年ES2020发布了，而ES2020（ES12）也预计将在明年即2021年年中发布。每年的新特性都会经历四个阶段，而第四阶段也就是最后一个阶段，本文即将介绍的即提案4中的相关新特性，也是意味着这些新特性将很大程度的出现在下一个版本中

# 特性抢先知： #

*  String.prototype.replaceAll 新增replaceAll
 *  Promise.any
 *  WeakRefs
 *  逻辑运算符和赋值表达式
 *  数字分隔符号

## replaceAll ##

看到replaceAll这个词，相比很容易联想到replace。在JavaScript中，replace方法只能是替换字符串中匹配到的第一个实例字符，而不能进行全局多项匹配替换，唯一的办法是通过正则表达式进行相关规则匹配替换

而replaceAll则是返回一个全新的字符串，所有符合匹配规则的字符都将被替换掉，替换规则可以是字符串或者正则表达式。

let string = 'I like 前端,I like 前端公虾米'
    
    //使用replace
    let replaceStr = string.replace('like','love')
    console.log(replaceStr)  // 'I love 前端,I like 前端公虾米'
    
    //replace使用正则匹配所有
    console.log(string.replace(/like/g,'love')) // 'I love 前端,I love 前端公虾米'
    
    //使用replaceAll
    let replaceAllStr = string.replaceAll('like','love')
    console.log(replaceAllStr) // 'I love 前端,I love 前端公虾米'

> 需要注意的是，replaceAll在使用正则表达式的时候，如果非全局匹配（/g），则replaceAll()会抛出一个异常

let string = 'I like 前端,I like 前端公虾米'
    console.log(string.replaceAll(/like/,'love')) //TypeError

## Promise.any ##

> 当Promise列表中的任意一个promise成功resolve则返回第一个resolve的结果状态 如果所有的promise均reject，则抛出异常表示所有请求失败

Promise.any([
      new Promise((resolve, reject) => setTimeout(reject, 500, '哎呀，我被拒绝了')),
      new Promise((resolve, reject) => setTimeout(resolve, 1000, '哎呀，她接受我了')),
      new Promise((resolve, reject) => setTimeout(resolve, 2000, '哎呀，她也接受我了')),
    ])
    .then(value => console.log(`输出结果: ${value}`))
    .catch (err => console.log(err))
    
    //输出
    //输出结果:哎呀，她接受我了

再来看下另一种情况

Promise.any([
      Promise.reject('Error 1'),
      Promise.reject('Error 2'),
      Promise.reject('Error 3')
    ])
    .then(value => console.log(`请求结果: ${value}`))
    .catch (err => console.log(err))
    
    //输出
    AggregateError: All promises were rejected

Promise.any与Promise.race十分容易混淆，务必注意区分，Promise.race 一旦某个promise触发了resolve或者reject，就直接返回了该状态结果，并不在乎其成功或者失败

## WeakRefs ##

> 使用WeakRefs的Class类创建对对象的弱引用(对对象的弱引用是指当该对象应该被GC回收时不会阻止GC的回收行为)

当我们通过（const、let、var）创建一个变量时，垃圾收集器GC将永远不会从内存中删除该变量，只要它的引用仍然存在可访问。WeakRef对象包含对对象的弱引用。对对象的弱引用是不会阻止垃圾收集器GC恢复该对象的引用，则GC可以在任何时候删除它。

WeakRefs在很多情况下都很有用，比如使用Map对象来实现具有很多需要大量内存的键值缓存，在这种情况下最方便的就是尽快释放键值对占用的内存。

目前，可以通过WeakMap()或者WeakSet()来使用WeakRefs

举个栗子

我想要跟踪特定的对象调用某一特定方法的次数，超过1000条则做对应提示

let map = new Map()
    function doSomething(obj){
     ...
    }
    function useObject(obj){
     doSomething(obj)
      
      let called = map.get(obj) || 0
      called ++ 
      
      if(called>1000){
         console.log('当前调用次数已经超过1000次了，over')
      }
      
      map.set(obj, called)
    }

如上虽然可以实现我们的功能，但是会发生内存溢出,因为传递给doSomething函数的每个对象都永久保存在map中，并且不会被GC回收，因此我们可以使用WeakMap

let wmap = new WeakMap()
    function doSomething(obj){
     ...
    }
    function useObject(obj){
     doSomething(obj)
      
      let called = wmap.get(obj) || 0
      
      called ++
      
      if(called>1000){
         console.log('当前调用次数已经超过1000次了，over')
      }
      
      wmap.set(obj, called)
    }

因为是弱引用，所以WeakMap、WeakSet的键值对是不可枚举的

WeakSet和WeakMap相似，但是每个对象在WeakSet中的每个对象只可能出现一次，WeakSet中所有对象都是唯一的

let ws = new WeakSet()
    let foo = {}
    let bar = {}
    
    ws.add(foo)
    ws.add(bar)
    
    ws.has(foo) //true
    ws.has(bar) //true
    
    ws.delete(foo) //删除foo对象
    ws.has(foo) //false 已删除
    ws.has(bar) //仍存在

WeakSet与Set相比有以下两个区别

*  WeakSet只能是对象集合，而不能是任何类型的任意值
 *  WeakSet弱引用，集合中对象引用为弱引用，如果没有其他对WeakSet对象的引用，则会被GC回收

最后，WeakRef实例有一个方法deref，返回引用的原始对象，如果原始对象被回收，则返回undefined

const cache = new Map();
    
    const setValue =  (key, obj) => {
      cache.set(key, new WeakRef(obj));
    };
    
    const getValue = (key) => {
      const ref = cache.get(key);
      if (ref) {
        return ref.deref();
      }
    };
    
    const fibonacciCached = (number) => {
      const cached = getValue(number);
      if (cached) return cached;
      const sum = calculateFibonacci(number);
      setValue(number, sum);
      return sum;
    };

对于缓存远程数据来说，这可能不是一个好主意，因为远程数据可能会不可预测地从内存中删除。在这种情况下，最好使用LRU之类的缓存。

## 逻辑运算符和赋值表达式 ##

> 逻辑运算符和赋值表达式，新特性结合了逻辑运算符（&&，||，??）和赋值表达式而JavaScript已存在的 复合赋值运算符有：

*  操作运算符：+=   -=   \*=   /=   %=   \*\*=
 *  位操作运算符：&=   ^=   |=
 *  按位运算符：<<=   >>=   >>>=

现有的的运算符，其工作方式都可以如此来理解

表达式：a op= b

等同于：a = a op b

逻辑运算符和其他的复合赋值运算符工作方式不同

表达式：a op= b

等同于：a = a op (a = b)

a ||= b
    //等价于
    a = a || (a = b)
    
    a &&= b
    //等价于
    a = a && (a = b)
    
    a ??= b
    //等价于
    a = a ?? (a = b)

为什么不再是跟以前的运算公式a = a op b一样呢，而是采用a = a op (a = b)。因为后者当且仅当a的值为false的时候才计算赋值，只有在必要的时候才执行分配，而前者的表达式总是执行赋值操作

## ??=可用来补充/初始化缺失的属性 ##

const pages = [
      {
       title:'主会场',
        path:'/'
      },
      {
        path:'/other'
      },
      ...
    ]
      
    for (const page of pages){
     page.title ??= '默认标题'
    }
    console.table(pages)
    //(index)  title         path
    //0        "主会场"      "/"
    //1        "默认标题"    "/other"

### 小结： ###

*  &&=：当LHS值存在时，将RHS变量赋值给LHS
 *  ||=：当LHS值不存在时，将RHS变量赋值给LHS
 *  ??= ：当LHS值为null或者undefined时，将RHS变量赋值给LHS

## 数字分隔符 ##

> 数字分隔符，可以在数字之间创建可视化分隔符，通过\_下划线来分割数字，使数字更具可读性

const money = 1_000_000_000
    //等价于
    const money = 1000000000
    
    const totalFee = 1000.12_34
    //等价于
    const totalFee = 1000.1234

该新特性同样支持在八进制数中使用

const number = 0o123_456
    //等价于
    const number = 0o123456

该新特性方便读取数据，可以让我们**「打工人」**更容易辨认"资产" 不过话说回来，小编的资产好像不配使用该特性...敲重点！！！

本次所有新特性均介绍的第4阶段，意味着将出现在下一个版本中的，没有介绍阶段3的，因为不确定是否一定会出现在下个版本中。本文介绍的新特性均可直接在最新版的谷歌浏览器中愉快体验。

## ❤️看完三件事 ##

如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

1.  点赞，让更多的人也能看到介绍内容（收藏不点赞，都是耍流氓-\_-）
2.  关注公众号“前端劝退师”，不定期分享原创知识。
3.  也看看其他文章

![format_png 1][]

劝退师个人微信：**huab119**

也可以来我的`GitHub`博客里拿所有文章的源文件：

**前端劝退指南**：https：//github.com/roger-hiro/BlogFN一起玩耍呀

点赞、在看 支持作者❤️

[format_png]: /images/20221120/687b7b714d8445ef85cafea94fa5e363.png
[ES11]: http://mp.weixin.qq.com/s?__biz=MzAwNzQ2ODEyMQ%3D%3D&chksm=9b7ce9d1ac0b60c706befa18a659a9a2a9b99d78ce673b01ccd3f0fdb7a3fea348c94b50ac71&idx=1&mid=2247486695&scene=21&sn=de98950c90f25519376e8189979455ad#wechat_redirect
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9pY25yTkJpY0Voa1ZXMWNCOUdLTFI3OUFaN3BXY1JDSnNoR0p3dDRpY0RiUjBxbnphSkJZenJRc053UGVoRHpMRmxjVEdpYnhsQWdVTGhIQ0pPQzN5RHBaQVEvNjQw?x-oss-process=image/format,png