在 JavaScript 开发中，我们经常需要访问对象的属性或方法。但是，当我们处理嵌套对象时，如果其中一个对象为空或 undefined，那么访问其属性或方法就会报错，这时候我们就需要使用可选链操作符来避免这种情况。
什么是可选链操作符
可选链操作符是 ES2020 新增的语法，用于简化访问嵌套对象属性或方法的代码。它的作用是判断当前对象是否为空或 undefined，如果是，则返回 undefined，否则继续访问其属性或方法。
可选链操作符使用问号（?）表示，放置在需要访问的属性或方法名后面，例如：
// javascriptcn.com 代码示例
const obj = {
name: 'Alice',
age: 18,
address: {
city: 'Shanghai',
street: 'Nanjing Road'
}
}
// 使用可选链操作符访问嵌套对象属性
const city = obj?.address?.city // 'Shanghai'
// 如果 address 为空或 undefined，则返回 undefined
const district = obj?.address?.district // undefined可选链操作符的优势
在日常开发中，我们经常需要处理嵌套对象，使用可选链操作符可以帮助我们避免错误和冗长的代码。以下是可选链操作符的优势：
简化代码：使用可选链操作符可以避免使用 if 语句或三元表达式来判断对象是否为空或 undefined。
避免错误：使用可选链操作符可以避免访问空对象或 undefined 对象而导致的错误。
提高可读性：使用可选链操作符可以使代码更加简洁和易读，减少不必要的嵌套和冗余代码。
可选链操作符的使用场景
可选链操作符适用于访问嵌套对象属性或方法的场景，以下是一些使用可选链操作符的示例：
示例 1：访问嵌套对象属性
// javascriptcn.com 代码示例
const user = {
name: 'Alice',
age: 18,
address: {
city: 'Shanghai',
street: 'Nanjing Road'
}
}
// 使用可选链操作符访问嵌套对象属性
const city = user?.address?.city // 'Shanghai'
const district = user?.address?.district // undefined示例 2：调用嵌套对象方法
// javascriptcn.com 代码示例
const user = {
name: 'Alice',
age: 18,
address: {
city: 'Shanghai',
street: 'Nanjing Road',
getFullAddress() {
return `${this.city}, ${this.street}`
}
}
}
// 使用可选链操作符调用嵌套对象方法
const fullAddress = user?.address?.getFullAddress?.() // 'Shanghai, Nanjing Road'
const zipCode = user?.address?.getZipCode?.() // undefined示例 3：访问数组元素
const arr = [1, 2, 3] // 使用可选链操作符访问数组元素 const first = arr?.[0] // 1 const fourth = arr?.[3] // undefined
可选链操作符的兼容性
可选链操作符是 ES2020 新增的语法，目前还未被所有浏览器和 Node.js 版本支持。以下是可选链操作符的兼容性情况：
- Chrome 80+ ✔
- Firefox 74+ ✔
- Safari 13.1+ ✔
- Edge 80+ ✔
- Node.js 14.0.0+ ✔
- Internet Explorer ❌
在使用可选链操作符时，需要注意兼容性问题，可以使用 Babel 等工具将代码转换为 ES5 或更早的版本，以兼容不支持可选链操作符的浏览器和 Node.js 版本。
总结
可选链操作符是 ES6 中的一项重要语法，它能够简化访问嵌套对象属性或方法的代码，避免因空对象或 undefined 对象而导致的错误，提高代码的可读性和可维护性。在开发中，我们可以灵活使用可选链操作符，使代码更加简洁和易读。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658112f8d2f5e1655dc47f44