定义
可选链式操作符(?.)允许读取位于连接对象链深处的属性值, 而不必明确验证链中的每个引用是否有效。
咳咳咳, 很难听懂的样子, 翻译如下:
该操作符跟.链式操作符类似, 不同之处在于引用为null或者undefined的情况下不会引起报错, 不存在返回值是undefined.
还是有点点难理解, 那么请往下👇看！
优势
在查询具有多个层级的对象时、不再需要进行冗余的前置校验.
链式操作符(.)
弊端: 当需要访问嵌套在对象内部好几层的属性时、会需要做大量类似繁琐的前置校验操作。
目的: 为避免报错、在访问obj.info.isNotUse、要把整obj.info既不是null也不是undefined。
const obj = null
let status = obj && obj.info && obj.info.isNotUse
console.log(status,'运算结果') // null 运算结果
紧接着运行下如下代码：
const obj = null
let status = obj.info.isNotUse
console.log(status,'运算结果') // error
我们会发现：若不先确认obj跟obj.info的值是非null, 那么经常会出现如下错误:
可选链式操作符(?.)
让我们看看有了可选链式操作符、是不是能简化上述繁琐的前置操作:
const obj = null
let status = obj?.info?.isNotUse
console.log(status,'运算结果') // null 运算结果
优点: 通过可选链式操作符(?.), 在访问obj.info.xx时, 不需要再明确校验obj.info的状态了, 会通过短路计算获取到最终结果:
若该obj或者obj.info为null/undefined, 则会直接返回undefined;
传送门
最近在学习ES2020的新特性, 下面是同系列文章, 感兴趣的可戳！
ES2020: 空值合并运算符?： juejin.cn/post/694059…
