本文摘自PHP中文网,作者青灯夜游,侵删。
本篇文章给大家介绍一下JavaScript中的可选 (?.)操作符。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
如何使用null (null
和undefined
)检查访问对象的嵌套属性?假设我们必须从后台的接口访问用户详细信息。
可以使用嵌套的三元运算符 :
1 | const userName = response ? (response.data ? (response.data.user ? response.data.user.name : null ) : null ) : null ;
|
或者使用 if
进行空值检查:
1 2 3 4 | let userName = null ;
if (response && response.data && response.data.user){
userName = response.data.user.name;
}
|
或者更好的方法是使它成为一个单行链接的&&
条件,像这样:
1 | const userName = response && response.data && response.data.user && response.data.user.name;
|
上述代码的共同之处在于,链接有时会非常冗长,并且变得更难格式化和阅读。这就是 ?.
操作符被提出来的原因,我们改下 ?.
重构上面的代码:
1 | const userName = response?.data?.user?.name;
|
很 nice 呀。
语法
?.
语法在ES2020 中被引入,用法如下:
1 2 3 4 5 | obj.val?.pro
obj.func?.(args)
obj.arr?.[index]
|
使用?.
操作符
假设我们有一个 user
对象:
1 2 3 4 5 6 7 8 9 10 11 | const user = {
name: "前端小智" ,
age: 21,
homeaddress: {
country: "中国"
},
hobbies: [{name: "敲代码" }, {name: "洗碗" }],
getFirstName: function (){
return this .name;
}
}
|
属性
访问存在的属性:
阅读剩余部分
相关阅读 >>
关于http前端存储的总结
javascript添加事件的三种方式
javascript引用类型的详细介绍(附示例)
javascript中函数的调用和this的指向介绍(代码)
javascript中什么是字符串
javascript是java语言的脚本形式?
javascript使用alert函数为什么中文会乱码
javascript也属于编程吗
浏览器的事件循环详解
javaweb与javascript区别是什么
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 聊聊JavaScript中的可选 (?.)操作符