在前端开发中，我们经常会遇到 undefined 和 null 的报错问题，这些问题可能会导致程序崩溃或者出现其他异常情况。为了解决这些问题，ES10 提供了一种新的操作符——可选链操作符（Optional Chaining Operator），可以方便地处理 undefined 和 null 的情况。
可选链操作符的语法
可选链操作符是一个问号（?）后跟着一个点号（.），表示如果前面的对象存在，则执行后面的操作。例如：
obj?.prop
这个表达式表示，如果 obj 存在，则获取 obj.prop 的值。如果 obj 不存在，则返回 undefined。
可选链操作符的使用场景
可选链操作符可以用于任何可能出现 undefined 或 null 的情况。例如：
对象的属性
// www.javascriptcn.com code example
const obj = {
prop1: {
prop2: 'value'
}
}
console.log(obj.prop1?.prop2) // 输出 'value'
console.log(obj.prop1?.prop3) // 输出 undefined
console.log(obj.prop2?.prop3) // 输出 undefined数组的元素
const arr = [1, 2, 3] console.log(arr[0]?.prop) // 输出 undefined console.log(arr[1]?.prop) // 输出 undefined console.log(arr[2]?.prop) // 输出 undefined
函数的返回值
// www.javascriptcn.com code example
function func() {
return {
prop1: {
prop2: 'value'
}
}
}
console.log(func()?.prop1?.prop2) // 输出 'value'
console.log(func()?.prop1?.prop3) // 输出 undefined
console.log(func()?.prop2?.prop3) // 输出 undefined可选链操作符的注意事项
虽然可选链操作符可以方便地处理 undefined 和 null 的情况，但是在使用时需要注意一些问题。
链式调用
可选链操作符可以用于链式调用，但是需要注意操作符的位置。例如：
// www.javascriptcn.com code example
const obj = {
prop1: {
prop2: {
prop3: 'value'
}
}
}
console.log(obj.prop1?.prop2?.prop3) // 输出 'value'
console.log(obj.prop1?.prop2.prop3) // 报错 TypeError: Cannot read property 'prop3' of undefined可选链操作符应该放在每个点号（.）之后，而不是整个链式调用的末尾。
操作符的优先级
可选链操作符的优先级比点号（.）和函数调用（()）低。因此，在使用时需要注意操作符的优先级。例如：
const obj = {
prop1: {
prop2: 'value'
}
}
console.log(obj?.prop1.prop2) // 报错 SyntaxError: Invalid left-hand side in assignment
console.log((obj?.prop1).prop2) // 输出 'value'在使用可选链操作符时，需要使用括号明确操作符的优先级。
可选链操作符的指导意义
可选链操作符可以方便地处理 undefined 和 null 的情况，使代码更加简洁和可读。使用可选链操作符可以避免大量的 if 判断和异常处理代码，提高代码的可维护性和可扩展性。
示例代码
下面是一个使用可选链操作符的示例代码：
// www.javascriptcn.com code example
const obj = {
prop1: {
prop2: {
prop3: 'value'
}
}
}
function func() {
return {
prop1: {
prop2: 'value'
}
}
}
console.log(obj.prop1?.prop2?.prop3) // 输出 'value'
console.log(obj.prop1?.prop2.prop3) // 报错 TypeError: Cannot read property 'prop3' of undefined
console.log(func()?.prop1?.prop2) // 输出 'value'
console.log(func()?.prop1?.prop3) // 输出 undefined
console.log((obj?.prop1)?.prop2?.prop3) // 输出 'value'
console.log((obj?.prop1)?.prop2.prop3) // 报错 TypeError: Cannot read property 'prop3' of undefined在这个示例代码中，使用可选链操作符处理了对象的属性和函数的返回值，避免了出现 undefined 和 null 的情况。同时，也演示了操作符的注意事项和优先级。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d134f8a941bf713428e636