在前端开发中，我们经常需要处理对象或数组中的嵌套值，这时候一旦某个属性或元素不存在或为空，常常会引发访问错误，造成程序崩溃或数据异常。针对这种情况，ES11 中引入了 Optional Chaining 运算符，这个新的语法特性可以减少异常和错误的出现。
什么是 Optional Chaining 运算符？
Optional Chaining 运算符是一个“？”符号，它用于访问安全地（safe access）对象的属性或数组的元素，即使这些属性或元素不存在或为空，也不会抛出错误，而是返回 undefined。
例如，我们使用点号访问对象属性的语法：
-- -------------------- ---- -------
----- ------ - -
----- ------
-------- -
----- -----------
------- -------- -----
-
--
----- ---- - --------------------在上述代码中，如果 person 对象中的 address 属性不存在，访问 city 属性时会报错。使用 Optional Chaining 运算符改写这段代码：
const city = person?.address?.city;
这样，即使 address 或 city 的值为 undefined，也能安全地获取到 city 的值，不再抛出错误。
如何使用 Optional Chaining 运算符？
Optional Chaining 运算符可以和其他操作符一起使用，也可以嵌套多次使用。
与函数调用一起使用
使用 Optional Chaining 运算符应该注意的一个问题是，由于它返回的是 undefined，所以如果希望调用对象某个方法，应该在运算符后面使用圆括号，否则将直接返回 undefined。
例如，我们有一个对象数组，里面的元素包含 name 和 sayHi 两个属性：
-- -------------------- ---- -------
----- ------ - -
------ ------ ------ -- -- ---------------- --------
------ --------
--
--------------------- -- -
-- ---- -------------- ------------- ----- --
----------------- -- -- -------- -------- -------
---这样，即使数组中的元素没有 sayHi 属性，也能安全地调用 sayHi 方法了，不会抛出 TypeError 错误。
赋值运算
Optional Chaining 运算符也可以用于赋值运算符，例如：
-- -------------------- ---- -------
----- ------- - -
----- ------
-------- -
----- -----------
------- -------- -----
-
--
----- ------- - -
----- -------
--
----- ----- - ---------------------- -- ---------- -- ----- --- ----------
----- ----- - ---------------------- -- ---------- -- ----- --- ---------这样，即使对象中的属性不存在或为空，也能安全地获取属性值了，不会抛出错误。
多次嵌套使用
Optional Chaining 运算符也可以嵌套多次使用，如：
-- -------------------- ---- -------
----- ------ - -
----- ------
-------- -
----- -----------
------- -------- ------
--------- -
----- --------
-
-
--
----- ------------ - -------------------------------- -- ------------ --- --------这样，即使嵌套层数很深，代码也更加可读且不容易出现访问异常。
待优化的问题
目前，Optional Chaining 运算符仍然存在以下两个问题：
- 兼容性问题，不兼容低版本浏览器。
- 对于数组而言，在使用 Optional Chaining 运算符获取元素值时，不能保证其顺序与原来一致，这会影响到应用的正确性。
总结
Optional Chaining 运算符是一种新的语法特性，它可以安全地访问对象的属性或数组的元素，减少异常和错误的出现，提高程序的健壮性。在使用时，我们需要注意一些细节，如希望调用对象某个方法时应该在运算符后面使用圆括号。
虽然 Optional Chaining 运算符存在一定的问题和限制，但是随着浏览器的更新换代，它的使用范围和适用性会不断提升，相信它会成为前端开发中不可或缺的一部分。
示例代码
下面是讨论中使用到的示例代码：
-- -------------------- ---- -------
----- ------ - -
----- ------
-------- -
----- -----------
------- -------- -----
-
--
----- ---- - ----------------------
----- ------ - -
------ ------ ------ -- -- ---------------- --------
------ --------
--
--------------------- -- -
----------------- -- -- ------------ --
---
----- ------- - -
----- ------
-------- -
----- -----------
------- -------- -----
-
--
----- ------- - -
----- -------
--
----- ----- - ---------------------- -- ---------- -- ----- --- ----------
----- ----- - ---------------------- -- ---------- -- ----- --- ---------
----- ------ - -
----- ------
-------- -
----- -----------
------- -------- ------
--------- -
----- --------
-
-
--
----- ------------ - -------------------------------- -- ------------ --- --------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646c16ee968c7c53b0b25e38