- 小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
可选链操作符的定义
可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。
?.
操作符的功能类似于 .
链式操作符,不同之处在于,在引用为空([nullish]) ([null
] 或者 [undefined
] 的情况下不会引起错误,该表达式短路返回值是 undefined
。与函数调用一起使用时,如果给定的函数不存在,则返回 undefined
。
基本用法
案例1
let allName = {
name: "zz",
age: {
name: "cat"
}
}
console.log(allName.genter ?. age)
// undefined
复制代码
案例2
let nestedProp = obj.first?.second;
复制代码
这句代码等价于
let temp = obj.first;
let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);
复制代码
案例3
const zz = {
a: 'foo',
b: {
c: 'bar'
}
}
console.log(zz.b?.c) // 输出 bar
console.log(zz.d?.c) // 输出 undefined
console.log(zz.func?.()) // 不报错,输出 undefined
复制代码
可选链除了可以用在获取对象的属性,还可以用在数组的索引 arr?.[index]
,也可以用在函数的判断 func?.(args)
,当尝试调用一个可能不存在的方法时也可以使用可选链。
调用一个对象上可能不存在的方法时(版本原因或者当前用户的设备不支持该功能的场景下),使用可选链可以使得表达式在函数不存在时返回 undefined
而不是直接抛异常。
应用场景
案例1
以前的用法 我相信很多人在项目中都会用这种用法来避免js出错
let allName = {
name: "zz",
age: {
name: "cat"
}
}
if(allName && allName.age && allName.age.name === "cat") {
}
复制代码
现在我们学会了可选链操作符,我们来试试
if(allName ?. age ?. name === "cat") {
}
复制代码
案例2
我们使用空值合并操作符设置一个默认值,什么是空值合并操作符,可以阅读这篇文章,空值合并操作符。
let customer = {
name: "Carl",
details: { age: 82 }
};
let customerCity = customer?.city ?? "zz";
console.log(customerCity); // “zz”
复制代码
推荐阅读
- # 我在项目用到这十多种轮子助我提升开发效率,收藏
- # JS箭头函数 什么时候用 ,什么时候不能用,我总结出了4点
- # 严格模式和非严格模式的区别,我该如何去总结?
- # 我用一文总结File base64 Blob对象之间切换自如
- # 瞻前思后 如何让文章中的图片随屏幕滚动滑入滑出?我是这样实现的