随着 JavaScript 语言的发展，我们想要处理的数据结构也越来越复杂。在开发过程中，有时候我们需要连续地访问对象的属性或数组的元素，而这些属性或元素有可能不存在。在这种情况下，传统的访问方式可能会引发错误，甚至可能导致程序崩溃。而 ECMAScript 2020 新增的可选链式调用特性，可以有效地避免这个问题，并使代码更加简洁、易读和安全。
可选链式调用的语法
可选链式调用的语法非常简单，就是在要访问的属性或函数名后面加上一个问号 ?。比如：
----------------
如果 object 存在 property 属性，则会返回该属性的值；否则，返回 undefined。同时，在调用函数时也可使用可选链式调用：
----------------
如果 object 存在 method 方法，则执行该方法并返回结果；否则，返回 undefined。
同时，在访问嵌套属性或方法时，也可以使用多个问号。比如：
--------------------------
如果 object 存在 property 属性，且该属性存在 method 方法，则执行该方法并返回结果；否则返回 undefined。
可选链式调用的使用技巧
1. 避免在访问嵌套属性时引发错误
在访问嵌套的对象属性时，我们常常需要使用多个点号，例如：
----- ------ - ------------------------------------------------------
如果在这个过程中，其中任一层的属性都不存在，就会引发 TypeError: Cannot read property '...' of undefined（或 null）错误。现在，我们可以使用可选链式调用将其改写为：
----- ------ - -----------------------------------------------------------
这样，即使其中某个属性不存在，也不会引发错误，而是返回 undefined。
2. 避免在调用嵌套函数时引发错误
在调用嵌套的函数时，我们也常常需要使用多个括号，例如：
----- ------ - ------------------------------------------------------
如果在这个过程中，其中任一层的方法返回了 undefined，就会引发 TypeError: Cannot read property '...' of undefined（或 null）错误。现在，我们可以使用可选链式调用将其改写为：
----- ------ - -----------------------------------------------------------
这样，即使其中某个方法返回了 undefined，也不会引发错误，而是返回 undefined。
3. 检查远程 API 返回的复杂数据结构
在与远程 API 进行交互时，有时候返回的数据结构十分复杂，并且可能缺失某些属性。在这种情况下，使用可选链式调用可以更好地处理这些数据。例如：
----- ---- - ----- ------------------------------------------ -- ------------ ----- ----- - --------------------------
在这个例子中，我们使用可选链式调用来访问嵌套的属性和数组元素。即使其中某个层级不存在，也不会引发错误，而是返回 undefined。
总结
可选链式调用是 ECMAScript 2020 语言新增的一个特性，它为 JavaScript 开发者提供了一种简洁、易读且安全的方式来处理复杂的数据结构。在可选链式调用的基础上，我们可以通过链式调用、条件运算符等方式进一步优化代码，从而实现更高效的编程。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64965b9748841e989436da00