在开发过程中，我们经常会遇到需要处理多层嵌套的数据结构的情况。在传统的 JavaScript 中，当我们需要读取一个嵌套的属性时，我们需要多次判断该属性是否存在，才能避免出现 Cannot read property 'xxx' of undefined 类似的报错。这样的操作既繁琐又容易出错。为了解决这个问题，ES11 推出了可选链（Optional chaining）这个新特性，让我们能够更加优雅地处理多层嵌套的属性。
什么是可选链
可选链是一种新的语法标准，它可以让 JavaScript 开发者更加快捷、高效地访问深层嵌套的属性，而无需手动判断每一层是否存在。例如下面这样的代码：
-- -------------------- ---- -------
----- ---- - -
----- -----
-------- -
----- -----
------- ------
-------- --------
-
-
------------------------------ -- --
---------------------------------------------- -- ---------- ------ ---- -------- ------------- -- ---------在上面的代码中，我们尝试获取 user.address.country 中的值，由于该属性不存在，导致代码抛出了异常。传统的解决方案是判断每一层属性是否存在，但这样的代码显得繁琐且难以维护。在可选链的支持下，我们可以通过下面的代码简单地避免这个问题：
console.log(user.address?.country?.toLowerCase()) // undefined
在这段代码中，我们使用 ?. 符号来代替传统的 . 符号进行属性访问。如果存在 user.address.country，则返回相应的值，否则直接返回 undefined，而不会抛出异常。
如何正确实现可选链
虽然可选链提供了更加优雅的代码实现方式，但是我们仍然需要注意一些规则以确保代码的正确性。
如何正确使用可选链
- 不要在
new的操作对象上使用可选链。
当我们使用 new 操作符创建一个对象时，该对象可能还没有被创建完成，因此使用可选链可能无法准确获取对象属性，从而导致代码异常。
示例代码：
-- -------------------- ---- -------
----- ---- -
----------------- -------- -
--------- - -----
------------ - --------
-
-
----- ---- - --- ---------- -
----- -----
------- ------
-------- --------
---
----------------------------------- -- ---------- 避免在函数调用时使用可选链。
可选链可能会影响函数的行为，并且在某些情况下可能导致代码异常。因此，在函数调用时，我们应该直接使用函数调用语法，而不是使用可选链访问函数的属性。
-- -------------------- ---- ------- -------- -------------------- - ----- ----- - ------------- ------ ----- -- -------- - ----- ------ - - ------ --- -- ---------------------------------- -- --- ----- ------ - --- ---------------------------------- -- -----
在上面的代码中，我们使用了可选链访问了一个对象的属性，但在实际应用中，我们更加推荐使用函数调用语法来避免代码的异常和错误。
可选链对代码的性能影响
可选链虽然提供了便捷和高效的属性访问方式，但是它也可能会对代码的性能造成一些影响。特别是当我们需要进行大量可选链访问时，这种影响就更加明显了。
为了避免出现性能问题，我们需要注意以下几点：
- 避免重复使用可选链。
重复使用可选链会导致代码运行多次相似的操作，从而造成代码性能的浪费。因此，我们应该尽可能地避免重复使用可选链。
- 使用可选链调用函数时，将函数调用放在可选链接后面。
在 JavaScript 中，函数调用可能会改变对象的状态，因此我们应该将函数调用放在可选链的末尾。这样能够确保函数调用在正常对象访问之后进行，避免对代码的异常和错误。
示例代码
下面是一段使用可选链读取和操作嵌套对象的示例代码：
-- -------------------- ---- -------
----- ---- - -
----- -----
---- ---
-------- -
----- -----
------- ------
-------- --------
--
------- -
- --- -- ----- ------ ------ --- --
- --- -- ----- ------ ------ --- -
-
--
-- ------
----- ---------- - ------------------------ -- --------
------------------------
-- ------
------------ - ------------ -- ---
----------------- - ----------------- -- -------
--------------------------在上面的代码中，我们使用可选链获取了嵌套的订单价格，并使用了空值合并运算符 (??) 为 orderPrice 提供默认值。另外，我们还使用了可选链更新了用户对象的地址信息，并将城市信息设置为默认值 '未知城市'。
总结
在本文中，我们详细介绍了可选链这个新特性。通过可选链，我们能够更加优雅地访问深层嵌套的属性，避免了传统方法中的繁琐判断。但是，为了确保代码的正确性和性能，我们需要注意一些规则，并灵活运用可选链的语法特性。相信了解这个新特性后，能够让我们的代码变得更简洁、高效且易读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6518c7a495b1f8cacd1104b7