ES12你需要知道的新特性

Posted 2021-10-05 MangoGoing

ES12新特性了解下？

新增特性：

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

1.replaceAll

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

let string = \'I love 前端,I love 前端路漫漫\'

//使用replace
let replaceStr = string.replace(\'love\',\'hate\')
console.log(replaceStr)  // \'I hate 前端,I love 前端路漫漫\'

//replace使用正则匹配所有
console.log(string.replace(/love/g,\'hate\')) // \'I hate 前端,I hate 前端路漫漫\'

//使用replaceAll
let replaceAllStr = string.replaceAll(\'love\',\'hate\')
console.log(replaceAllStr) // \'I hate 前端,I hate 前端路漫漫\'

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

2.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，就直接返回了该状态结果，并不在乎其成功或者失败

3.WeakRefs

使用WeakRefs的Class类创建对对象的弱引用(对对象的弱引用是指当该对象应该被GC回收时不会阻止GC的回收行为)
注意：要尽量避免使用 WeakRef 和 FinalizationRegistry，垃圾回收机制依赖于 javascript 引擎的实现，不同的引擎或是不同版本的引擎可能会有所不同。

这个提案主要包括两个主要的新功能：

• 使用 WeakRef 类创建对象的弱引用
• 使用 FinalizationRegistry 类对对象进行垃圾回收后，运行用户定义的终结器

它们可以分开使用也可以一起使用。

WeakRef 实例不会阻止 GC 回收，但是 GC 会在两次 EventLoop 之间回收 WeakRef 实例。GC 回收后的 WeakRef 实例的 deref() 方法将会返回undefined。

let ref = new WeakRef(obj)
let isLive = ref.deref() // 如果 obj 被垃圾回收了，那么 isLive 就是 undefined

FinalizationRegistry 注册 Callback，某个对象被 GC 回收后调用。

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

// 通过 register 注册任何你想要清理回调的对象，传入该对象和所含的值
registry.register(theObject, "some value");

4.逻辑运算符和赋值表达式

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

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

回顾下 ES2020 新增的空值合并操作符 ??

在当左侧操作数为 undefined 或 null 时，该操作符会将右侧操作数赋值给左侧变量。

const name = null ?? \'前端路漫漫\'
console.log(name) // 前端路漫漫

逻辑赋值运算符写法：

a ||= b; // 等同于 a || (a = b);

a &&= b; // 等同于 a && (a = b);

a ??= b; // 等同于 a ?? (a = b);

5.数字分隔符

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

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