在 JavaScript ES11 中，新增了一个重要的操作符：可选链（Optional Chaining），它为我们在处理 JavaScript 对象和数组时提供了更加灵活的方式，特别是在访问深层次的属性或方法时。本文将详细介绍可选链操作符的语法、用法和示例，并且探讨如何在实际开发中使用它。
可选链操作符的语法
可选链操作符是一个问号（?）加上一个点号（.）的组合，它的语法如下：
obj?.prop // 访问对象属性 arr?.[index] // 访问数组元素 func?.(args) // 调用函数
其中，obj 表示对象，prop 表示对象的属性名称；arr 表示数组，index 表示数组的索引；func 表示函数，args 表示函数的参数。在访问属性、数组元素或调用函数时，如果对象或数组不存在或者属性、元素或函数不存在，可选链操作符会返回 undefined，而不是抛出错误。
可选链操作符的用法
我们可以使用可选链操作符来访问深层次的属性或方法，而不必检查每一层是否存在，从而避免了一些繁琐的代码。例如，我们可以这样访问嵌套的对象属性：
-- -------------------- ---- -------
----- ------ - -
----- --------
-------- -
----- -----------
------- -------- ------
-------- --------
-
--
--------------------------------- -- ----------
------------------------------------ -- ---------- ------ ---- -------- --------- -- ---------在上面的代码中，我们访问了 person 对象的 address 属性，然后再访问 address 对象的 city 和 country 属性。但是，如果 address 对象不存在，或者 country 属性不存在，就会抛出错误。
现在，我们可以使用可选链操作符来避免这种情况：
console.log(person?.address?.city); // 'Shanghai' console.log(person?.address?.country); // undefined
在上面的代码中，我们使用了可选链操作符 ?. 来访问 person 对象的 address 属性和 address 对象的 city 和 country 属性。如果某个属性不存在，可选链操作符就会返回 undefined，而不会抛出错误。
另外，我们还可以使用可选链操作符来调用嵌套的函数，例如：
-- -------------------- ---- -------
----- ------ - -
----- --------
------------ -
------ -
----- -----------
------- -------- ------
-------- --------
--
-
--
--------------------------------------- -- ----------
------------------------------------------ -- ---------在上面的代码中，我们定义了一个 getAddress 函数，它返回一个对象。我们可以使用可选链操作符 ?. 来调用 getAddress 函数，并访问返回对象的属性。如果 getAddress 函数不存在，或者返回对象的属性不存在，可选链操作符就会返回 undefined。
可选链操作符的示例
下面是一些使用可选链操作符的示例，它们展示了可选链操作符的灵活性和便利性。
示例一：访问嵌套的对象属性
-- -------------------- ---- -------
----- ---- - -
----- -
--- --
----- --------
------ --------------------
-------- -
----- -----------
------- -------- ------
-------- --------
-
-
--
-------------------------------------- -- ----------
----------------------------------------- -- ---------在上面的代码中，我们定义了一个 data 对象，它包含了一个嵌套的 user 对象和 user 对象的嵌套属性。我们使用可选链操作符 ?. 来访问 user 对象的 address 属性和 address 对象的 city 和 country 属性。如果某个属性不存在，可选链操作符就会返回 undefined。
示例二：调用嵌套的函数
-- -------------------- ---- -------
----- ---- - -
----- -
--- --
----- --------
------ --------------------
------------ -
------ -
----- -----------
------- -------- ------
-------- --------
--
-
-
--
------------------------------------------- -- ----------
---------------------------------------------- -- ---------在上面的代码中，我们定义了一个 data 对象，它包含了一个嵌套的 user 对象和 user 对象的嵌套函数。我们使用可选链操作符 ?. 来调用 getAddress 函数，并访问返回对象的属性。如果 getAddress 函数不存在，或者返回对象的属性不存在，可选链操作符就会返回 undefined。
示例三：访问嵌套的数组元素
-- -------------------- ---- -------
----- ---- - -
------ -
-
--- --
----- --------
------ --------------------
---------- -
-
----- -----------
------- -------- ------
-------- --------
--
-
----- ----------
------- ----------- --------
-------- --------
-
-
--
-
--- --
----- ------
------ -----------------
-
-
--
--------------------------------------------------- -- ----------
------------------------------------------------------ -- ---------在上面的代码中，我们定义了一个 data 对象，它包含了一个嵌套的 users 数组和 users 数组的嵌套属性。我们使用可选链操作符 ?. 来访问 users 数组的第一个元素的 addresses 属性和 addresses 数组的第一个元素的 city 和 country 属性。如果某个属性不存在，可选链操作符就会返回 undefined。
如何在实际开发中使用可选链操作符
在实际开发中，我们可以使用可选链操作符来简化代码，避免一些繁琐的检查和操作。例如，我们可以这样检查一个对象是否存在，并访问它的属性：
if (person && person.address && person.address.city) {
console.log(person.address.city);
}这段代码需要检查 person 对象是否存在，然后再检查 address 属性是否存在，最后才能访问 city 属性。但是，如果我们使用可选链操作符，就可以避免这种繁琐的检查：
console.log(person?.address?.city);
这段代码会自动检查 person 对象是否存在，然后再检查 address 属性是否存在，最后访问 city 属性。如果某个属性不存在，可选链操作符就会返回 undefined，而不会抛出错误。
另外，我们还可以使用可选链操作符来处理异步数据，例如：
const data = await fetchData(); console.log(data?.user?.address?.city);
在上面的代码中，我们使用可选链操作符来访问异步数据的属性。如果数据还没有加载完成，或者某个属性不存在，可选链操作符就会返回 undefined，而不会抛出错误。
结论
可选链操作符是 JavaScript ES11 中的一个重要特性，它为我们在处理 JavaScript 对象和数组时提供了更加灵活的方式。我们可以使用可选链操作符来访问深层次的属性或方法，而不必检查每一层是否存在，从而避免了一些繁琐的代码。在实际开发中，我们可以使用可选链操作符来简化代码，避免一些繁琐的检查和操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675fba6f82d91af53578de9e