js ?? 判空运算符作用和常见场景

JavaScript中??符号， Null 判断运算符

作用：读取对象属性的时候，如果某个属性的值是null或undefined，有时候需要为它们指定默认值。以前做法是通过双管道符号 || 运算符指定默认值。

// 通过||运算符指定默认值，属性的值如果为''或false或0，默认值也会生效。
const userAddress = data.userInfo.address || '地球'

通过||运算符指定默认值，属性的值如果为''或false或0，默认值也会生效。

为了避免这种情况，ES2020 引入了一个新的 Null 判断运算符??。它的行为类似||，但是只有运算符左侧的值为null或undefined时，才会返回右侧的值。

// 默认值只有在左侧属性值为null或undefined时，才会生效。
const userAddress = data.userInfo.address ?? '地球'

此运算符的一个目的，就是跟链判断运算符?.配合使用，为null或undefined的值设置默认值。

const userAddress = data.userInfo?.address ?? '地球'

上面代码中，如果data.userInfo是null或undefined，或者data.userInfo?.address是null或undefined，就会返回默认值'地球'。这一行代码包括了两级属性的判断。

使用场景1：判断函数参数是否赋值

function Component(props) {
  const enable = props?.enable ?? true
}

// 上面代码等同于

function Component(props) {
  const { enable: enable = true } = props
}

使用场景2：

const userAddress = data.userInfo?.address ?? '地球'

使用注意点

??有一个运算优先级问题，它与&&和||的优先级孰高孰低。现在的规则是，如果多个逻辑运算符一起使用，必须用括号表明优先级，否则会报错。
栗子：

;(lhs && middle) ?? rhs

lhs && (middle ?? rhs)
;(lhs ?? middle) && rhs

lhs ?? (middle && rhs)
;(lhs || middle) ?? rhs