JavaScript 中，访问对象属性时，如果该属性不存在，代码会抛出 TypeError 错误。在复杂的对象结构中访问属性时，需要进行一系列的判断和操作，导致代码的可读性和易用性降低。为了解决这个问题，ES11 引入了可选链操作符，本文将深入解析可选链操作符的使用场景，并探讨如何提升代码的易用性。
可选链操作符
可选链操作符（Optional Chaining Operator）通过明确指出访问的属性是否存在，而不必进行试探操作，来解决访问对象属性时发生 TypeError 错误的问题。可选链操作符的使用方法如下：
obj?.prop // 如果 obj.prop 存在则返回值，否则返回 undefined
其中 ? 表示可选链操作符。
示例
下面举一个使用可选链操作符的示例。假如我们要获取一个用户的详情信息，这里假定返回的数据格式如下：
-- -------------------- ---- -------
-
--- --
----- ------
---- ---
---- -
------ --------- ----------
------- ----
-
-我们想要获取用户的工资，但是有可能返回的数据中没有 job 属性，或者 job 属性中没有 salary 属性。在 ES10 及之前的版本中，我们需要进行如下的判断：
if (user && user.job && user.job.salary) {
console.log(user.job.salary);
}如果 user 或 job 或 salary 中任何一个属性不存在，代码就会抛出异常。使用可选链操作符，我们可以简化代码：
console.log(user?.job?.salary);
如果 user 或 job 或 salary 中任何一个属性不存在，控制台输出的就是 undefined，避免了异常的抛出。
嵌套对象
可选链操作符可以在嵌套对象中发挥巨大的作用。下面是一个使用嵌套对象的示例：
-- -------------------- ---- -------
----- ---- - -
----- -
----- ------
---- ---
---- -
------ --------- ----------
------- -----
-------- -
----- -------
---- --
-
-
-
--假如我们想要获取用户的直属经理（即 job.manager），而该属性可能不存在，我们需要进行如下的操作：
if (data && data.user && data.user.job && data.user.job.manager) {
console.log(`The manager is ${data.user.job.manager.name}`);
}该操作十分冗长且不易读，使用可选链操作符，我们可以通过以下代码轻松地获取经理的名字：
console.log(`The manager is ${data?.user?.job?.manager?.name}`);如果 job 或者 manager 属性不存在，就会输出 undefined。
数组
可选链操作符也适用于数组操作。下面是一个使用数组的示例：
const users = [
{ name: 'Tom', age: 28 },
{ name: 'Jerry', age: 30, job: { title: 'Programmer', salary: 6000 } }
];假如我们想要获取 Jerry 的工资，我们需要进行如下的操作：
if (users && users[1] && users[1].job && users[1].job.salary) {
console.log(`Jerry's salary is ${users[1].job.salary}`);
}该操作也十分冗长且不易读，使用可选链操作符，我们可以通过以下代码轻松地获取 Jerry 的工资：
console.log(`Jerry's salary is ${users?.[1]?.job?.salary}`);如果 job 或者 salary 属性不存在，就会输出 undefined。
深度优先遍历
当对象嵌套的深度很大时，可选链操作符能够极大地简化代码。下面是一个使用深度优先遍历的示例：
-- -------------------- ---- -------
----- ---- - -
----- -
----- ------
---- ---
---- -
------ --------- ----------
------- -----
-------- -
----- -------
---- ---
----------- -
----- ------
------- -
----- -------
---- --
-
-
-
-
-
--假如我们想要获取 Mark 的名字，我们需要进行如下的操作：
if (data && data.user && data.user.job && data.user.job.manager && data.user.job.manager.department && data.user.job.manager.department.leader) {
console.log(`The leader is ${data.user.job.manager.department.leader.name}`);
}使用可选链操作符，我们可以通过以下代码获取 Mark 的名字：
console.log(`The leader is ${data?.user?.job?.manager?.department?.leader?.name}`);如果对象属性不存在，就会输出 undefined。
总结
可选链操作符是 ES11 中新增的一项语法特性，它通过减少代码的运行时错误，增强了代码的易用性和可读性。在对象结构嵌套复杂的场景下，可选链操作符能够更好地优化代码。但需要注意的是，该特性需要注意兼容性，目前尚未得到所有浏览器的全面支持。
希望本文能够帮助读者了解可选链操作符的使用场景，并且能够合理地运用该技术提升 JavaScript 代码的易用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649104f648841e9894f0754e