将forEach代码转为for循环后失效，如何修复使其功能一致？

问题现象 #

点击红色退出按钮时，forEach实现的代码能正常移除player，但改用for循环的版本功能失效。操作流程为：先点击蓝色按钮添加player，再点击红色按钮尝试移除。

错误原因 #

问题出在正向遍历数组并删除元素时的索引错乱：当用for (let i = 0; i < players.length; i++)遍历，执行splice(i, 1)删除元素后，数组长度会减1，后面的元素会自动向前移位。此时i继续递增，就会跳过原本位于i+1位置的元素，导致无法正确遍历并匹配到要删除的player。

修复方案 #

有两种可靠的修复方式：

方式1：反向遍历数组

从数组末尾开始往前遍历，即使前面的元素被删除，也不会影响当前遍历的索引位置：

// 修复后的反向for循环
for (let i = players.length - 1; i >= 0; i--) {
  if (players[i].id === targetPlayerId) {
    players.splice(i, 1);
  }
}

方式2：正向遍历但调整索引

在删除元素后手动将i减1，抵消循环本身的i递增，确保不会跳过下一个元素：

// 修复后的正向for循环（带索引调整）
for (let i = 0; i < players.length; i++) {
  if (players[i].id === targetPlayerId) {
    players.splice(i, 1);
    i--; // 回退索引，避免跳过移位后的元素
  }
}

原理说明 #

• 反向遍历：从后往前处理元素，已经遍历过的元素不会因为前面的删除操作而移位，因此不会出现索引遗漏的问题。
• 索引调整：删除元素后让i减1，下一次循环i递增后，正好指向原本位于i+1位置的元素（该元素因删除操作已移到i的位置），保证每个元素都能被检查到。

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