JS三元运算符使用异常，ESLint提示逻辑运算符混合警告

嘿，这个ESLint警告我太熟悉了！它本质上是在帮你避免因为逻辑运算符优先级混淆踩坑——JavaScript里&&的优先级确实比||高，但直接混写不加括号，不仅读起来费劲，还很容易写出和你预期不符的逻辑。

先看你的原代码（悄悄提一句：应该是item不是iteam，大概率是笔误啦）：

tempFilter === 'all' ? item.text.match(value) && item.status === 'active' || item.status === 'done' : /* 这里是不是漏了三元运算符的else分支？ */

第一步：先明确你要实现的逻辑 #

这里关键得先搞清楚你真正想表达的是什么，两种常见的可能性：

• 情况1：当tempFilter是'all'时，满足「(文本匹配了value 并且状态是active) 或者状态是done」
• 情况2：当tempFilter是'all'时，满足「文本匹配了value 并且 (状态是active 或者状态是done)」

这两种逻辑天差地别，所以必须先确定你的需求，再用括号把关联条件包起来。

第二步：根据需求修正代码 #

如果是情况1：(匹配+active) 或者 done

把&&组合的条件用括号包起来，明确它是一个整体：

tempFilter === 'all' ? (item.text.match(value) && item.status === 'active') || item.status === 'done' : /* 补充你的else逻辑 */

要是想让代码更易读，还可以调整顺序（把更简单的条件放前面）：

tempFilter === 'all' ? item.status === 'done' || (item.text.match(value) && item.status === 'active') : /* else分支 */

如果是情况2：匹配 且 (active/done)

那就要把||的条件用括号包裹：

tempFilter === 'all' ? item.text.match(value) && (item.status === 'active' || item.status === 'done') : /* 补充else */

这种情况还能简化成更清爽的写法，用数组的includes方法：

tempFilter === 'all' ? item.text.match(value) && ['active', 'done'].includes(item.status) : /* else分支 */

几个小提醒 #

1. 三元运算符得写完整：你现在的代码只写了?后面的部分，缺了:对应的else分支，运行时会报错，记得补上哦。
2. 关于match：如果文本没匹配上，match会返回null，这在逻辑判断里是假值，要是你需要区分“没匹配”和“匹配了但状态不对”，可能得调整逻辑细节。

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