在前端开发中，访问 JavaScript 对象的深层属性通常需要非常复杂的代码，因为在属性链中的任何一个属性都可能为空或未定义。这种情况容易导致代码崩溃，因此需要开发人员谨慎地对每个属性进行检查和处理。幸运的是，ES11引入了可选链（Optional Chaining）的新特性，可以轻松地解决这个问题。
什么是可选链？
可选链是一种新的语法结构，主要用于访问深层次的 JavaScript 对象属性值。当存在属性为空或者未定义时，可选链会在任何点取得正确的值，而不会引起代码崩溃。
如何使用可选链？
让我们看一个传统的例子：
-- -------------------- ---- -------
----- ------ - -
----- -------
---- ---
-------- -
------- ---- ---- ----
----- ---- ------
-------- -------
-
--
-- -- ------ ---- ------ --
----- ------ - ----------------------
---------------------- -------- ---- --
-- -- ------ ---- ------- --
----- ------- - -----------------------
----------------------- --------------
在上面的代码中，如果 country 属性不存在，它只是简单地返回 undefined 。但问题是，在访问深层次的属性时，我们必须执行各种检查以避免代码崩溃。
有了ES11的可选链，我们可以更容易地访问深层次的属性，而无需执行任何检查和处理。 在使用可选链时，只需要在属性名后面加上问号 ? 即可。
// 借助可选链获取 person 对象中的 country 属性 const country = person.address?.country; console.log(country);// 输出结果：undefined
使用可选链，我们不需要确认权威地确保输出的结果不为空，如果层级中的任意一个值为空，该操作将安全地停止。
使用可选链深入了解对象
可选链不仅可以帮助我们避免在访问未定义的属性时出现错误，还能帮助我们深入了解对象。 在传统的代码中，我们必须使用多个检查来处理可能存在的嵌套属性。 在使用可选链时，将不再需要这样做。
让我们看看如何在不使用可选链的情况下访问对象：
-- -------------------- ---- -------
----- ------ - -
----- -------
---- ---
-------- -
------- ---- ---- ----
----- ---- ------
-------- --------
------------ -
--------- --------
---------- -------
-
-
--
-- -- ------ -------
----- --------- - -------------- -- -------------------------- -- -------------------------------------
------------------------- ------------在传统的代码中，我们必须使用多个检查，才能获取嵌套对象中的属性值。 在使用可选链时，代码会更加简洁和易于理解。
// 借助可选链获取 person 对象中的经度值 const longitude = person.address?.coordinates?.longitude; console.log(longitude);// 输出结果：-74.006
何时使用可选链？
在许多情况下，访问深层次嵌套的属性是非常必要的。 当我们使用对象和阵列时，特别是在使用从远程电脑中加载的数据时，会经常出现这种情况。 在这些情况下，使用可选链使代码更清晰和更易于理解。
但是，我们也需注意，在一些情况下，不需要使用可选链。 当属性存在或当属性未定义时执行相同的代码时，可选链可能会增加不必要的复杂性。 包括一些较小的嵌套对象的代码也可以不使用可选链接。
总结
可选链是一个非常有用的新特性，可以将我们从繁琐的属性检查中解脱出来，使代码更清晰，更易于理解。 它节省了我们用于在深层次链条上搜索属性的时间。 可选链不仅可以加强代码的健壮性，还可以使代码更加简洁。希望本文对您在使用可选链提供了一些参考和启发。
示例代码
代码可在浏览器窗口上运行:
-- -------------------- ---- -------
----- ------ - -
----- -------
---- ---
-------- -
------- ---- ---- ----
----- ---- ------
-------- -------
-
--
-- ------- ------ ---- ------- --
----- ------- - ------------------------
----------------------- --------------
----- ---------- - -
----- -------
---- ---
-------- -
------- ---- ---- ----
----- ---- ------
-------- --------
------------ -
--------- --------
---------- -------
-
-
--
-- -- ------ -------
----- --------- - ------------------ -- ------------------------------ -- -----------------------------------------
------------------------- ------------
-- ------- ------ -------
----- ----------------- - -------------------------------------------
--------------------------------- ------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e3121df6b2d6eab3e6a69c