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