ES 2020新特性

最近看了下ES2020，发现其中有出现了几个很有用的新特性，经过测试在谷歌浏览器（版本 84.0.4147.125（正式版本） （64 位））中已经生效，下面简单介绍一下。

1. globalThis

在浏览器下的行为为window，不过globalThis为一个跨平台的变量，在web workers环境或者node环境中globalThis依然生效，下图为window，self，globalThis的平台兼容性列表。 下图为在浏览器中三个变量的打印结果

2. Promise.allSettled

当我们需要同时处理多个promise请求并且需要在所有请求执行完成之后执行任务的时候，通常的做法是使用Promise.all来做 但是Promise.all存在一个问题，就是当所有的promise中存在一个promise是reject的时候，整个Promise.all就reject了 为了能在有reject的情况下依旧可以执行逻辑，可以使用Promise.allSettled，对比以下代码以及响应的输出结果： 准备数据

let p1 = Promise.resolve(1)
let p2 = Promise.reject(2)
let p3 = Promise.resolve(3)

Promise.allSettled

Promise.allSettled([p1, p2, p3])
  .then(res => {
    console.log("allSettled", res)
  })
  .catch(err => {
    console.log("allSettled", err)
  })

Promise.all

Promise.all([p1, p2, p3])
  .then(res => {
    console.log("all", res)
  })
  .catch(err => {
    console.log("all", err)
  })

3. 空位合并操作符

请看如下对象

let Libra = {
  info: {
    name: "Libra",
    money: 123
  }
}

当我们想要输出money的值的时候，我们可以这样做

// 输出123
console.log(Libra.info.money)

现在我们去掉money属性，并且我们想在money不存在的时候，输出默认值100，我们可以这样做

let Libra = {
  info: {
    name: "Libra"
  }
}
// 输出100
console.log(Libra.info.money || 100)

然而该做法存在一个问题，就是当money属性值为0的时候，也会输出100

let Libra = {
  info: {
    name: "Libra",
    money: 0
  }
}

// 输出100
console.log(Libra.info.money || 100)

而现在我们可以这样做，将可以正确输出0

// 输出0
console.log(Libra.info.money ?? 100)

4. 可选链操作符

请看如下对象

let Libra = {
}

当我们想要打印Libra.info.money的时候，将会发生报错

当属性嵌套多层时，就很有可能会引起报错，以往我们的做法是

// 输出undefined
console.log(Libra && Libra.info && Libra.info.money)

而现在我们可以这样

// 输出undefined
console.log(Libra?.info?.money)

5. BigInt

处理大整数，请看如看代码

// 大整数表示方法1在数字后面加n
let num1 = 111111111111111111111111111n
// 大整数表示方法2用BigInt初始化字符串
let num2 = BigInt('111111111111111111111111111')
// 输出222222222222222222222222222n
console.log(num1 + num2)