Javascript Optional Chaining Operator

使用可选链安全访问不确定的数据

前言

学习可选链语法可以安全地访问嵌套对象的属性,即使属性不存在也不会导致错误。

「不存在的属性」问题点

访问对象属性对开发者来说是一件非常直观且每天都在做的事,但当数据来源不稳定,比如使用第三方数据或用户输入时,应该如何避免因使用不存在的值而出现的错误呢?

const person = {
name: 'Doe',
age: 28,
};
console.log(person.child.age); // Uncaught TypeError: person.child is undefined

可以使用 条件运算符🔗逻辑运算符🔗 来实现目的:

// 如果 person.name 存在,使用 person.name ,否则等于 undefined。
console.log(person.name ? person.name : undefined);
// 如果 person 存在,取 person.name,否则等于 undefined
console.log(person && person.name);

虽然可行,但并不是非常优雅的解决方案,并且当嵌套的程度越大,整段代码就显得更加冗余。

const person = {};
console.log(person.address ? (user.address.street ? user.address.street.name : null) : null);

使用可选链 .?

要解决以上的问题很简单,使用 可选链🔗。简单来说,如果输入的值不存在或 null,选取的值就会被视为 undefined,让程序不至于崩溃。用法有以下两种:

  1. 避免访问不存在的值导致程序崩溃(如值不存在,得 undefined 值)
  2. 设置默认值(搭配 ?? 运算符)
const person = {};
// 得 undefined 值
console.log(person?.name);
// 得默认值 "未命名用户"
console.log(person?.name ?? '未命名用户');

通常在接收远程数据或访问 DOM 时使用,如果非常确定获取的数据一定会存在的话,可以不写,有写算是加一层异常保护。

此外「链式」可选链也是可行的,如下:

let user = {};
// 得 undefined 值
console.log(user?.address?.street);

注意事项

不应该过度使用 ?. 可选链,只在非必要的数据选择上使用即可。举例来说:当 user 对象中的 address 是非必要的,就可以使用 user.address?.street 来选择,而非 user?.address?.street

过度使用可选链将导致不恰当的时机警告被压制,使变量被填充成 undefined 值,导致更难调试。

参考资料