在前端开发中，我们经常需要检查对象或数组中的可选属性来规避潜在的错误。在 ECMAScript 2021 中，Optional Chaining 运算符为我们提供了一种简洁且可读性良好的方式来处理这个问题。在本文中，我们将介绍 Optional Chaining 运算符的使用方法，并通过示例代码进行说明。
什么是 Optional Chaining 运算符？
Optional Chaining 运算符允许我们检查对象或数组中可能不存在的属性，而不必使用复杂的条件语句来避免出现错误。如果属性存在，则返回该属性的值；如果属性不存在，则返回 undefined。
Optional Chaining 运算符的语法如下：
object?.property array?.[index]
其中，object 是一个对象，property 是一个属性名称。如果对象中存在该属性，则返回该属性的值；如果不存在该属性，则返回 undefined。
array 是一个数组，index 是一个索引。如果数组中存在该索引，则返回该元素的值；如果不存在该索引，则返回 undefined。
如何使用 Optional Chaining 运算符？
考虑以下示例代码：
-- -------------------- ---- -------
----- ------ - -
----- -----
---- ---
-------- -
----- ---- ----
-------- -
------- --- --- ---
----- -----
------ -----
----------- --------
-
-
--
----- ------ - ------------------------------如果我们要获取 person 的公司地址中的 street 属性，则需要使用以下代码：
const street = person && person.company && person.company.address && person.company.address.street;
这种方式既冗长又容易出错，因为我们需要检查每个层次的属性是否存在。使用 Optional Chaining 运算符，我们只需要这样写：
const street = person?.company?.address?.street;
如果我们要获取数组中的可选属性，例如以下示例代码：
-- -------------------- ---- -------
----- ----- - -
-
----- -----
---- ---
-------- -
----- -----
------ ----
-
--
-
----- -----
---- --
-
--
----- ---- - -------- -- ---------------- -- ----------------------使用 Optional Chaining 运算符，我们只需要这样写：
const city = users[0]?.address?.city;
Optional Chaining 运算符的指导意义
Optional Chaining 运算符的出现简化了我们对可选属性的检查，提高了代码的可读性和编写效率。使用 Optional Chaining 运算符，我们可以更加专注于代码的业务逻辑，而不必时时担心潜在的错误。
当然，我们在使用 Optional Chaining 运算符时，也需要注意一些问题。例如，当我们使用 Optional Chaining 运算符时，如果属性不存在，则返回 undefined。因此，我们需要根据需求来决定如何处理这个返回值。另外，如果我们需要对返回值进行进一步的操作，也需要做好判空处理，以避免出现错误。
示例代码
以下示例代码演示了 Optional Chaining 运算符的使用：
-- -------------------- ---- -------
----- ------ - -
----- -----
---- ---
-------- -
----- ---- ----
-------- -
------- --- --- ---
----- -----
------ -----
----------- --------
-
-
--
----- ----- - -
-
----- -----
---- ---
-------- -
----- -----
------ ----
-
--
-
----- -----
---- --
-
--
----- ------ - ---------------------------------
-------------------- -- --- --- --
----- ---- - ------------------------
------------------ -- ----结论
Optional Chaining 运算符允许我们简洁地处理对象或数组中的可选属性，提高了代码的可读性和编写效率。在编写代码时，我们应该充分考虑使用 Optional Chaining 运算符来优化我们的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671b56e19babaf620faad06b