ES10 是 ECMAScript 标准的第十版本，于 2019 年发布。其中，可选链操作符 '?.' 是 ES10 新增的一项特性，因其便捷性和代码可读性受到广泛喜爱。在本篇文章中，我们将详细讲解可选链操作符的使用方法、用途以及注意事项，并提供实用示例。
什么是可选链操作符 '?.'
在介绍具体用法之前，先来回顾一下可选链操作符的定义。可选链操作符可以让开发者在查询对象的属性时，避免因前面的属性不存在而导致的程序异常和崩溃。它的语法非常简单，只需要在对象属性调用的末尾加上 '?.' 即可。
----- ------ - ----------------------------------------
上述代码的含义是：首先查找 object 对象的 property 属性，若 property 属性为 null 或 undefined，则返回 undefined；若 property 属性存在，再查找 subProperty 属性，若 subProperty 属性为 null 或 undefined，则返回 undefined；若 subProperty 属性存在，则调用 method 方法返回其结果。
需要注意的是，当 object 和 property 同时存在，但 property 存在但未定义时，可选链操作符('?')的效果就“发挥了威力”。举个例子：
--- ---- - - - ----- -------- ---- - -- - ----- ---- ------ ---- - -- - ----- ----------- ---- - - -- ------------ -- -------------------- --------- ----------- ---------- ----------
在这个例子中，我们尝试获取每个 cat 数据对象中的 favorite 属性，但实际上仅有第一个 cat 对象中存在该属性。利用可选链操作符'?.'，我们可以避免由于查询到不存在的属性，而导致该线程终止，让整个逻辑更为健壮稳定。
可选链操作符的用途
在实际开发中，可选链操作符有以下几个用途。
链式属性的安全访问
利用可选链操作符，我们可以在查询对象属性时，避免因前面属性缺省而导致的错误。举个例子：
----- -------- - -
--------- -
-------- --
---------- -----
--
--
--- --------------
-- -
-------- --
----------------- --
------------------------- --- ---- --
------------------------- --- ---------
- -
------------- - --------------------------
-
--------------------------- -- -- -使用可选链操作符可以更简便地在对象中检查属性是否存在，同时跳过任何结果为 undefined 的子属性：
----- ------------- - ---------------------------------- ---------------------------
机动调用方法
使用可选链调用方法时，若该方法不存在，可直接返回 undefined，避免空指针异常或其他异常的发生。举个例子：
假设我们需要判断输入的参数是否为数字，可以使用以下方法：
-------- ------------------ -
-- ------- ----- --- --------- -
------ -----------------
-
-
---------------------------- -- -- -
------------------------------ -- -- ---------使用可选链操作符后，代码更加简洁明了：
-------- ------------------ - ------ ------------- -- ------------------------ - ---------------------------- -- -- - ------------------------------ -- -- ---------
遍历嵌套对象和数组
可以使用可选链和 nullish 合并操作符（??）来处理复杂嵌套数据。举个例子：
假设我们有一个来自网络的嵌套对象，但有些属性可能不存在。这时，我们可以使用可选链和 nullish 合并操作符进行处理：
----- -------- - -
-------- -
------ -----------
----- -
-
----- -----
--
-
----- ----
--
-
----- -----
-
--
-
--
---------------------------------------------- -- -----------以上代码中的 ? 用来检查 response、content、body 和第二个子元素 (在 body[1] 中) 是否存在，若存在则返回 text 属性值，否则返回 nullish 合并操作符 ?? 的默认值。
可选链操作符的注意点
虽然可选链操作符非常便捷，但在实际使用过程中，仍需注意以下事项。
可选链操作符仅在 JavaScript 的最新版本中可用
在早期版本的浏览器中及一些不支持最新 ECMAScript 标准的环境中（比如 Node.js 12x 及更早的版本），可选链操作符不可用。此时，需要使用其他方法来避免 undefined 异常。
可选链操作符对性能的影响
使用可选链操作符可能会导致一定程度的性能损失，因为每次调用可选链操作符，都需要进行额外的检查。所以，仅在必要时才使用可选链。
不要在属性名称中使用问号字符
虽然你可以在对象属性名中使用字符集 [?. ]，但不应将问号字符直接使用在属性名称的中间。这可能会导致解析器的混淆。
结论
作为 ES10 新增的特性，可选链操作符为我们解决了在 JavaScript 中操作对象属性和方法时的一些常见问题。使用可选链操作符可以提高代码的可读性和可维护性，弥补了访问嵌套属性和方法时潜在的异常风险。
在实际开发过程中，我们应当根据特定的应用场景进行选择，同时注意可选链操作符存在的潜在限制和性能影响。在涉及嵌套对象和数组时，可选链操作符可以帮助我们更轻松地访问数据。
参考文献
- ECMAScript 2022（ES10）：https://tc39.es/ecma262/
- JavaScript中的可选链操作符：https://www.javascripttutorial.net/es-next/javascript-optional-chaining-operator/
- 可选链操作符：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6737030b317fbffedf076b72