JavaScript todo应用reducer中!store.items.find逻辑含义咨询

首先要澄清一个很容易出现的认知偏差：这里的逻辑非并不是直接修饰store.items.find这个方法本身的。结合JavaScript的运算符优先级，实际的执行顺序是：先完整跑完store.items.find(...)的全部逻辑拿到返回值，再对这个返回值做逻辑非取反，最后把结果赋值给areAllTasksCompleted变量。

我们可以把这行核心代码拆成三个部分逐块拆解：

• 首先明确Array.prototype.find的核心行为：它会遍历数组，返回第一个满足传入回调条件的元素；如果遍历完整个数组都找不到匹配的元素，就返回undefined
• 传入find的回调todo => !todo.isComplete，本质是设置筛选规则：从todo列表里找到第一个处于未完成状态的条目
• 表达式最前面的逻辑非!，作用是把find的返回值转换成布尔值，刚好匹配“判断所有任务是否全部完成”的目标：
  • 如果列表里存在未完成的条目，find会返回对应的todo对象（属于JavaScript中的真值），经过!取反后结果为false，代表当前不是全完成状态
  • 如果列表里找不到任何未完成的条目，find会返回undefined（属于JavaScript中的假值），经过!取反后结果为true，代表当前所有任务都已经标记为完成

这个判断结果刚好和下方的分支逻辑形成完整的按钮切换效果：

• 当判断出当前已经全任务完成时，点击按钮就把所有条目的isComplete改成false，实现“一键全标未完成”的效果
• 当判断出当前还有未完成任务时，点击按钮就把所有条目的isComplete改成true，实现“一键全标已完成”的效果

补充：这种“用find返回值取反判断数组中不存在某类元素”的写法在JS开发中很常见，它和store.items.every(todo => todo.isComplete)的判断逻辑、最终效果是完全等价的。

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