随着越来越多的应用程序向云迁移并变得更加复杂，JavaScript 中的错误调用方法和属性的问题也愈发普遍。ECMAScript 2020 引入了新的可选链式调用操作符，帮助开发人员更轻松地处理可选链式查询中的 null 和 undefined 值。本文将详细介绍这个新的特性，以及如何在你的项目中使用它来提高代码安全和可读性。
可选链式调用操作符的作用
首先，让我们来看一个常见的问题：
----- ---- - -
----- -----
-------- -
----- ----
-
--
------------------------------------- -- ----
------------------------------------ -- ---------- ------ ---- -------- ------------- -- ---------上述代码中，我们尝试在 user.age 上调用 toUpperCase() 方法。由于 user.age 是 undefined，所以这段代码将导致一个 TypeError。
在过去，我们必须手动检查每个嵌套对象的属性是否存在，这很费事且容易出错。通过可选链式调用操作符，我们可以简单地检查属性是否存在并避免这样的错误。
使用可选链式调用操作符
在 ECMAScript 2020 中，我们可以使用问号（?）来创建可选链式调用。以下是一个使用可选链式调用操作符的例子：
----- ---- - -
----- -----
-------- -
----- ----
-
--
--------------------------------------- -- ----
-------------------------------------- -- ---------在这个例子中，我们用 ?. 运算符替代了点运算符 . 。如果从左侧操作数（user 或 user.age）得到的值是 null 或 undefined，那么这个表达式将立即返回 undefined，而不是继续走分析链。
多个可选链式调用
如果要对多个属性进行链式调用怎么办？我们可以通过继续添加 ?. 运算符来实现：
----- ---- - -
----- -----
-------- -
----- ----
-
--
------------------------------------------------ -- ----
-------------------------------------------------- -- ---------如果链中的任何一段为 null 或 undefined，整条链将立即返回 undefined，而不继续处理。
可选链式调用和函数调用
当然，可选链式调用也可以用在函数调用中。我们可以检查函数是否存在并调用它：
----- ---- - -
--------- -
------ -----
-
--
------------------------------ -- ----
----------------------------- -- ---------当函数被调用时，它将在操作数（user.getName 或 user.getAge）为 null 或 undefined 时立即返回 undefined。
可选链式调用的指导意义
通过使用可选链式调用操作符，我们可以避免在嵌套对象上调用未定义或 null 值属性时出现的 TypeError。这可大大减少代码的冗长和错误率。即使您不在乎缩减代码量，可选链式调用仍然可以提高代码的可读性并使代码更加安全。
在使用可选链式调用时，需要注意一些小细节：
- 可选链式调用仅在严格模式下受支持，如果尝试在非严格模式下使用它，代码将引发 SyntaxError。
- 可选链式调用操作符可用于属性访问、函数调用、数组元素索引/长度等等。
- 对于某些早期版本的 JavaScript，您可能需要使用 polyfill 或额外的库来支持可选链式调用操作符。
最后，我们建议使用可选链式调用操作符时，要遵循一些规范：
- 可选链式调用应该能简化你的代码，而不是让它变得更加复杂。
- 当您在设计 API 时，请考虑添加更多的默认值和工具方法，以使可选链式调用变得更加简单。
- 如果您使用其他 JavaScript 库或框架，您可以检查它们是否支持或提供与可选链式调用相似的功能。
结论
可选链式调用操作符是 ECMAScript 2020 新的特性，可大幅减少 null 和 undefined 值的错误调用。正如我们在本文中所示，可选链式调用是一个非常实用的功能，可以使代码变得更加安全、可读性更强。
我们希望我们已经为您展示了可选链式调用的概念和用法，以及在你的项目中如何使用它们。通过遵循最佳实践和官方规范，我们相信可选链式调用将成为您日常开发工作中的一个重要工具。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/67220db72e7021665e0a1ccf