ES2020新特性

1. 可选链操作符

• 可选链操作符 ?. 可以按照操作符之前的属性是否有效，链式读取对象的属性或者使整个对象链返回 undefined。
• ?. 运算符的作用与 . 运算符类似，不同之处在于，如果对象链上的引用是 nullish (null 或者 undefined)，. 操作符会抛出一个错误，而 ?. 操作符则会按照短路计算的方式进行处理，返回 undefined。
• 可选链操作符也可用于函数调用，如果操作符前的函数不存在，也将会返回 undefined。

应用

在这之前，针对一个对象：obj。查找一个深度嵌套的子属性时，需要使用如下方式取值：

const nestedProp = obj && obj.first && obj.first.second;

为了避免报错，在访问obj.first.second之前，要保证 obj.first 的值既不是 null，也不是 undefined。如果只是直接访问 obj.first.second，而不对 obj.first 进行校验，则有可能抛出错误:

报错： Uncaught TypeError: Cannot read property 'second' of undefined

有了可选链操作符（?.），在访问 obj.first.second 之前，不再需要明确地校验 obj.first 的状态，再并用短路计算获取最终结果：

let nestedProp = obj?.first?.second;

2. 空位合并操作符

当查询某个属性时，为防止该属性为空通常会设置一个默认的值，比如下面两种方式：

let c = a ? a : b // 方式1
let c = a || b // 方式2

这两种方式有个明显的弊端，它都会覆盖所有的假值，如(0, '', false)，这些值可能是在某些情况下有效的输入。

let x = {
  profile: {
    name: 'cedric',
    age: ''
  }
}
console.log(x.profile.age || 18) //18

上例中age的属性为空字符串，却被等同为假值。
为了解决这个问题，ES2020诞生了个新特性--空位合并操作符，用 ?? 表示。
如果表达式在??的左侧运算符求值为 undefined 或 null，才会返回其右侧默认值：

var a = null, b = false;
console.log(a ?? '默认值') // "默认值"
console.log(b ?? '测试') // false