1.背景
在 ES5 访问对象的深嵌套属性时obj.a.b，首先需要检查它的上一个属性是否存在，然后才能获取属性的值，否则就会报错
let obj = {}
console.log(obj.a) //undefined
console.log(obj.a.b) // => undefined.b 会报错
ES5中借助 && 来保证程序的健壮性，但当嵌套的对象很深时，则要对每一层进行验证，这样不利于阅读，而且容易出现程序上的错误
var obj = {}
var b = obj.a && obj.a.b
console.log(b) // undefined
针对上面的场景，ES2020 最新的版本给出了它的解决方案 —— 可选链操作符。
2. 方法详情
可选链操作符使用 ?. 来表示，可以判断操作符之前属性是否有效，从而链式读取对象的属性或返回 undefined 。
作用与 . 操作符类似。不同的是 ?. 如果对象链上的引用是 null 或者 undefined 时， . 操作符会像前言中的例子抛出一个错误，而 ?. 操作符则会按照短路计算的方式进行处理，返回 undefined。可选链操作符也可用于函数调用，如果操作符前的函数不存在，也将会返回 undefined。下面我们来看它的使用语法：
基本语法
语法使用：
obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)
参数解释：
| 参数 | 描述 |
|---|---|
| prop | 对象上的属性 |
| expr | 对象上的属性可以是一个表达式 |
| index | 对数组使用时，可以接数组的位置 |
| args | 对函数使用时，可以接收传入的参数 |
实例
var user = {
name: 'Kira',
address: {
city: 'beijing',
other: {}
}
}
console.log(user?.name); // Kira
a?.b); // => window.a?.b => undefined
console.log(user?.address?.city); // beijing
console.log(user?.address?.other?.a?.b); // undefined
上面的代码可以看出，使用的方式很简单，在确保上一个值是有效时才会去获取下面的属性，避免程序报错。
对象的引用或函数可能是 undefined 或 null 时，可选链操作符提供了一种方法来简化被连接对象的值访问。
3. 使用场景
3.1 可选链和表达式
当使用方括号与属性名的形式来访问属性时，你也可以使用可选链操作符：
let firstName = obj?.['first' + 'Name'];
3.2 可选链与函数调用
当尝试调用一个可能不存在的方法时也可以使用可选链。这将是很有帮助的。当函数调用时如果被调用的方法不存在，使用可选链可以使表达式自动返回 undefined 而不是抛出一个异常。
var person = {}
var name = person.getName?.();
注意：如果属性名不是函数也会报错，可选链只会判断属性是否有效，而不能判断属性的类型。
var person = {getName: ''}
var name = person.getName?.();
// Uncaught TypeError: person.getName is not a function
3.3 可选链不能用于赋值
可选链是取值操作时所用的安全方法，不能使用在赋值操作上。
let obj = {};
obj?.name = '5axxw'; // Uncaught SyntaxError: Invalid left-hand side in assignment
上面的代码第 2 行使用可选链进行赋值操作，控制台会报语法错误，赋值的左侧是无效的。
3.4 可选链访问数组元素
可选链也是可以使用在数组取值的前置验证的。
var arr = []
let item = arr?.[5];
4. 小结
本节学习了 ES6 中新增的可选链语法，它提供了一种方法来简化被连接对象的值访问，保证访问数据的安全性。它可以用于对象、数组、函数中。这个语法很有用，在项目中使用可以达到事半功倍的效果。
