本文详解为何在遍历数组时直接使用 `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。
