ES2021新增的特性

Logical Assignment Operators

Logical AND assignment ¹

语法是这样子的：

x &&= y

表示如果x是truthy, 则将y赋值给x，可以等价为：

x && (x = y)

因此像下面这样的代码：

if (a) {
  a = 'hello'
}

可以转化为：a &&= 'hello'

Logical OR assignment ²

类似于Logical AND assignment, 它的语法是这样的：

x ||= y

表示如果x是falsy时，则将y赋值给x, 可以等价为：

x || (x = y)

Logical nullish assignment ³

x ??= y

表示x如果是null或undefined，则将y赋值给x，可以等价为：

x ?? (x = y)

这在一些设置配置项，给没有设置的配置加上默认值时，可以这么写：

function setOption(opts) {
  opts.someA ?? = 1
  opts.someB ?? = 2
}

注意这里和上面的Logical OR assignment是有区别的，只有未定义的时候才会去赋值，因为有些场景0、false或''就是有效值

Numeric separators ⁴

为了提高数字的可读性，允许使用下划线(_, U+005F)来作为分隔符：

// 没有分隔符
const a = 1000000000

// 有了分隔符
const b = 1_000_000_000

我们很容易可以知道b的值是多少，而a还需要停下来数有几个0

String.prototype.replaceAll

使用方法上和replace类似，如果传入要替换的内容是字符串，则可替换所有符合的字符串。

注意，如果传入的是regex，则必须设置全局标志，否则会报这样的错误：Uncaught TypeError: String.prototype.replaceAll called with a non-global RegExp argument

Promise.any and AggregateError ⁵

Promise.any接受一个Promise可迭代的对象，只要有一个promise，就返回第一个成功的promise，如果全部失败就返回一个失败的promise以及[AggregateError]()

const delay = (ms) => new Promise((resolve) => setTimeout(() => {
  resolve()
}, ms));

Promise.any([
  delay(1000).then(_ => 2),
  Promise.resolve(1),
  Promise.reject(new Error('some error'))
]).then(res => {
  console.log(res) // 打印出 1
}).catch(err => {
  console.log(err.message)
})

Promise.any([
  Promise.reject(new Error('some error 1')),
  Promise.reject(new Error('some error 2')),
  Promise.reject(new Error('some error 3'))
]).then(res => {
  console.log(res)
}).catch(err => {
  err.errors.forEach(({ message }) => {
    // 打印 some error 1
    // 打印 some error 2
    // 打印 some error 3
    console.log(message)
  })
})

WeakRef ⁶ and FinalizationRegistry ⁷

WeakRef

WeakRef对象允许您保留对另一个对象的弱引用，而不会阻止被弱引用对象被GC回收

FinalizationRegistry

FinalizationRegistry对象可以让你在对象被垃圾回收时请求一个回调

const registry = new FinalizationRegistry((val) => {
  // 当obj被回收时，会打印 cleaning up some value
  // val为调用register时，传入的第二个参数
  console.log('cleaning up', val);
})

let obj = {}

registry.register(obj, 'some value')

参考

Footnotes

1. Logical AND assignment ↩

2. Logical OR assignment ↩

3. Logical nullish assignment ↩

4. Lexical grammar ↩

5. Promise.any ↩

6. WeakRef ↩

7. FinalizationRegistry ↩