ES6+ 可选链操作符
1. 前言
在 ES5 中对于安全地访问对象的深嵌套 属性 时，首先检查它的上 一个 属性 是否存在，然后才能 获取 属性 的值，否则就会报错：
var obj = { }
console . log ( obj . a ) // undefined
console . log ( obj . a . b ) // Uncaught TypeError: Cannot read property 'b' of undefined
上面的 代码 中，obj 是 一个 对象，在 获取 obj 对象的 属性 a 时， 属性 a 没有被定义所以返回 undefined，第 3 行 获取 obj 对象 a 下的 b，由于 obj 上没有 a 属性 ，再 获取 a 上的 b 属性 就会报错。一般这样的情况，在程序中需 要做 前置验证，大部分情况会借助 && 来完成。
var obj = { }
var b = obj . a && obj . a . b
console . log ( b ) // undefined
上面的 代码 中第 2 行首先会判断 obj.a 的值，如果不为空则继续执行 obj.a.b 否则返回 undefined 。这样做虽然能保证程序的健壮性，但当嵌套的对象很深时，则要对每一层进行验证，这样不利于阅读，而且容易出现程序上的 错误 。
针对上面的场景， ES2020 最新的版本给出了它的 解决方 案 —— 可选链操作符。我们可以直接在浏览器的控制台中进行测试，那什么是可选链操作符呢？本节我们来学习这个 ES6 的新语法。
2. 方法 详情
可选链操作符使用 ?. 来表示，可以判断操作符之前 属性 是否有效，从而链式读取对象的 属性 或返回 undefined 。
作用与 . 操作符类似。不同的是 ?. 如果对象链上的引用是 null 或者 undefined 时， . 操作符会像前言中的例子抛出 一个 错误 ，而 ?. 操作符则会按照短路计算的方式进行处理，返回 undefined 。可选链操作符也可用于 函数 调用 ，如果操作符前的 函数 不存在，也将会返回 undefined 。下面我们来看它的使用语法：
2.1 基本语法
语法使用：
obj ? . prop obj ? . [ expr ] arr ? . [ index ] func ? . ( args )
参数解释：
参数 描述 prop 对象上的 属性 expr 对象上的 属性 可以是 一个 表达式 index 对数组使用时，可以接数组的位置 args 对 函数 使用时，可以接收传入的参数