Skip to content

JS 代码简洁之道 - 优雅判空 #17

@jtwang7

Description

@jtwang7

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,如果不是则继续运算。
    ?. 链使我们能够安全地访问嵌套属性。
    但是,我们应该谨慎地使用 ?.,仅在当左边部分不存在也没问题的情况下使用为宜。以保证在代码中有编程上的错误出现时,也不会对我们隐藏。

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions