在前端开发过程中，经常会用到嵌套的对象或数组。当我们需要在这些深层次嵌套的数据中获取某个属性或调用某个函数时，常常需要使用复杂的条件语句来判断中间的每个对象或数组是否存在。这样的代码不仅难以管理和维护，也容易引发错误。但是，ES11 中引入的可选链操作符为我们提供了一种优雅的解决方案。
什么是可选链操作符
可选链操作符是 ES11 中新增的一项语法糖，用于判断可选属性是否存在。在使用可选链操作符前，需要使用 ? 手动判断对象或数组的属性是否存在，避免因不存在而导致代码出现错误。使用可选链操作符后，我们可以通过 ?. 来简化条件语句，优化代码的可读性和可维护性。
可选链操作符的示例
以下示例中，我们会比较使用可选链操作符和不使用可选链操作符的代码。假设我们有一个名为 user 的对象，其中包含 profile 和 address 两个属性。
不使用可选链操作符
-- -------------------- ---- -------
-- ------ -
-- -------------- -
-- ------------------- -
-------------------------------
- ---- -
----------------- ------- ---- -- ----------
-
- ---- -
----------------- ------- -- ----------
-
- ---- -
----------------- -- ----------
-使用可选链操作符
console.log(user?.profile?.name ?? 'user profile name is missing');
以上代码中，我们使用 ?. 来确认 user、user.profile 和 user.profile.name 是否存在，即使有任一属性不存在，代码也不会出现错误。同时，我们还使用 ?? 来指定属性不存在时需要执行的操作。
注意事项
使用可选链操作符需要注意以下几点：
- 可选链操作符只能用于对象和数组，不能用于基本数据类型。
- 可选链操作符运算后的结果是
undefined或指定的默认值。 - 可选链操作符不能用于函数调用，但可以用于函数绑定。如果需要在一个多层级的对象上调用一个函数，需要用函数绑定来实现。
总结
可选链操作符为我们提供了一种优雅的解决方案，可以避免因深层次的嵌套而产生的复杂的条件语句，同时提高代码的可读性和可维护性。在编写复杂的前端代码时，我们应该善于利用这一语法糖，以便更加高效地完成工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eb1468f6b2d6eab35bb93f