解析includes/indexOf内部与外部使用逻辑表达式的差异

核心原因：JavaScript逻辑与&&的工作机制 #

首先要明确：JavaScript里的&&不是直接返回布尔值，而是短路求值的结果——它会依次判断操作数，返回第一个遇到的假值；如果所有操作数都是真值，就返回最后一个真值。

举几个直观例子：

• 'Mango' && 'Apple' → 两个都是真值，返回最后一个'Apple'
• 'a' && 'Apple' → 同样返回'Apple'
• '' && 'Apple' → 第一个是空字符串（假值），返回''
• null && 'Apple' → 返回null

两种写法的本质差异 #

写法一：逻辑表达式作为函数参数 #

fruits.includes('Mango' && 'Apple');

这里'Mango' && 'Apple'会先被计算，得到结果'Apple'，然后把这个结果传给includes，等价于：

const temp = 'Mango' && 'Apple'; // temp = 'Apple'
fruits.includes(temp);

所以这只是在检查数组中是否存在'Apple'，和逻辑与的“同时满足两个条件”完全无关——你以为是检查数组里有没有Mango和Apple，但实际只检查了Apple。

写法二：逻辑表达式连接函数调用 #

fruits.includes('Mango') && fruits.includes('Apple');

这里是先执行第一个includes('Mango')，如果返回true（数组里有Mango），再执行第二个includes('Apple')；如果第一个返回false，直接短路返回false。最终结果是两个条件都满足才返回true，这才是你预期的逻辑与效果。

你的测试案例解析 #

对于这段代码：

console.log(fruits.includes('a' && 'Apple')) // true
console.log(fruits.indexOf('a' && 'Apple'))  // 2

'a' && 'Apple'的结果是'Apple'，所以实际等价于：

console.log(fruits.includes('Apple')) // true
console.log(fruits.indexOf('Apple'))  // 2

这就是为什么你得到的是Apple的存在状态和索引，而不是预期的-1——因为代码根本没去查找'a'。

写法一的实际用途 #

这种“把逻辑表达式作为参数传入”的写法，适合动态确定查找目标的场景，利用&&的短路特性来生成要查找的值：

1. 过滤无效输入：

// 只有当userInput是有效字符串时，才查找trim后的内容；否则查找假值（数组里没有的话返回false）
const target = userInput && userInput.trim();
fruits.includes(target);

2. 条件式目标选择：

// 当isVegan为true时，查找'Apple'；否则查找假值
const target = isVegan && 'Apple';
fruits.includes(target);

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