在前端开发中，我们经常需要操作对象或数组的属性或元素。但是当属性或元素不存在时，我们需要进行额外的判断，以避免出现错误。为了简化这个过程，ECMAScript 2021（ES12）引入了 Optional Chaining 操作符（?.）。
Optional Chaining 操作符的作用
Optional Chaining 操作符可以帮助我们在访问对象或数组属性或元素时，避免出现 TypeError 错误。当属性或元素不存在时，Optional Chaining 操作符会返回 undefined，而不是抛出错误。
Optional Chaining 操作符的使用
Optional Chaining 操作符的语法如下：
object?.property array?.[index]
其中，object 表示要访问的对象，property 表示要访问的属性，array 表示要访问的数组，index 表示要访问的元素下标。
下面是一个使用 Optional Chaining 操作符的示例：
const user = {
name: '张三',
age: 18,
}
console.log(user.name) // 输出：'张三'
console.log(user.address?.city) // 输出：undefined在上面的示例中，我们使用 Optional Chaining 操作符访问了 user 对象的 address 属性的 city 属性。由于 address 属性不存在，所以返回了 undefined。
Optional Chaining 操作符的嵌套使用
Optional Chaining 操作符还可以嵌套使用，以访问深层次的属性或元素。下面是一个嵌套使用 Optional Chaining 操作符的示例：
// javascriptcn.com 代码示例
const user = {
name: '张三',
age: 18,
address: {
city: '北京',
street: '朝阳区',
building: {
name: '望京SOHO',
level: 10,
},
},
}
console.log(user.address?.building?.name) // 输出：'望京SOHO'
console.log(user.address?.building?.level) // 输出：10
console.log(user.address?.building?.floor?.number) // 输出：undefined在上面的示例中，我们使用 Optional Chaining 操作符访问了 user 对象的 address 属性的 building 属性的 name 和 level 属性，以及 floor 属性的 number 属性。由于 floor 属性不存在，所以返回了 undefined。
Optional Chaining 操作符的兼容性
Optional Chaining 操作符是 ECMAScript 2021（ES12）中新增的语法，目前在主流浏览器中的兼容性较差，需要使用 Babel 等工具进行转换。如果需要使用 Optional Chaining 操作符，建议在项目中使用 Babel 进行转换。
总结
Optional Chaining 操作符是 ECMAScript 2021（ES12）中新增的语法，可以帮助我们在访问对象或数组属性或元素时，避免出现 TypeError 错误。使用 Optional Chaining 操作符可以简化代码，提高开发效率。但是需要注意兼容性问题，建议在项目中使用 Babel 进行转换。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6578fe2fd2f5e1655d2e8eba