js-可选链运算符(?.)、空值合并运算符(??)

1.可选链运算符

在代码中 . 操作符在引用为null或undefined时会引起错误，使用 ?. 操作符可以在引用前判断，它的作用与&&相似，简化了写法。

var a = null
console.log(a.b) // 报错
console.log(a?.b) // undefined
console.log(a?.b?.c) // undefined

//  => 相当于

console.log(a && a.b)
console.log(a && a.b && a.b.c)

2.空值合并运算符

?? 操作符相当于默认值，当对象为null或undefined时，获取操作符后的值。

注意 ?? 与 || 的区别，如果使用 || 时，当遇到 ""、0、null、undefined时，返回其默认值

var a = {
    b:{
        c:"xxx"
    }
}
console.log(a ?? "yyy") // b:{c:"xxx"}
console.log(a.b.d ?? "yyy") // yyy


let value = a.b.d ?? "yyy"
// => 等价于
let value
if (a && a.b && a.b.d) {
    value = a.b.d
} else {
    value = "yyy"
}


console.log("" ?? "yyy") // ""
console.log(0 ?? "yyy") // 0
console.log(null ?? "yyy") // yyy
console.log(undefined ?? "yyy") // yyy

console.log("" || "yyy") // yyy
console.log(0 || "yyy") // yyy
console.log(null || "yyy") // yyy
console.log(undefined || "yyy") // yyy