在 javascript 中，使用 `foreach` 遍历数组并同时调用 `splice` 删除元素会导致跳过后续项，因为数组长度和索引会动态变化；推荐改用 `while` 循环、反向 `for` 循环或函数式方法（如 `filter`）来避免该问题。
你遇到的问题非常典型：在 forEach 中修改原数组（尤其是通过 splice 删除元素）会破坏遍历逻辑。这是因为 forEach 内部按初始索引顺序执行回调（如 index = 0, 1, 2...），而当你删除第 i 个元素后，原 i+1 位置的元素会前移至 i，但 forEach 已经“走过了”这个索引，从而跳过它。
例如，数组 [{c:true}, {c:false}, {c:true}] 在 forEach 中：
- 处理索引 0 → 删除第一个 → 数组变为 [{c:false}, {c:true}]
- forEach 接着处理索引 1 → 实际访问的是 {c:true}（原第三个），而 {c:false}（原第二个）被跳过 —— 但更关键的是：第二个 {c:true} 此时已移到索引 1，却因 forEach 的固定步进机制未被检查。
✅ 推荐解决方案
方案 1：反向 for 循环（简洁高效，修改原数组）
if (confirmDelete) {
for (let i = tasks.length - 1; i >= 0; i--) {
if (tasks[i].completion === true) {
tasks.splice(i, 1);
}
}
}✅ 优势：从末尾开始，删除不影响尚未访问的索引；语义清晰，性能好。
方案 2：while 循环（显式控制索引，如答案所给）
if (confirmDelete) {
let index = 0;
while (index < tasks.length) {
if (tasks[index].completion === true) {
tasks.splice(index, 1); // 删除后不递增 index，下轮继续检查新位置
} else {
index++; // 仅当未删除时才前进
}
}
}⚠️ 注意：原答案中 index-- 后 index++ 抵消，实际等效于不递增，逻辑正确但略绕；建议用 else 显式分支更易读。
方案 3：函数式写法（推荐 —— 不修改原数组，更安全可预测）
if (confirmDelete) {
tasks = tasks.filter(task => task.completion !== true);
// 或等价写法：tasks = tasks.filter(task => !task.completion);
}✅ 优势：无副作用、代码简洁、符合现代 JS 实践；DOM 元素移除仍需单独处理（如你已做的 allCompletedTasksOnPage.forEach(...)），但数据层逻辑完全解耦。
? 重要提醒
- 永远不要在 forEach/for...of 中对正在遍历的数组做 push/pop/splice 等改变长度的操作；
- 若需保留原数组引用，优先用 filter + 重新赋值；
- DOM 批量操作（如 task.remove()）建议配合 DocumentFragment 提升性能（非本题重点，但值得延伸优化）。
综上，对于你的待办列表场景，filter 是最清晰、健壮且不易出错的选择；若必须就地修改，反向 for 循环是最佳折中方案。
