空值合并运算符与三元运算符联用异常问题咨询

问题原因 #

核心是运算符优先级导致执行顺序和预期不符：

• 空值合并运算符（??）的优先级低于三元运算符（?:）
• 你的代码会被JS引擎解析为：

  (test.todo?.day ?? filterDayRange.length > 0) ? filterDayRange[0].day : 'tdy'
  

• 因为test.todo?.day的值是'tdy'（非空），所以'tdy' ?? true的结果还是'tdy'；而'tdy'是真值，三元运算会执行filterDayRange[0].day，最终得到'mon'，和预期的'tdy'不符。

解决方案 #

给三元运算部分加上括号，强制改变执行顺序，让空值合并运算符先和整个三元表达式的结果进行判断：

const test = {
  todo: {
    day: 'tdy'
  }
}

const filterDayRange = [{
    day: 'mon'
}]

const result = test.todo?.day ?? (filterDayRange.length > 0 ? filterDayRange[0].day : 'tdy');

console.log(result) // 输出：'tdy'

这样代码会先计算括号内的三元表达式（结果为'mon'），再和test.todo?.day做空值合并——因为test.todo?.day存在，所以直接返回'tdy'，符合预期。

内容的提问来源于stack exchange，提问作者Indraraj26