【开发问题】循环方式变更引发的逻辑错误：forEach 与 for...of 中 return 行为差异

by emanjusaka from https://www.emanjusaka.com/archives/loop-return-difference 彼岸花开可奈何

本文为原创文章，可能会更新知识点以及修正文中的一些错误，全文转载请保留原文地址，避免产生因未即时修正导致的误导。

博客：https://www.emanjusaka.com

博客园：https://www.cnblogs.com/emanjusaka

公众号：emanjusaka的编程栈

在某次代码变动中，改变了循环的方式，从而引发了问题。

最初是通过 forEach 进行的循环：

 placedChessList.forEach(chess => {
   if(!chess.hexId || chess.deathStatus === 1) return
   // ... existing code ...
 })

修改之后使用了 for...of 进行循环：

   for (const [index, chess] of placedChessList.entries()) {
     if (!chess.hexId || chess.deathStatus === 1) return 
     // ... existing code ...
   }

为啥使用了 for...of 进行循环会造成代码逻辑的改变，想要弄明白这个问题就要知道两种循环方式 return 的区别。

第一种循环方式：

数组的forEach方法，return只会跳出当前这一次迭代（相当于continue），不会终止整个循环，更不会退出外层函数。所以即使某个 chess 满足条件，也只是跳过它，继续循环遍历完所有元素。

第二种循环方式：

for...of循环，遍历的是placedChessList 的 entries（索引 + 元素）。如果任意一个 chess 满足条件（即 !chess.hexId || chess.deathStatus === 1），整个函数会立即返回（退出函数）。也就是说：只要遇到第一个“无效棋子”，就中断整个函数的后续执行。

虽然只是一个小小的循环方式的改动，但确改变了整个业务逻辑。造成了代码运行和预期出现了偏差。