JavaScript中isSelected = !isSelected && id === item.id的作用是什么

这行代码写在map回调里，本质是作者想借map的遍历流程，省掉单独写循环/调用数组判断方法的步骤，原设计意图是遍历完过滤后的items数组后，通过外部的isSelected变量标记列表中是否存在id和目标id变量相等的项。

实际运行逻辑 #

JS中&&运算符存在短路求值特性，且map遍历会严格按照数组元素顺序逐个执行回调，结合初始值isSelected = false，这行代码的逐轮执行规则如下：

• 首先前置的items.filter(Boolean)会先过滤掉原数组里所有假值（null、undefined、0、空字符串等），后续map只遍历过滤后的有效元素
• 每遍历到一个元素时，先判断!isSelected的值：
  • 如果之前已经匹配到过id相等的项，此时isSelected为true，!isSelected为false，&&直接短路返回false，不会再判断当前项id是否匹配，最终把false赋值给isSelected
  • 如果之前还没匹配到过id相等的项，此时!isSelected为true，才会继续判断当前项的id是否和目标id相等：相等则表达式返回true，赋值后isSelected变为true；不相等则返回false，isSelected保持false

存在的逻辑问题 #

这个写法是有明显bug的，完全达不到原设计目的：
只有当id匹配的项刚好是过滤后数组的最后一个元素时，遍历结束后isSelected才会是true；如果匹配项在数组中间位置，匹配轮次中isSelected会被临时设为true，但遍历下一个元素时就会被重新赋值为false，最终拿到的结果完全错误。
如果要实现「判断列表中是否存在目标id项」的需求，正确的逻辑应该把判断反过来，写成isSelected = isSelected || id === item.id，这样只要匹配到一次，isSelected就会一直保持true直到遍历结束。

另外补充一点：这段代码里map返回的结果对象根本没有用到isSelected字段，也能佐证作者就是想蹭map的遍历逻辑顺便做存在性判断，只是逻辑写反了。

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