在前端开发中，经常会出现需要操作复杂的嵌套对象或数组的情况。以前我们通常使用 && 和 || 运算符来检查嵌套属性是否存在，或者通过使用深层级循环来访问嵌套数组。这种方式不仅繁琐，而且容易出错。幸运的是，ECMAScript 2021 中引入了可选链式调用运算符（Optional Chaining Operator），解决了这个问题。
可选链式调用运算符简介
如果您曾经访问一个嵌套对象或数组中的属性时，只知道它们的一些非常明确的内容，但不知道它们是否实际存在，那么您可能会遇到这种情况。例如，我们要访问以下嵌套对象：
const user = {
name: '小明',
blogs: [
{ title: 'JavaScript 基础', date: '2021-01-01' },
{ title: 'React 入门', date: '2021-01-02' },
],
};我们想要访问 user 对象内的 blogs 数组中的第一个博客的 title 属性：
const title = user.blogs[0].title;
但是如果 user 对象没有 blogs 数组，或者 blogs 数组为空，那么上面这行代码就会抛出错误：
TypeError: Cannot read property '0' of undefined
这时候，我们可以使用可选链式调用运算符来避免这个问题：
const title = user?.blogs?.[0]?.title;
这里我们使用了可选链式调用运算符（问号加圆点），它会在我们要调用的属性不存在时返回 undefined 而不是抛出错误。在这个例子中，user 对象有 blogs 数组，但是可能为空，所以我们在这里使用了两个可选链式调用运算符来避免访问空数组或者数组中不存在的属性。
示例代码
下面是一个更详细的示例代码，展示如何使用可选链式调用运算符来避免错误和简化代码：
// javascriptcn.com 代码示例
// 定义一个嵌套对象
const user = {
name: '小明',
address: {
city: '上海',
street: '华山路',
postcode: '200000',
},
blogs: [
{ title: 'JavaScript 基础', date: '2021-01-01' },
{ title: 'React 入门', date: '2021-01-02' },
],
};
// 使用可选链式调用运算符来访问嵌套属性
const city = user?.address?.city;
const postcode = user?.address?.postcode;
// 处理空属性的情况
const bio = `${user.name} from ${user.address?.city || 'somewhere'} has ${
user.blogs?.length || 0
} blogs.`;
console.log(bio);
// 循环访问嵌套数组
user.blogs?.forEach((blog) => {
console.log(blog.title);
});在这个例子中，我们使用了可选链式调用运算符，确保了访问嵌套属性和数组成员时不会出现错误。同时，我们还演示了如何使用可选链式调用运算符来处理空属性的情况，以及如何循环访问嵌套数组。
总结
可选链式调用运算符是 ECMAScript 2021 引入的一个很有用的新特性，它可以大大简化那些涉及嵌套属性和数组的代码。在编写前端应用程序时，您可能会经常使用它来访问嵌套属性或数组中的成员，并在属性为空或不存在时避免出现意外错误。掌握可选链式调用运算符将有助于提高代码的可读性、可维护性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652dfa5c7d4982a6ebf108f6