JavaScript 是前端开发中广泛使用的编程语言，具有很多强大的特性，比如对象和数组形式的数据结构。然而，在处理深层嵌套的结构时，代码会变得很复杂，而「可选链」就是一种优雅解决方案。这篇文章将介绍可选链是什么，如何在 ES11 中使用它，并提供实际示例。
可选链简介
JavaScript 常常涉及深嵌套的对象或数组。当尝试访问不存在或 undefined 的属性时，就会抛出错误。以以下为例：
----- ------ - -
----- ---- --------
-------- -
------- ---- ---- -----
----- ---- ---- ------
-------- -------
-
-
----- ------------- - ----------------------- -- -------
----- ----------- - --------------------- -- ---------- ------ ---- -------- ------- -- ---------这段代码中，schoolState 访问了一个不存在的属性，因此抛出错误。
可选链是一种在引用 JavaScript 对象或数组属性时安全地执行 null 或 undefined 检查的方法。在上面的示例中，可选链可以这样使用：
----- ------------ - ----------------------
这里的问号表示了可选链文法，如果属性存在，值就会被赋给变量 schoolState2。如果 address 不存在，则不会发生错误。
在早期版本的 JavaScript 中，必须使用繁琐的 if 语句来检查是否存在该属性才能避免错误，而在不断更新的 ES6、ES7、ES8 和 ES9 中也有不同的方法解决这个问题。
在 ES11 中使用可选链
可选链是 ES11（即 ECMAScript 2020）的新功能之一，需要使用最新的 JavaScript 引擎和适当的设置才能使用。
可选链基础语法
使用可选链时，可以在对象或数组的属性上加上问号，表明该属性是可选的。例如：
-- ---------- ----------- -- ----- ----------------- - --------------------
如果 school 对象存在一个非空的 description 属性，则该值将被赋给 schoolDescription，否则该值将为 undefined，不会抛出错误。
链接多个属性
在以前，获取嵌套对象属性的典型方法是使用多个点符号来链式操作它们。使用可选链时，它们可以简化为：
----- ----------- - ----------------------
这里 school 对象上的 address 属性是一个对象，其中 state 是该对象的属性之一。如果 address 和 state 都存在，则值将被分配给 schoolState。
链接方法调用
可选链还可以使用于方法调用。对于以下示例：
----- ---------- - -----------------
如果 school 对象没有 getName() 方法，则会抛出错误。但是，如果使用可选链的话：
----- ----------- - -------------------
当 getName() 存在时，该值将被分配给 schoolName2，否则该值将为 undefined。
在链式调用中，每个方法都应使用可选链文法来检查其前一个方法返回的值是否存在。例如：
----- ---- - -
--- ---------------
------------ -
------ -------------------
------ --------------
--
---------------- -
------ -----------------
-
--
----- ----- - -----------------------------如果 getAccountInfo() 方法返回未定义或 null，则 email 的值将为 undefined，但是不会抛出错误。
可选链的注意事项
尽管可选链对简化代码可以说是一大福音，但是它不是万能的。在使用时，必须注意以下几个问题：
- 可选链仅能在对象和数组属性上使用，无法应用于函数调用。
- 获取不存在的属性时，返回的值将是
undefined，而不是 null。 - 如果访问受限制，例如获取 XML 源或跨源内容，那么同源策略将阻止可选链。
示例代码
下面是一些具体示例代码，可以帮助深入了解可选链的使用。
----- ------ - -
----- ---- --------
-------- -
------- ---- ---- -----
----- ---- ---- ------
-------- -------
-
--
-- ----------
----- ----------------- - --------------------
-- ------------
----- ----------- - ----------------------
----- ---- - -
--- ---------------
------------ -
------ -------------------
------ --------------
--
---------------- -
------ -----------------
-
--
-- ----------------
----- ----- - -----------------------------
-- ----------
----- ------------- - ------------------------结论
使用可选链可以避免深度嵌套的属性查询时产生的各种错误。它为 JavaScript 提供了一种更加简单、更加明确的方式来检查属性存在与否，让代码更加容易维护。相比之下，可选链比 之前使用的 if 语句和三元运算判断方法简单、清晰得多。在需要处理复杂数据结构时，使用可选链框架可以使代码更具可读性，并使开发人员更加敏捷。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67398a28f24bea3e38aced4d