「js操作符」可选链操作符 ?.可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引

定义

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效, 该表达式短路返回值时undefined

语法

// 尝试访问可能不存在的对象属性，返回 undefined
obj?.prop
obj?.[expr]
arr?.[index]

// 与函数调用一起使用时，如果给定的函数不存在，则返回undefined
func?.(args)

一些使用场景

1.访问深度嵌套的子属性

const tLevel = data.fLevel && data.fLevel.sLevel && data.fLevel.sLevel.tLevel

// 等价于

const tLevel = data?.fLevel?.sLevel?.tLevel

2.尝试调用一个可能不存在的方法

const instance = {
    name: 'hello world'
}

instance.sayHello() // Uncaught TypeError: instance.sayName is not a function
instance.sayHello?.() // undefined

3.短路计算

let potentiallyNullObj = null;
let x = 0;
let prop = potentiallyNullObj?.[x++];

console.log(x); // x 将不会被递增，依旧输出 0

4.配合空值合并操作符

const playerJia = { name: 'jia' }
const playerYi = { name: 'yi', level: '' }
const playerBing = { name: 'bing', level: 100 }

let levelJia = playerJia?.level ?? 1
let levelYi = playerYi?.level ?? 1
let levelBing = playerBing?.level ?? 1


console.log(levelJia) // 1
console.log(levelYi) // ''
console.log(levelBing) // 100