在前端开发中，JavaScript 是一种非常常用的编程语言。但是，由于 JavaScript 的语法比较灵活，代码中经常会出现一些繁琐而又容易出错的代码。为了解决这个问题，ECMAScript 2020 引入了可选链操作符，使得代码更加简洁易懂。本文将详细介绍可选链的使用方法，并给出一些示例代码。
什么是可选链
可选链是一种新的操作符，用于访问对象的属性或方法，避免因为对象不存在而导致程序崩溃。在 JavaScript 中，如果我们访问一个不存在的对象或属性，会抛出一个错误，导致程序中断。而使用可选链操作符，我们可以判断对象或属性是否存在，从而避免这种情况的发生。
可选链操作符由问号（?）和点号（.）组成，表示如果左侧表达式的值为 null 或 undefined，则不访问右侧属性或方法，直接返回 undefined。
如何使用可选链
下面是一个简单的例子，展示了如何使用可选链：
// javascriptcn.com 代码示例
const person = {
name: '张三',
age: 20,
address: {
city: '北京',
street: '朝阳区',
postcode: '100001'
}
};
console.log(person.address?.city); // 输出：北京
console.log(person.address?.country); // 输出：undefined在上面的代码中，我们使用了可选链操作符 ?. 来访问 person 对象中的 address 属性。如果 person 对象中不存在 address 属性，则直接返回 undefined。
可选链的嵌套使用
可选链操作符可以嵌套使用，来访问更深层次的属性或方法。下面是一个示例代码：
// javascriptcn.com 代码示例
const person = {
name: '张三',
age: 20,
address: {
city: '北京',
street: '朝阳区',
postcode: '100001'
},
getCountry() {
return this.address?.country ?? '中国';
}
};
console.log(person.getCountry()); // 输出：中国在上面的代码中，我们使用了可选链操作符 ?. 和空值合并操作符 ?? 来访问 person 对象中的 address 属性和 getCountry 方法。如果 address 属性不存在，则返回默认值 中国。
可选链的数组访问
除了访问对象属性和方法，可选链操作符还可以用于访问数组元素。下面是一个示例代码：
const list = [
{ name: '张三', age: 20 },
{ name: '李四', age: 30 },
{ name: '王五', age: 40 }
];
console.log(list[0]?.name); // 输出：张三
console.log(list[3]?.name); // 输出：undefined在上面的代码中，我们使用了可选链操作符 ?. 来访问数组 list 中的第一个元素的 name 属性。如果数组中不存在第一个元素，则直接返回 undefined。
总结
可选链是 ECMAScript 2020 中引入的一种新的操作符，用于访问对象属性、方法和数组元素，避免因为对象不存在而导致程序崩溃。可选链操作符由问号（?）和点号（.）组成，可以嵌套使用。在实际开发中，我们可以使用可选链来简化代码，提高程序的健壮性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650535a995b1f8cacd1b99b2