在前端开发中，我们经常需要处理复杂的数据结构，例如嵌套的对象或数组。在访问这些数据时，我们通常需要进行多次的判空操作，以确保代码不会因为数据中的某个属性或元素不存在而出错。为了解决这个问题，ECMAScript 2021 引入了可选链操作符，可以简化代码并提高可读性。
可选链操作符的概念
可选链操作符是一个问号（?）后跟一个点号（.）或方括号（[]）。它可以用于访问一个嵌套对象或数组中的属性或元素，如果该属性或元素不存在，则返回 undefined，而不是抛出错误。
下面是一个使用可选链操作符的例子：
----- ---- - -
----- -
----- --------
-------- -
----- ----------
-
-
--
-- ------------------
----- ---- - --------------------------
------------------ -- ----------
-- ----------- ---------
----- ------- - -----------------------------
--------------------- -- ---------在上面的例子中，我们使用了可选链操作符 ?. 来访问嵌套对象 data 中的属性。当属性不存在时，操作符会返回 undefined，而不会抛出错误。这样可以避免使用繁琐的判空操作。
可选链操作符的应用
可选链操作符可以用于访问嵌套对象或数组中的属性或元素，以及调用嵌套函数。下面是一些使用可选链操作符的例子：
访问嵌套对象的属性
----- ---- - -
----- -
----- ------
-------- ----
-
--
-- ------------------
----- ---- - --------------------------
------------------ -- ---------在上面的例子中，我们使用可选链操作符访问嵌套对象 data 中的属性，即使 address 属性为 null，也不会抛出错误。
访问嵌套数组的元素
----- ---- - -
------ -
- ----- ------- --
- ----- ------ -------- - ----- ---------- - -
-
--
-- ------------------
----- ---- - --------------------------------
------------------ -- ----------在上面的例子中，我们使用可选链操作符访问嵌套数组 data.users 中的元素，即使数组元素不存在或没有 address 属性，也不会抛出错误。
调用嵌套函数
----- ---- - -
----- -
----- --------
------------ -
------ -------------
-
-
--
-- --------------
----- ---- - ---------------------------------
------------------ -- ---------在上面的例子中，我们使用可选链操作符调用嵌套函数 data.user.getAddress()，即使该函数不存在或返回值为 undefined，也不会抛出错误。
可选链操作符的使用注意事项
虽然可选链操作符可以简化代码并提高可读性，但是在使用时需要注意以下几个问题：
1. 可选链操作符的兼容性
可选链操作符是 ECMAScript 2021 新增的特性，不是所有的浏览器和运行环境都支持。在使用时需要注意兼容性问题，并根据实际情况进行兼容处理。
2. 可选链操作符的优先级
可选链操作符的优先级比点号（.）和方括号（[]）低，但比函数调用操作符（()）高。在使用时需要注意优先级问题，并根据实际情况进行括号处理。
3. 可选链操作符的使用场景
可选链操作符适用于访问嵌套对象或数组中的属性或元素，以及调用嵌套函数。但是在一些特殊场景，例如需要访问一个不存在的属性或元素时，可选链操作符可能会产生意想不到的结果。在使用时需要注意场景问题，并根据实际情况进行判断处理。
总结
可选链操作符是 ECMAScript 2021 新增的特性，可以简化代码并提高可读性。它可以用于访问嵌套对象或数组中的属性或元素，以及调用嵌套函数。在使用时需要注意兼容性、优先级和使用场景等问题。使用可选链操作符可以使代码更加简洁明了，提高开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/650c61b795b1f8cacd664971