在 JavaScript 中，当我们访问对象或数组的属性或方法时，如果该属性或方法不存在，通常会触发一个错误。在处理复杂数据结构时，这种行为可能会导致大量的控制流代码和异常处理逻辑，需要花费更多的精力来处理。
在 ES10 中，引入了 Optional Chaining 运算符 ?.，它使得在访问某个不存在的属性时，不会触发错误而是直接返回 undefined。在本文中，我们将学习如何使用 Optional Chaining 运算符来处理常见的错误场景，并避免异常和控制流代码。
Optional Chaining 运算符的语法
Optional Chaining 运算符 ?. 的语法如下：
object?.property object?.[property] object?.method()
它的含义是：如果 object 存在，则访问 property 或 method，否则返回 undefined。注意，这个运算符仅存在于对象链中，不能用于数组索引。此外，Optional Chaining 运算符需要在支持 ES10 的运行环境才能使用。
访问深层嵌套的属性
假设我们要访问一个嵌套很深的对象的属性，如下所示：
-- -------------------- ---- -------
----- ---- - -
----- -
-------- -
------- ---- ---- -----
----- ----------
------ -----
---- -------
-
-
--
-------------------------------------- -- ---- ---- ----
--------------------------------------- -- ---------- ------ ---- -------- --------- -- ---------在上面的示例中，尝试访问 address 的属性会导致一个错误。要避免这种错误，我们可以使用 Optional Chaining 运算符来访问深层嵌套的属性：
console.log(data.user?.address?.street); // "123 Main St." console.log(data.user?.address?.country); // undefined
在这个示例中，Optional Chaining 运算符允许我们安全地遍历对象链而不必担心中间对象不存在的问题。如果访问的属性或方法不存在，则表达式会返回 undefined，而不会导致错误。
调用不存在的方法
类似地，Optional Chaining 运算符也适用于访问嵌套对象的方法。在调用不存在的方法时，我们经常需要编写一些冗长的代码来处理可能发生的错误。
-- -------------------- ---- -------
----- ---- - -
----- --------
----------- ---------- -
------ ------------------------
-
--
------------------------------- -- -------
---------------------------------- -- ---------在上面的示例中，我们在调用不存的方法时，使用 Optional Chaining 运算符来避免错误。在用户对象的 format_name 属性不存在时，表达式会返回 undefined。
访问数组元素
由于 Optional Chaining 运算符仅适用于对象链，不能用于数组索引，但我们可以在访问数组属性时使用它。下面是一个示例：
const data = [
{ name: "Alice", age: 30 },
{ name: "Bob", age: 25 }
];
console.log(data[0]?.name); // "Alice"
console.log(data[1]?.age); // 25
console.log(data[2]?.name); // undefined在上面的示例中，Optional Chaining 运算符用于访问数组中的元素属性，如果该元素不存在，则表达式返回 undefined。需要注意的是，此处的 data[2]?.name 并不会抛出错误，而是返回 undefined。因为 Optional Chaining 运算符仅在对象链上生效。
结论
Optional Chaining 运算符是一个很有用的特性，它让我们可以少写很多异常处理代码，提高我们的代码质量和编码效率，特别是当处理复杂数据结构时。在新的 JavaScript 项目中，使用 Optional Chaining 运算符可以帮助我们避免许多不必要的错误，并简化我们的代码逻辑。
然而，需要注意的是，在老的项目中使用 Optional Chaining 运算符要格外小心，因为它需要在支持 ES10 的运行环境才能正常使用。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674fe3cbfbd23cf89070b5bd