ECMAScript 2021（也被称为 ES12）是 JavaScript 编程语言的最新版本，它包含了许多改进和新功能。其中一个非常值得注意的新功能是可选链式调用操作符。
可选链式调用操作符是一种用于完善代码鲁棒性（代码健壮性）的语法糖。在现代 JavaScript 中，经常会出现访问对象属性或方法时发生的错误，如 "Cannot read property xxx of undefined" 或 "Cannot read property xxx of null"。这类错误很容易出现在嵌套的属性和方法调用中，此时使用可选链式调用操作符能够避免这种错误。
可选链式调用操作符的用法
可选链式调用操作符使用问号("?")表示，它的作用是当属性或者方法不存在的时候，不会抛出 TypeError 错误。下面是一些使用可选链式调用操作符的示例：
----- ---- - -
----- --------
-------- -
----- ----------
-------- -------
--
--
-- - ---- ---------- ---------
------------------------ -- -- -------
----------------------- -- -- ---------
-- - ------------ ---------- ---------
--------------------------------- -- -- ---------
----------------------------------------- -- -- ---------在上面的示例中，当 user 对象的属性或方法不存在时，可选链式调用操作符会返回 undefined，而不会抛出 TypeError 错误。这样就大大避免了在代码中出现一些常见的错误。
可选链式调用操作符的深度嵌套
可选链式调用操作符还允许深度嵌套的属性或方法调用。下面是一个例子：
----- ---- - -
----- --------
-------- -
----- ----------
-------- -------
------------ -
---- -----
---- ------
--
--
--
-- - ------------------------ ---------- ---------
--------------------------------------------- -- -- ----
--------------------------------------------- -- -- -----
-------------------------------------------------- -- -- ---------在上面的示例中，我们使用了可选链式调用操作符来访问多层嵌套的属性。即使某些属性不存在，我们也可以通过问号来避免任何错误。
使用可选链式调用操作符的好处
使用可选链式调用操作符可以避免因 undefined 或 null 导致的运行时错误。它非常适合在访问复杂 JSON 结构或者来自第三方 API 的数据时使用。
旧版的 JavaScript 中，经常会使用短路运算符来判断属性是否存在，例如：
----- ---- - - ----- -------- -- -- -- ------------ ------ -- ------------- -- ------------------ - ------------------------------- -
然而，随着属性和方法层数的增加，这种方法的可读性和可维护性将变得越来越差。使用可选链式调用操作符能够让代码更加简洁和易读。
可选链式调用操作符的兼容性
可选链式调用操作符是 ES2020 标准中引入的，目前主流的浏览器均已支持。同时，它也可以轻松地通过 Babel 转换为老版本的 JavaScript 代码以保证兼容性。
总结
可选链式调用操作符是一个非常实用的 ECMAScript 特性。它可以避免深度嵌套的属性或方法调用的 TypeError 错误，让代码更加鲁棒性和可读性。我们可以在访问对象属性或方法时使用可选链式调用操作符，并适当地使用条件语句来处理返回值。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/664b083dd3423812e49f4c28