逻辑或、空值合并运算符结合includes与三元表达式的行为是否符合预期？

现象描述 #

当把逻辑或（||）、空值合并运算符（??）和三元表达式、includes方法混用的时候，会出现和预期不符的结果：

const result = 'Hello' || ['e', 'z'].includes('e') ? 'in-array' : 'not-in-array';
console.log(result) // 'in-array'

const result = 'Hello' ?? ['e', 'z'].includes('z') ? 'in-array' : 'not-in-array';
console.log(result) // 'in-array'

const result = 'Hello' || ['e', 'z'].includes('xx') ? 'in-array' : 'not-in-array';
console.log(result) // 'in-array'

const result = 'Hello' ?? ['e', 'z'].includes('xx') ? 'in-array' : 'not-in-array';
console.log(result) // 'in-array'

只有给右侧的三元表达式加上括号，代码才会按预期返回'Hello'：

const result = 'Hello' || (['e', 'z'].includes('e') ? 'in-array' : 'not-in-array');
console.log(result) // 'Hello'

const result = 'Hello' ?? (['e', 'z'].includes('z') ? 'in-array' : 'not-in-array');
console.log(result) // 'Hello'

解答：这是完全符合规范的预期行为 #

问题出在JavaScript的运算符优先级上：

• 三元运算符（?:）的优先级比||和??都低
• 所以你的代码会先执行左侧的逻辑运算，比如'Hello' || ['e', 'z'].includes('e')，结果是真值'Hello'，接着这个真值会作为三元表达式的判断条件，直接返回'in-array'——不管后面的includes结果是什么。

拿第一个例子拆解来看，实际执行顺序是这样的：

// 第一步：先算逻辑或
const temp = 'Hello' || ['e', 'z'].includes('e'); // 结果是'Hello'
// 第二步：用temp作为三元条件
const result = temp ? 'in-array' : 'not-in-array'; // 输出'in-array'

而加括号后，括号的优先级最高，会先执行括号里的三元表达式，再和左侧的逻辑运算符运算。此时'Hello'是真值，||和??都会直接返回它，不会再执行后面的三元表达式，这就符合你的预期了。

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