在ES11中，引入了Optional Chaining运算符，使得我们可以更加便捷地处理空置的情况。本文将介绍Optional Chaining运算符的相关概念、语法及使用方法。
概念
Optional Chaining运算符使用?.语法，表示当左侧表达式存在时才继续进行右侧的运算，否则直接返回undefined。这种操作可以避免使用if/else语句或者try/catch来处理空置的情况，简化代码且更加优雅。
语法
Optional Chaining运算符的语法结构如下：
obj?.prop // obj.prop, 如果obj为null或undefined返回undefined
obj?.[expr] // obj[expr], 如果obj为null或undefined返回undefined
func?.(args) // 如果func为null或undefined返回undefined；否则，执行func以及参数args
注意：Optional Chaining运算符只会在左侧表达式为null或undefined的情况下阻止右侧表达式的求值，如果左侧表达式中存在类型错误，则右侧表达式的求值仍然会执行。
使用方法
在实际开发中，Optional Chaining运算符可以用于多种场景，比如：
- 对于对象深层属性的访问：
// javascriptcn.com 代码示例
const user = {
id: 123,
name: 'Lucy',
address: {
province: 'Beijing',
city: 'Haidian',
}
}
const city = user.address?.city;
console.log(city); // Haidian
const street = user.address?.street?.name;
console.log(street); // undefined- 函数的调用：
// javascriptcn.com 代码示例
const query = {
name: 'Lucy',
age: 18,
getAddress() {
return {
province: 'Beijing',
city: 'Haidian',
street: 'Xueyuan Road'
}
}
}
const street = query.getAddress?.().street;
console.log(street); // Xueyuan Road
const address = query.getAddress3?.();
console.log(address); // undefined上述示例中，如果Optional Chaining运算符的左侧不存在，那么整个表达式会直接返回undefined，无需通过if/else或try/catch来处理空置的情况。
最后，需要注意的是，在使用Optional Chaining运算符时需要注意代码的兼容性。由于这是ES11中新的特性，不同的浏览器、Node.js版本可能会有不同的支持情况，因此需要进行适当的兼容性处理，可以使用Babel等工具来进行转换。
总结
ES11中的Optional Chaining运算符，可以更加便捷地处理空置的情况，使得代码更加简洁优雅。在实际开发中，可以运用Optional Chaining运算符来避免繁琐的代码处理，提升代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6519c20195b1f8cacd1e0344