-
Notifications
You must be signed in to change notification settings - Fork 3
Open
Labels
Description
JS 代码简洁之道 - 优雅判断对象属性空值
参考文章:
如何优雅判断属性值为空
前言
当我们尝试从 null 或者 undefined 中通过属性取出数据时,会报错。因为 null 或 undefined 中根本就没有属性及对应的值。
“可选链” 这一语法可以帮助我们实现对象的优雅判空。
可选链
?.
可选链 ?.
是一种访问嵌套对象属性的安全的方式。
原理:如果可选链 ?.
前面的部分是 undefined 或者 null,它会停止运算并返回该部分。(短路效应)
换句话说,例如 value?.prop
:
如果 value 存在,则结果与 value.prop
相同,
否则(当 value 为 undefined/null 时)则返回 undefined。
注意:
?.
语法使其前面的值成为可选值,但不会对其后面的起作用。例如,在user?.address.street.name
中,?.
允许 user 为 null/undefined,但仅此而已。更深层次的属性是通过常规方式访问的。如果我们希望它们中的一些也是可选的,那么我们需要使用更多的?.
来替换.
。
?.
不能用在赋值语句的左侧。
?.[]
若我们需要使用方括号 []
而不是点符号 .
来访问属性,语法 ?.[
] 可以代替 ?.
使用。跟前面的例子类似,它允许从一个可能不存在的对象上安全地读取属性。
?.()
?.()
用于调用一个可能不存在的函数。
let userAdmin = {
admin() {
alert("I am admin");
}
};
let userGuest = {};
userAdmin.admin?.(); // I am admin
userGuest.admin?.(); // 啥都没有(没有这样的方法)
工作流程:首先使用点符号(userAdmin.admin
)来获取 admin 属性,因为用户对象一定存在,因此可以安全地读取它。
然后 ?.()
会检查它左边的部分:如果 admin 函数存在,那么就调用运行它(对于 userAdmin)。否则(对于 userGuest)运算停止,没有错误。
总结
可选链 ?.
语法有三种形式:
obj?.prop
—— 如果 obj 存在则返回obj.prop
,否则返回 undefined。obj?.[prop]
—— 如果 obj 存在则返回obj[prop]
,否则返回 undefined。obj.method?.()
—— 如果obj.method
存在则调用obj.method()
,否则返回 undefined。
正如我们所看到的,这些语法形式用起来都很简单直接。?.
检查左边部分是否为 null/undefined,如果不是则继续运算。
?.
链使我们能够安全地访问嵌套属性。
但是,我们应该谨慎地使用?.
,仅在当左边部分不存在也没问题的情况下使用为宜。以保证在代码中有编程上的错误出现时,也不会对我们隐藏。