如何安全高效地从数组中批量删除满足条件的元素

本文详解为何在遍历数组时直接使用 `foreach` 配合 `splice` 会导致漏删，并提供多种可靠替代方案（如 `while` 循环、`filter`、倒序 `for` 循环），帮助开发者正确实现“删除所有已完成任务”等常见需求。

你在 ToDo 应用中遇到的问题非常典型：试图用 Array.prototype.forEach() 遍历数组并同步调用 splice() 删除元素，结果只删掉了第一个匹配项，其余未被处理。根本原因在于——forEach 的内部索引是预先确定且不可变的。当 splice() 删除一个元素后，后续元素会向前移动一位，但 forEach 仍按原始索引继续执行下一轮（例如从索引 1 跳到 2），导致刚移入位置 1 的原索引 2 元素被跳过。

✅ 推荐解决方案（按推荐度排序）

方案一：使用 filter() —— 函数式、安全、简洁（强烈推荐）

if (confirmDelete) {
  // 创建新数组，仅保留未完成的任务
  tasks = tasks.filter(task => !task.completion);

  // 同步更新 DOM（可选：也可统一用 remove() 批量清理）
  allCompletedTasksOnPage.forEach(el => el.remove());
}

✅ 优点：语义清晰、无副作用、不修改原数组引用（利于调试与状态管理）、性能良好；
⚠️ 注意：filter 返回新数组，需重新赋值给 tasks 变量。

方案二：倒序 for 循环 —— 原地修改、兼容性极佳

if (confirmDelete) {
  for (let i = tasks.length - 1; i >= 0; i--) {
    if (tasks[i].completion === true) {
      tasks.splice(i, 1);
    }
  }
  allCompletedTasksOnPage.forEach(el => el.remove());
}

✅ 优点：从末尾向前遍历，删除元素不影响尚未检查的索引；无需额外变量，原地操作；
? 原理：删除索引 i 处元素后，i+1 及之后的元素前移，但下一次循环 i-- 恰好检查新移入 i 位置的元素。

方案三：while 循环（如答案所给）—— 显式控制索引

if (confirmDelete) {
  let index = 0;
  while (index < tasks.length) {
    if (tasks[index].completion === true) {
      tasks.splice(index, 1); // 删除当前元素
      // 不递增 index，下轮继续检查新位于 index 的元素
    } else {
      index++; // 仅当未删除时才前进
    }
  }
  allCompletedTasksOnPage.forEach(el => el.remove());
}

✅ 优点：逻辑直观，避免索引错位；
⚠️ 注意：需手动管理 index，易遗漏 else 分支（原答案中 index-- + index++ 组合虽可行，但不如本写法清晰稳健）。

❌ 为什么 forEach + splice 不行？（关键原理）

const arr = [{c: true}, {c: true}, {c: false}];
arr.forEach((item, i) => {
  if (item.c) arr.splice(i, 1); 
});
// 实际执行：
// i=0 → 删除 arr[0] → arr 变为 [{c:true}, {c:false}]
// i=1 → 访问 arr[1]（即 {c:false}）→ 跳过原第二个 {c:true
}
// i=2 → 超出长度，结束 → 结果残留一个 completed 项！

✅ 最佳实践建议

• 优先选择 filter()：现代 JavaScript 开发中，应倾向不可变数据操作，提升可预测性与可维护性；
• DOM 操作解耦：先更新数据（tasks），再批量更新视图（如 allCompletedTasksOnPage.forEach(...)），避免数据与 UI 不一致；
• 补充健壮性：可加入空数组或 undefined 判断，例如 if (!Array.isArray(tasks)) return;。

掌握这些模式，你不仅能解决 ToDo 删除问题，更能规避大量因“边遍历边修改”引发的隐蔽 Bug。