在 JavaScript 中，访问对象的属性时，如果该属性不存在，就会报错。而在实际的开发中，我们经常会遇到需要判断属性是否存在，以避免这类错误的情况。幸好，随着 ECMAScript 的不断更新，新的语法和特性不断推出，使我们的开发变得更加便捷。
在本文中，我们将介绍 ECMAScript 2021 新增加的可选链式调用语法，该语法能够轻松地判断变量是否存在并进行相应的处理。我们还将通过例子来展示可选链式调用语法的使用方式，以帮助读者深入理解其含义。
可选链式调用是什么？
在旧的 JavaScript 版本中，当我们需要访问对象的属性时，通常需要用一大堆 if 语句来判断该属性是否存在。比如：
if (data && data.user && data.user.name) {
console.log(data.user.name);
}这段代码做的事情很简单：如果 data.user.name 存在，则打印该属性的值。但是如果 data 或 data.user 不存在，这个语句就会抛出错误。
为了解决这个问题，ECMAScript 2021 中引入了可选链式调用，可以简化代码并避免报错。
可选链式调用使用 ?. 来代替 . ，它是一种如条件运算符一样的链式调用方式。例如：
if (data?.user?.name) {
console.log(data.user.name);
}当 data 或 data.user 不存在时，.user 和 .name 会被短路，而不会发生错误。如果 data 存在但 data.user 不存在，会直接返回 undefined，而不会继续往后执行。
可选链式调用的优点
使用可选链式调用可以更加轻松地处理可能出现的 undefined 值，避免 JavaScript 报错。这种语法对于处理大型、复杂的对象结构很有帮助，如：
myData?.user?.address?.zipcode;
上述代码能够优雅地判断 myData 对象是否存在，并在属性层级末尾安全地取出 zipcode。
可选链式调用也可以处理数组的索引值。比如：
myArray?.[2];
如果数组 myArray 存在且其索引值 2 也存在，那么这个语句就会返回索引值为 2 的数组元素。如果不存在，这个语句就会直接返回 undefined。
示例代码
下面我们通过示例代码来展示可选链式调用的用法：
// javascriptcn.com 代码示例
const data = {
user: {
name: "Lucas",
address: {
city: "San Francisco",
state: "CA",
},
hobbies: [
"Climbing",
"Coding",
],
},
};
console.log(data?.user?.name); // Lucas
console.log(data?.user?.age); // undefined
console.log(data?.user?.address?.city); // San Francisco
console.log(data?.user?.address?.zipCode); // undefined
console.log(data?.user?.hobbies?.[0]); // Climbing
console.log(data?.user?.hobbies?.[2]); // undefined在上述示例代码中，我们定义了一个 data 对象，然后使用了可选链式调用来判断 data 对象的属性是否存在。通过这些示例，我们可以看到，使用可选链式调用可以轻松处理单位之间的关系，避免程序在执行时出现错误。
总结
本文我们详细讲解了 ECMAScript 2021 (ES12) 的可选链式调用语法，介绍了它的基本用法和优点。通过使用可选链式调用，我们可以轻松地判断变量是否存在，避免JavaScript 报错，提高代码的可读性和健壮性。
希望这篇文章能够帮助读者理解和使用可选链式调用，从而编写出更加健壮和高效的 JavaScript 代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652a3f847d4982a6ebc94239