在 JavaScript 开发中，我们经常需要访问嵌套对象或数组中的属性或方法。在过去，我们使用 if 语句来检查属性是否存在，然后才能访问它们。但是，这会导致代码变得冗长，特别是在多层嵌套的情况下。为了解决这个问题，JavaScript ES11 引入了可选链（Optional Chaining）操作符。
可选链操作符介绍
可选链操作符是一种简化访问嵌套属性的方法，它使用问号（?）来检查属性是否存在。如果属性存在，则继续访问该属性，否则返回 undefined。这种方法避免了使用 if 语句来检查属性是否存在，从而使代码更简洁。
例如，假设我们有以下对象：
-- -------------------- ---- -------
----- ---- - -
----- -------
-------- -
------- ---- ---- ----
----- ----------
------ -----
---- -------
-
--我们可以使用可选链操作符来访问嵌套属性：
const zipCode = user?.address?.zip;
在这个例子中，我们使用可选链操作符检查 user 对象是否有 address 属性，如果有，则检查 address 对象是否有 zip 属性。如果属性存在，则返回 zip 属性的值，否则返回 undefined。这个例子的结果是：
12345
可选链操作符的使用场景
可选链操作符适用于任何需要访问嵌套对象或数组的情况。例如：
1. 访问嵌套对象的属性
-- -------------------- ---- -------
----- ---- - -
----- -------
-------- -
------- ---- ---- ----
----- ----------
------ -----
---- -------
-
--
----- ------- - -------------------2. 访问嵌套数组的元素
-- -------------------- ---- -------
----- ---- - -
------ -
- ----- ------- ---- -- --
- ----- ------ ---- -- --
- ----- ------- -
-
--
----- --- - --------------------3. 调用嵌套对象的方法
-- -------------------- ---- -------
----- ---- - -
----- -------
-------- -
------- ---- ---- ----
----- ----------
------ -----
---- --------
---------------- -
------ ---------------- ------------- ------------- -------------
-
-
--
----- ----------- - ----------------------------------在这个例子中，我们使用可选链操作符来检查 getFullAddress 方法是否存在。如果存在，则调用该方法并返回结果，否则返回 undefined。
可选链操作符与传统的 if 语句对比
让我们看看使用可选链操作符和传统的 if 语句来访问嵌套属性之间的区别。
使用可选链操作符
-- -------------------- ---- -------
----- ---- - -
----- -------
-------- -
------- ---- ---- ----
----- ----------
------ -----
---- -------
-
--
----- ------- - -------------------使用 if 语句
-- -------------------- ---- -------
----- ---- - -
----- -------
-------- -
------- ---- ---- ----
----- ----------
------ -----
---- -------
-
--
--- --------
-- ----- -- ------------ -- ----------------- -
------- - -----------------
-使用可选链操作符可以使代码更简洁，并且更容易阅读和理解。
可选链操作符的注意事项
虽然可选链操作符使代码更简洁，但是在使用它们时需要注意以下事项：
1. 可选链操作符只能用于访问属性和方法，不能用于赋值或删除属性。
-- -------------------- ---- -------
----- ---- - -
----- -------
-------- -
------- ---- ---- ----
----- ----------
------ -----
---- -------
-
--
-- ------- ----------- --
------------------ - --------
------ -------------------2. 可选链操作符不能用于函数调用的参数。
-- -------------------- ---- -------
----- ---- - -
------ -
- ----- ------- ---- -- --
- ----- ------ ---- -- --
- ----- ------- -
-
--
-- ------- ----------- --
----- --- - ---------------------------------在这个例子中，我们试图使用可选链操作符来检查 getUserIndex 方法的返回值是否存在。然后，我们将返回值用作数组索引的一部分。然而，这是不可能的，因为可选链操作符不能用于函数调用的参数。
总结
可选链操作符是一种简化访问嵌套属性的方法，它使用问号（?）来检查属性是否存在。如果属性存在，则继续访问该属性，否则返回 undefined。可选链操作符使代码更简洁，更容易阅读和理解，特别是在多层嵌套的情况下。在使用可选链操作符时，需要注意它们的限制，例如不能用于赋值或删除属性，以及不能用于函数调用的参数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6604bebdd10417a22220bece