在前端开发中，我们经常需要处理复杂的 JSON 对象或者是嵌套的对象属性。然而，有时候我们会遇到对象属性不存在的情况，这会导致程序抛出 TypeError 异常，这种情况下使用可选链操作符可以帮助我们避免这种错误。
ECMAScript 2021 引入了可选链操作符，使我们能够更方便地处理嵌套的对象属性。
什么是可选链操作符
可选链操作符是一种新的语法，它允许我们通过逐级检查对象属性是否存在来避免引用 undefined 属性的错误。当我们使用可选链操作符 ?. 时，如果左侧的对象属性为 undefined 或 null，那么操作符返回 undefined。
下面是一个例子：
-- -------------------- ---- -------
----- ------ - -
----- ------
-------- -
----- ---- ------
------ ----
-
--
-- ----------
--------------------------------- -- ---- -----
-- ----------
---------------------------------- -- ---- -----
-- ----------- ---------
----------------------------------------- -- ---------在上面的例子中，我们使用了可选链操作符 ?. 来避免引用 undefined 属性的错误。如果我们使用传统的属性访问方式，那么在 person 对象没有 address 属性时我们将会遇到一个 TypeError 异常。
可选链操作符的使用场景
可选链操作符最常用的场景是在处理嵌套对象的属性时。下面是一个常见的使用场景：
-- -------------------- ---- -------
----- ------ - -
----- ------
-------- -
----- ---- ------
------ ----
-
--
-- -- ------ ---- ------- ------ ---- --
----- ---- - ----------------------
-- ------ -
------------------
-在上面的例子中，我们使用了可选链操作符 ?. 来检查 person 对象是否有 address 属性，并且检查 address 属性是否有 city 属性。如果这些属性存在，那么我们就成功地获取到了 city 属性的值。
注意事项
虽然可选链操作符可以帮助我们避免访问 undefined 属性的错误，但是它并不是万能的。下面是一些需要注意的事项：
- 可选链操作符只能用于对象属性访问，而不能用于函数调用、数组访问等。
- 可选链操作符只能用于 ECMAScript 2021 及以上版本的 JavaScript 中，老版本的 JavaScript 不支持可选链操作符。
总结
在复杂的 JSON 对象或嵌套的对象属性处理中，使用可选链操作符可以帮助我们避免 undefined 属性的错误。我们可以使用 ?. 操作符对对象属性进行逐级检查，避免可能的异常和错误。在实际项目中，应用可选链操作符可以提高代码的健壮性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6500093495b1f8cacde3e103