JS 中的 ? 操作符（? / ?. / ?? / ??=）

一 三目运算

// if 逻辑判断
if (x > y) {
    z = 100
} else {
    z = 200
}
// 三目运算简化 if
z = x > y ? 100 : 200

二、可选链操作符 ?.

let demo = { name: '前端小玖', age: 20 }
console.log('昵称', demo.nickName.toString())

因为 demo 对象上不存在 nickName 属性，所以当读取 demo.nickName 时，你得到的将会是 undefined，而 undefined 是没有 toString() 方法的，所以就报错了。

if (demo.nickName) {
    console.log('昵称', demo.nickName.toString())
}
//可选链操作符简化如下

let demo = { name: '前端小玖', age: 20 }
console.log('昵称', demo.nickName?.toString())

三、空值合并操作符 ??

let a = 0
let b = ''
let c = null
let d = undefined

let x = a ?? 100 // x 等于 0
let y = b ?? 100 // y 等于 ''
let z = c ?? 100 // z 等于 100
let k = d ?? 100 // k 等于 100

let o = a || 100  // o 等于 100
let p = b || 100  // p 等于 100
let q = c || 100  // q 等于 100
let r = d || 100  // r 等于 100

?? 只有当操作符左侧表达式的值为 undefined 或者 null 时，才会返回右侧的值。

|| 只要操作符左侧表达式的值为 false 时，那么就会返回右侧的值。左侧的表达式会自动做布尔运算，因为 0 和 空字符串 '' 做布尔运算，其值为 false，所以 o 和 p 的值等于 100。

通过上面的比较可以发现，?? 操作符的出现，是为了更准确的做空值判断，只有 null 和 undefined 才会被判定为空值， 0 和 '' 不会被判定为空值。

四、空值赋值操作符 ??=

只有当 ??= 左侧的值为 null 或者 undefined 的时候，才会将右侧变量的值赋值给左侧变量，其他所有值都不会进行赋值，在某些场景下可以省略很多代码。

let a = null
let b = undefined
let c = 100
let d = 200

// 因为 a 的值为 null，所以会将 c 的值赋值给 a , 所以最终 a = 100
a ??= c

// 因为 b 的值为 undefined，所以会将 d 的值赋值给 b , 所以最终 b = 200
b ??= d