JavaScript中OR与三元运算符组合运行结果异常是什么原因？

异常原因 #

问题的核心是JavaScript运算符优先级规则：

• 逻辑或运算符 || 的优先级高于三元条件运算符 ?:
• 你写的表达式 checked || record.AllowCheck === '0' ? '1' : '0' 不会按照你预期的逻辑执行，实际运行时会被解析为：

  (checked || record.AllowCheck === '0') ? '1' : '0'
  

你当前场景下checked取值为true，逻辑或运算只要左侧为真就会直接返回真，不会执行右侧判断，所以整个括号内的结果永远为true，三元运算符自然返回第一个分支的'1'，和record.AllowCheck的取值完全无关，这就是输出不符合预期的原因。

修复方法 #

如果你的预期逻辑是「checked为真时返回'1'，checked为假时再根据record.AllowCheck的值判断返回结果」，只需要给三元判断部分手动添加括号明确运算顺序即可：

const records = this.state.records.map((record) => {
    return {
        ...record,
        Checked: checked ? '1' : (record.AllowCheck === '0' ? '1' : '0'),
    }
});

如果你的预期逻辑和上述不同，只需要按照你想要的运算顺序，用括号明确分隔优先级即可避免同类问题。

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