在前端开发中，我们经常需要访问对象的属性或方法。然而，在实际开发中，我们经常会遇到访问一个不存在的属性或方法的情况，这时程序就会报错。为了解决这个问题，ES10 中引入了可选链操作符，它可以帮助我们更加方便地访问对象的属性或方法，避免了代码中的 null 或 undefined 引起的错误。
可选链操作符的基本用法
可选链操作符（?.）的基本用法非常简单，它可以在访问对象属性或方法时，判断该属性或方法是否存在，如果存在则执行，否则返回 undefined。
下面是一个示例代码：
const person = {
name: 'Tom',
address: {
city: 'Beijing',
street: 'Chaoyang Road'
}
};
console.log(person?.name); // Tom
console.log(person?.age); // undefined
console.log(person?.address?.city); // Beijing
console.log(person?.address?.zipCode); // undefined从上面的代码可以看出，当我们使用可选链操作符时，如果对象中存在访问的属性或方法，则会正常执行，否则会返回 undefined。
可选链操作符的嵌套使用
在实际开发中，我们经常会遇到多层嵌套的对象，此时可选链操作符可以帮助我们更加方便地访问嵌套对象中的属性或方法。
下面是一个示例代码：
const person = {
name: 'Tom',
address: {
city: 'Beijing',
street: 'Chaoyang Road',
zipCode: '100000',
details: {
phone: '1234567890',
email: 'tom@example.com'
}
}
};
console.log(person?.address?.details?.phone); // 1234567890
console.log(person?.address?.details?.fax); // undefined从上面的代码可以看出，当我们使用可选链操作符时，如果对象中存在访问的属性或方法，则会正常执行，否则会返回 undefined。
可选链操作符与其他操作符的组合使用
可选链操作符可以与其他操作符组合使用，以实现更加复杂的操作。
下面是一个示例代码：
const person = {
name: 'Tom',
address: {
city: 'Beijing',
street: 'Chaoyang Road',
zipCode: '100000',
details: {
phone: '1234567890',
email: 'tom@example.com'
}
}
};
console.log(person?.address?.details?.phone ?? 'N/A'); // 1234567890
console.log(person?.address?.details?.fax ?? 'N/A'); // N/A从上面的代码可以看出，当我们使用可选链操作符与其他操作符组合使用时，如果对象中存在访问的属性或方法，则会正常执行，否则会返回指定的值。
可选链操作符的指导意义
可选链操作符的引入，可以帮助我们更加方便地访问对象的属性或方法，避免了代码中的 null 或 undefined 引起的错误。在实际开发中，我们应该充分利用可选链操作符，编写更加健壮、可靠的代码。
总结
本文介绍了 ES10 中的新特性——可选链操作符的使用，详细讲解了可选链操作符的基本用法、嵌套使用、与其他操作符的组合使用以及其指导意义。我们应该在实际开发中充分利用可选链操作符，编写更加健壮、可靠的代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65be787aadd4f0e0ff7ffd96