在 Web 开发的过程中，我们经常需要处理对象的属性或方法，但是对象结构有时候很复杂，可能会导致找不到属性或方法，进而抛出错误。为了解决这个问题，ECMAScript 2021 新增了一个可选链操作符，可以更加方便地处理对象属性或方法的访问问题，本文将详细介绍可选链操作符的使用方法和实际应用场景。
可选链操作符的使用方法
可选链操作符 ?. 是 ECMAScript 2021 的新增功能，它可以在属性或方法访问操作中添加一个问号，表示如果被访问的对象不存在，则返回 undefined 而不是抛出错误。
例如，我们可以使用可选链操作符来安全地访问对象内部的嵌套属性或方法：
-- -------------------- ---- -------
----- ---- - -
----- -----
-------- -
---- ---
-------- ------ ----- -----
-
--
-- ----
----- --- - ------------ - ---------------- - ----------
-- --------
----- --- - ------------------在上面的示例中，我们使用可选链操作符 ?. 来安全地访问 user.profile.age，即使 user.profile 不存在，也不会抛出错误，而是返回 undefined 值。
除了访问属性之外，可选链操作符也可以用于访问对象的方法：
-- -------------------- ---- -------
----- ---- - -
----- -----
-------- -
------ -------- -- -
--------------------
-
-
--
-- ----
-- -------------- -
---------------------
-
-- --------
------------------------在上面的示例中，我们使用可选链操作符 ?. 来安全地调用 user.profile.greet() 方法，避免了在 user.profile 不存在的情况下引发错误。
可选链操作符的应用场景
可选链操作符能够很好地增强代码的健壮性，尤其是处理复杂的对象结构时，其应用场景非常广泛。
处理 JSON 数据
当我们从网络或服务器接收到 JSON 数据时，有时候会存在特定属性不存在的情况。使用可选链操作符就能够很好地处理这种情况。例如，我们可以使用可选链操作符来处理从服务器接收到的用户数据：
-- -------------------- ---- -------
----- -------- - -
----- -----
---- ---
-------- -
------ ----------------------
-
--
----- -------- - --------------------------------在上面的示例中，我们使用可选链操作符 ?. 来安全地访问 userData.profile.address.city 属性。即使在 userData.profile.address 或 userData.profile 不存在时，整个表达式也不会引发错误，而是返回 undefined 值。
处理 DOM 元素
在 Web 开发中，我们用 JavaScript 操作 DOM 元素非常常见。然而，有时候需要处理的 DOM 元素不存在，这就需要使用可选链操作符来处理这种异常情况：
const el = document.querySelector('#my-elem');
const width = el?.getBoundingClientRect()?.width || 0;在上面的示例中，我们使用可选链操作符 ?. 来安全地访问 el.getBoundingClientRect().width 属性。如果 el 不存在或者没有 getBoundingClientRect() 方法时，可选链操作符就会返回 undefined 值，而不会抛出错误。如果 width 为 undefined，我们使用 || 运算符将其转换为默认值 0 值。
总结
可选链操作符是 ECMAScript 2021 新增的一个非常实用的功能，能够处理对象中嵌套属性或方法访问的异常情况，有效提高了代码的健壮性。在处理复杂的对象结构时和从服务器接收 JSON 数据时，可选链操作符尤其有用。关注 ECMAScript 最新版本的更新，能够帮助我们更好地进行 Web 开发，并提升我们的工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64702a15968c7c53b0e4d37f