页面中的数据来源很大部分都是从服务端返回的,前端会获取到数据然后对数据进行展示,大体代码如下:
//拉取数据
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