在前端开发中，我们经常需要从对象或数组中获取特定的值或方法。但是如果这些对象或数组中存在 null 或 undefined 的值，那么在获取这些值时就容易出现错误，导致代码无法正常执行。ES2020 中引入了新的特性，即可选链操作符（Optional Chaining），可以方便地解决这个问题。
可选链操作符的作用
可选链操作符（?.）是一个新的操作符，用于安全地访问深度嵌套的对象属性或数组元素，可以避免出现 TypeError 错误。如果对象或数组中存在 null 或 undefined 的值，可选链操作符会直接返回 undefined。
举个例子，假设我们有一个对象 person，里面存储了人的基本信息，其中可能有些属性不存在：
const person = {
name: 'Jack',
age: 30,
contact: {
email: 'jack@example.com',
phone: '1234567890'
}
}我们需要获取 person 对象中的 email 属性：
const email = person.contact.email;
如果 contact 属性不存在，上面的代码会报错。为了避免这种错误，我们可以使用可选链操作符：
const email = person.contact?.email;
这样，如果 contact 属性不存在，email 变量会得到 undefined 值，而不是报错。
可选链操作符的语法
可选链操作符可以用于对象的属性访问和数组的元素访问，语法如下：
- 对象属性访问：
obj?.prop或obj?.[expr]obj：必需，要访问的对象，可以是表达式。prop或expr：可选，要访问的属性名或表达式，可以是字符串或其他表达式。
- 数组元素访问：
arr?.[index]arr：必需，要访问的数组，可以是表达式。index：必需，要访问的元素下标，可以是表达式。
可选链操作符的使用
对象属性访问
假设我们有一个对象 book，里面存储了书籍的基本信息，但是并不是所有书籍都有作者信息，有些书籍没有作者属性。我们需要获取 book 对象中的作者名字：
const authorName = book.author.name;
如果 author 属性不存在，上面的代码就会报错。为了避免这种错误，我们可以使用可选链操作符：
const authorName = book.author?.name;
这样，如果 author 属性不存在，authorName 变量会得到 undefined 值，而不是报错。
可选链操作符也可以用于多级属性的访问：
const authorEmail = book.author?.contact?.email;
这样，如果 author 属性不存在，authorEmail 变量会得到 undefined 值；如果 contact 属性不存在，authorEmail 变量也会得到 undefined 值。
可选链操作符可以和其他语法一起使用，比如模板字符串：
const message = `Book ${book.title} ${book.author?.name ? `by ${book.author.name}` : ''}`;数组元素访问
假设我们有一个数组 numbers，其中存储了一些数字。我们需要获取数组中第二个元素的值：
const secondNumber = numbers[1];
如果 numbers 数组长度小于 2，上面的代码就会报错。为了避免这种错误，我们可以使用可选链操作符：
const secondNumber = numbers?.[1];
这样，如果 numbers 数组长度小于 2，secondNumber 变量会得到 undefined 值，而不是报错。
可选链操作符也可以用于多级数组的访问：
const value = data?.[x]?.[y]?.[z];
这样，如果 data 数组不存在或长度小于 x，或第 x 个元素不存在或不是数组，或第 y 个元素不存在或不是数组，或第 z 个元素不存在，value 变量会得到 undefined 值。
总结
可选链操作符是 ES2020 中的一个新特性，可以安全地访问深度嵌套的对象属性或数组元素，避免出现 TypeError 错误。可选链操作符可以用于对象的属性访问和数组的元素访问，语法简单，易于使用，可以提高代码健壮性和可读性。
// javascriptcn.com 代码示例
const person = {
name: 'Jack',
age: 30,
contact: {
email: 'jack@example.com',
phone: '1234567890'
}
};
const email = person.contact?.email;
console.log(email); // 'jack@example.com'希望这篇文章对你理解可选链操作符有所帮助，可以更好的应用到实际项目中，提升代码的可维护性和可读性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653db0ee7d4982a6eb76afe0