ECMAScript 2020 中引入了可选链操作符（Optional Chaining Operator），这是一个非常实用的新特性，能够让我们更加方便地处理 JavaScript 对象及其属性。在本文中，我们将介绍可选链操作符的使用小技巧，并附上详细的示例代码，帮助读者更好地理解和应用这个功能。
可选链操作符的作用
在 JavaScript 中，我们经常需要访问一个对象的属性，例如：
// javascriptcn.com 代码示例
const person = {
name: 'Tom',
age: 18,
address: {
city: 'Shanghai',
street: 'Nanjing Road'
}
};
const street = person.address.street;在上面的代码中，我们通过 . 操作符访问了 person 对象的 address 属性，并通过 . 操作符再次访问了 address 对象的 street 属性。这种访问方式非常方便，但可能会出现问题。例如，如果 person 对象没有 address 属性，或者 address 对象没有 street 属性，我们就会得到一个 TypeError 错误。
为了避免这种错误，我们可以使用可选链操作符 ?。它的作用是在访问对象的属性时，如果该属性不存在，就返回 undefined，而不是抛出错误。例如：
const street = person?.address?.street;
在上面的代码中，我们使用了可选链操作符 ?，它在访问 person.address 和 address.street 时，如果这两个属性不存在，就会返回 undefined，而不会出现错误。
可选链操作符的使用小技巧
1. 访问数组元素
可选链操作符不仅可以访问对象的属性，还可以访问数组的元素。例如：
const arr = [
{ name: 'Tom', age: 18 },
{ name: 'Jerry', age: 20 },
{ name: 'Mike', age: 22 }
];
const age = arr[1]?.age;在上面的代码中，我们使用可选链操作符 ? 访问了数组 arr 的第二个元素的 age 属性。如果数组 arr 的长度小于等于 1，或者第二个元素没有 age 属性，就会返回 undefined。
2. 调用函数
可选链操作符不仅可以访问对象的属性和数组的元素，还可以调用函数。例如：
const obj = {
sayHello() {
console.log('Hello');
}
};
obj?.sayHello?.();在上面的代码中，我们使用可选链操作符 ? 调用了对象 obj 的 sayHello 函数。如果对象 obj 没有 sayHello 函数，就会返回 undefined，而不会出现错误。
3. 处理复杂的数据结构
可选链操作符非常适合处理复杂的数据结构，例如嵌套的对象和数组。例如：
// javascriptcn.com 代码示例
const data = {
users: [
{ name: 'Tom', age: 18 },
{ name: 'Jerry', age: 20 },
{ name: 'Mike', age: 22 }
]
};
const age = data?.users?.[1]?.age;在上面的代码中，我们使用可选链操作符 ? 访问了复杂的数据结构 data 中的 users 数组的第二个元素的 age 属性。如果 data 对象、users 数组或者第二个元素不存在，就会返回 undefined。
总结
可选链操作符是 ECMAScript 2020 中非常实用的新特性，能够让我们更加方便地处理 JavaScript 对象及其属性。在本文中，我们介绍了可选链操作符的作用和使用小技巧，并附上了详细的示例代码。希望本文能够帮助读者更好地理解和应用这个功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656eebcbd2f5e1655d73bf4f