待办事项列表是前端开发中最经典的入门项目之一，它看似简单，但要在实际项目中做到状态稳定且无Bug却并不容易。很多初学者在实现删除功能时，习惯于直接操作DOM节点，这种做法在复杂应用中会导致数据与视图脱节。真正的To-Do List应用应当遵循数据驱动视图的理念，所有的删除操作本质上都是对JavaScript数组的修改。当数组中的特定项目被移除后，框架或原生事件再根据最新的数组重新渲染列表。
直接操作DOM的弊端在于状态难以维护。假设你通过删除按钮移除了一个<li>节点，但你的JavaScript内存中仍然保留着那个待办事项的数据。当用户进行全选、反选或者刷新列表时，那些被删除的数据又会复活，造成逻辑混乱。因此，将删除动作绑定到数组数据上，是构建健壮To-Do List的第一步。我们需要根据项目的唯一标识或者索引，在数组中找到目标并将其剔除。
使用splice方法按索引精准删除数组元素
在JavaScript中，Array.prototype.splice() 是最常用的原地修改数组的方法。它可以通过指定起始索引和删除数量，直接在原数组上切除一个或多个元素。对于To-Do List来说，如果每个待办事项在数组中的位置是固定的，且我们能够准确获取到当前被点击项目的索引，使用splice方法是非常高效的。
下面是一个使用splice方法删除特定索引元素的代码示例：
// 假设这是我们的待办事项数组
let todoList = [
{ id: 1, text: '学习JavaScript' },
{ id: 2, text: '编写To-Do List' },
{ id: 3, text: '优化删除功能' }
];
function deleteTodoByIndex(index) {
// 检查索引是否合法
if (index >= 0 && index < todoList.length) {
// 从索引处开始删除1个元素
let removedItem = todoList.splice(index, 1);
console.log('已删除项目：', removedItem[0].text);
} else {
console.log('索引越界，删除失败');
}
}
// 删除第二个待办事项
deleteTodoByIndex(1);
console.log(todoList); // 输出: [{id: 1, ...}, {id: 3, ...}]
虽然splice方法执行效率高，但它存在一个致命的陷阱：索引错位。在To-Do List应用中，用户通常是倒序点击删除按钮，或者通过事件委托获取被点击元素的索引。如果在遍历过程中连续删除多个项目，数组的长度会实时改变，后续元素的索引会随之前移，导致删错项目或者漏删项目。因此，使用splice时必须确保索引的绝对准确，通常需要配合findIndex方法来定位。
使用filter方法按条件生成全新数组
与splice的原地修改不同，Array.prototype.filter() 采取的是一种不可变数据的策略。它会遍历整个数组，将所有满足条件的元素放入一个新数组中返回，而原数组保持不变。在现代前端框架（如React或Vue）中，这种不可变数据的操作方式更受青睐，因为它可以帮助框架更高效地进行虚拟DOM的对比和渲染。
使用filter方法删除特定项目，我们不需要关心索引，只需要关心项目的唯一标识（如id）。下面是具体的实现代码：
// 待办事项数组
let todoList = [
{ id: 1, text: '学习JavaScript' },
{ id: 2, text: '编写To-Do List' },
{ id: 3, text: '优化删除功能' }
];
function deleteTodoById(id) {
// 过滤掉id与传入id相等的元素，返回新数组
todoList = todoList.filter(function(todo) {
return todo.id !== id;
});
console.log('已删除ID为', id, '的项目');
}
// 删除ID为2的待办事项
deleteTodoById(2);
console.log(todoList); // 输出: [{id: 1, ...}, {id: 3, ...}]
filter方法的优点是代码语义清晰，不会引发索引错位的问题，非常适合根据特定值进行删除。然而，它的缺点是每次删除都会创建一个全新的数组，在处理超大规模数据（如数万条记录）时，内存开销和遍历时间会成为一个性能瓶颈。但对于绝大多数常规的To-Do List应用来说，filter方法在可维护性和安全性上是最佳选择。
避坑指南：删除操作中的常见陷阱与最佳实践
在实现To-Do List删除功能时，最常见的一个错误就是使用forEach或map配合splice进行遍历删除。由于splice会改变数组长度，当在正向遍历时，删除一个元素后，下一个元素会自动补位到当前索引，而循环变量已经加1，这就导致被补位的元素被跳过。这是一个非常隐蔽的逻辑漏洞。
如果确实需要在遍历中删除多个元素，最佳实践是使用倒序遍历，或者直接使用filter进行筛选。下面演示一个倒序遍历删除的防错代码：
// 批量删除已完成的待办事项
let todoList = [
{ id: 1, text: '学习JavaScript', done: true },
{ id: 2, text: '编写To-Do List', done: false },
{ id: 3, text: '优化删除功能', done: true }
];
function deleteCompletedTodos() {
// 倒序遍历，避免索引错位
for (let i = todoList.length - 1; i >= 0; i--) {
if (todoList[i].done === true) {
todoList.splice(i, 1);
}
}
}
deleteCompletedTodos();
console.log(todoList); // 输出: [{id: 2, text: '编写To-Do List', done: false}]
从架构设计的角度来看，一个健壮的To-Do List删除功能应当具备唯一标识符机制。永远不要依赖数组索引作为删除依据，因为排序、过滤等操作都会改变索引。为每个待办事项分配一个唯一的id，在删除时通过filter或findIndex配合splice来操作，是保证应用状态稳定的核心原则。结合事件委托机制，将删除事件统一绑定在父级元素上，通过自定义属性传递id，可以进一步提升代码的性能与可维护性。
JavaScript数组删除To-Do List修改时间：2026-08-29 01:05:07