ECMAScript2021（es12）新特性

发表于 分类于 本文字数： 770 阅读时长 ≈ 3 分钟

前言

ECMAScript2021（es12）新特性。

正文

逻辑赋值运算符

有三个，分别是 &&= ， ||= ， ??= 。

&&= 为左侧变量为真值时，将右侧的值赋给左边，例子如下：

1
2
3
4
5
let a = 1

a &&= 2 // 输出 2
// 等效于
a && (a = 2)

||= 为左侧变量为假值时，将右侧的值赋给左边，例子如下：

1
2
3
4
5
let a = 0

a ||= 2 // 输出 2
// 等效于
a || (a = 2)

这里的假值为 Falsy

??= 可以理解为 ||= 的一个严格版本，首先 ?? 为 es11 引入的空值操作符，它的检测的值为 null 和 undefined ，这两个值在虚值的范围内，例子如下：

1
2
3
4
5
let a = undefined

a ??= 2 // 输出 2
// 等效于
a ?? (a = 2)

数值分隔符

让数字更加可读，比如以万分割，例子如下：

1
const o = 1000_0000 // 1000 万

感觉一般用不到…

String.prototype.replaceAll

字符串的替换操作，和 String.prototype.replace 的区别就是第一个参数为字符串时可以替换全部了，比如：

1
2
'123123'.replace('123', '===') // 输出 ===123
'123123'.replaceAll('123', '===') // 输出 ======

在第一个参数为正则的时候，务必对正则添加 g 模式，不然会出现报错。

1
2
'123123'.replaceAll(/\d/, '=') // 报错
'123123'.replaceAll(/\d/g, '=') // 正确，输出 ======

Promise.any

Promise 上新的静态方法，依然是用来处理多个 Promise 并发时的情景， Promise.any 只要参数中有一个已被 resolve 的 Promise ，那么整个 Promise 就会被 resolve ，如果参数为空或者所有的 Promise 都被 reject ，那么整个 Promise 就被 reject 。例子如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Promise.any([Promise.resolve(1), Promise.reject('error')]).then((res) => {
  console.log('resolve', res) // res 为 1
})

// 空参数
Promise.any([]).then(
  () => {},
  (err) => {
    console.error(err)
    // 输出
    // [AggregateError: All promises were rejected] { [errors]: [] }
  },
)

// 所有 promise 都 reject
Promise.any([Promise.reject('error1'), Promise.reject('error2')]).then(
  () => {},
  (err) => {
    console.error(err)
    // 输出
    // [AggregateError: All promises were rejected] {
    //   [errors]: [ 'error1', 'error2' ]
    // }
  },
)

这里的某个 Promise resolve 是有时间顺序的，也就是第一个被 resolve 的 Promise 会 resolve 整个 Promise ，例子如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
const delayResolve = (timeout, val) => {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, timeout, val)
  })
}

Promise.any([
  Promise.reject('立即 reject'),
  delayResolve(1000, '1 秒延迟'),
  delayResolve(2000, '2 秒延迟'),
]).then((res) => {
  console.log('resolve', res) // res 为 "1 秒延迟"
})

WeakRef

这个特性应该是比较高级的特性了， WeakRef 允许用户持有一个对象的弱引用，弱引用使得该引用不会影响 GC （垃圾回收）。用法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 这里 target 为一个强引用
let target = {
  a: 1,
  b: 2,
}

const weakRef = new WeakRef(target)
console.log(weakRef.deref()) // 对象还存在

// 去除对象引用
target = null

globalThis.gc() // 需要开启 node 的 --expose gc

// 强制等待并检测
setTimeout(() => {
  console.log(weakRef.deref()) // undefined (如果 GC 发生)
}, 5000)

FinalizationRegistry

这个特性和 WeakRef 类似，它也持有一个对象的弱引用，当对象被回收的时候执行一个回调函数，用法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const registry = new FinalizationRegistry((val) => {
  console.log('被回收了', val)
})

let target = {
  a: 1,
}

registry.register(target, '回调值')

// 去除对象引用
target = null

globalThis.gc() // 需要开启 node 的 --expose gc

// 强制等待
setTimeout(() => {}, 5000)

注意这里的回调函数的值不是持有的对象，而是在 register 的时候第二个参数的值，从 FinalizationRegistry 的定义上说，回调执行的时候持有的对象已被回收，此时如果再出现在回调参数中也是不对的。