在前端开发中，我们经常需要处理嵌套的对象或数组，但是有时候这些对象或数组中某个属性或元素可能不存在，这时候访问它们会导致 undefined 错误。为了避免这种情况，ECMAScript 2020 引入了可选链操作符，本文将介绍如何在 ECMAScript 2020 中使用可选链操作符避免 undefined 错误。
可选链操作符的基本用法
可选链操作符（Optional Chaining Operator）是一种新的语法，它可以在访问对象的属性或数组的元素时，判断它们是否存在，如果存在则返回对应的值，否则返回 undefined。可选链操作符的语法如下：
object?.property array?.[index]
其中，object 表示要访问的对象，property 表示要访问的属性，array 表示要访问的数组，index 表示要访问的元素的索引。问号 ? 表示如果 object 或 array 不存在，则直接返回 undefined，不会抛出错误。
下面是一个示例代码：
// javascriptcn.com 代码示例
const user = {
name: 'John',
address: {
city: 'New York',
country: 'USA'
}
};
console.log(user.address?.city); // 输出 New York
console.log(user.address?.zipCode); // 输出 undefined
console.log(user.phone?.number); // 输出 undefined在上面的示例中，我们使用了可选链操作符访问了 user 对象的 address 属性和 phone 属性。user.address?.city 返回了 New York，因为 user.address 存在且有 city 属性；user.address?.zipCode 返回了 undefined，因为 user.address 存在但没有 zipCode 属性；user.phone?.number 也返回了 undefined，因为 user.phone 不存在。
可选链操作符的高级用法
除了基本用法之外，可选链操作符还有一些高级用法，可以更加灵活地处理对象和数组。
函数调用
在 JavaScript 中，函数也是对象，因此可选链操作符也可以用于函数调用。如果一个对象有某个方法，我们可以使用可选链操作符调用这个方法，如果这个对象不存在，则直接返回 undefined，不会抛出错误。
下面是一个示例代码：
// javascriptcn.com 代码示例
const user = {
name: 'John',
getAddress() {
return this.address;
}
};
console.log(user.getAddress?.()); // 输出 undefined
const user2 = {
name: 'Mary',
address: {
city: 'Paris',
country: 'France',
getFullAddress() {
return `${this.city}, ${this.country}`;
}
}
};
console.log(user2.address?.getFullAddress?.()); // 输出 Paris, France
console.log(user2.phone?.getPhoneNumber?.()); // 输出 undefined在上面的示例中，我们使用了可选链操作符调用了两个对象的方法。对于 user 对象，因为它没有 address 属性，因此调用 getAddress 方法会返回 undefined；对于 user2 对象，因为它有 address 属性，且这个属性有 getFullAddress 方法，因此调用 getFullAddress 方法会返回 Paris, France。
数组长度
在 JavaScript 中，数组也是对象，因此可选链操作符也可以用于获取数组的长度。如果一个数组存在，则返回它的长度，否则返回 undefined。
下面是一个示例代码：
const array1 = [1, 2, 3]; const array2 = []; console.log(array1?.length); // 输出 3 console.log(array2?.length); // 输出 0 console.log(array3?.length); // 输出 undefined
在上面的示例中，我们使用了可选链操作符获取了两个数组的长度。对于 array1 和 array2，它们都存在，因此返回了它们的长度；对于 array3，它不存在，因此返回了 undefined。
总结
在 ECMAScript 2020 中，可选链操作符是一种非常有用的语法，可以帮助我们避免 undefined 错误，更加安全地访问对象和数组。除了基本用法之外，可选链操作符还有一些高级用法，可以更加灵活地处理对象和数组。在实际开发中，我们应该根据具体情况选择使用可选链操作符还是传统的判断语句，以保证代码的可读性和性能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65607fa6d2f5e1655dab2a06