实用的 js 开发技巧——可选链操作符

页面中的数据来源很大部分都是从服务端返回的，前端会获取到数据然后对数据进行展示，大体代码如下：

//拉取数据
const data = {
 user:{}
}
//根据后端数据展示
console.log(data.user.address.detail)

但是我们经常会看到如下错误：

Uncaught TypeError: Cannot read property 'detail' of undefined

很容易定位到其实是user 中没有address 属性，那么再去访问address.detail就会有如上的错误。根本原因是没考虑到数据不存在情况，需要给数据加保护。那么自然而然会想到如下解决方案：

console.log(data.user && data.user.address && data.user.address.detail)

使用逻辑与 && 操作符号会进行短路，遇到为false (data.user.address)情况则不会执行后面的表达式(address.detail)，因此不会出现问题。但是当属性在对象链路比较深的时候，代码会显得很繁琐。

可选链操作符(?.)的出现可以简化表达式。可选链操作允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。那么之前的例子🌰我们可以使用如下的方式。

const data = {
 user:{}
}
console.log(data?.user?.address?.detail)

再看使用数组的例子：

let address = [];
address?.map(item => {
 console.log(item.detail)
})

这样可以避免出现Cannot read property 'map' of undefined

目前 Chrome 80及以上版本已经支持，如果不支持也可以使用babel转换。

参考资料：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_AND

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining