在JavaScript待办事项列表的开发过程中，我们通常会用数组来存储所有的待办项数据，当需要实现删除某一条特定待办项的功能时，核心就是对存储待办项的数组进行特定元素的删除操作。不同的删除场景对应不同的实现方式，选择合适的方法可以让代码更简洁高效。
常见数组特定元素删除方法
1. 使用splice方法删除
splice是JavaScript数组的原生方法，可以直接修改原数组，通过指定起始索引和删除个数来删除元素。如果我们知道要删除的待办项在数组中的索引，使用这个方法非常合适。
假设我们有一个待办事项数组，每个待办项是一个包含id和content属性的对象，删除指定id的待办项可以先找到目标索引：
// 待办事项数组
let todoList = [
{ id: 1, content: '学习JavaScript' },
{ id: 2, content: '完成项目文档' },
{ id: 3, content: '练习算法题' }
];
// 要删除的待办项id
const targetId = 2;
// 查找目标元素的索引
const targetIndex = todoList.findIndex(item => item.id === targetId);
// 如果找到索引，使用splice删除
if (targetIndex !== -1) {
todoList.splice(targetIndex, 1);
}
console.log(todoList);
// 输出: [{ id: 1, content: '学习JavaScript' }, { id: 3, content: '练习算法题' }]
使用splice方法时需要注意，它会直接修改原数组，如果不需要修改原数组，需要先拷贝数组再操作。另外如果数组中存在多个相同id的元素，findIndex只会找到第一个匹配的索引，需要根据需求调整查找逻辑。
2. 使用filter方法删除
filter方法会返回一个新数组，不会修改原数组，适合需要保留原数组的场景。它通过遍历数组，筛选出不符合删除条件的元素，间接实现删除特定元素的效果。
同样针对上面的待办事项数组，使用filter删除指定id的待办项：
// 待办事项数组
let todoList = [
{ id: 1, content: '学习JavaScript' },
{ id: 2, content: '完成项目文档' },
{ id: 3, content: '练习算法题' }
];
// 要删除的待办项id
const targetId = 2;
// 使用filter生成新数组，排除目标id的项
const newTodoList = todoList.filter(item => item.id !== targetId);
console.log(newTodoList);
// 输出: [{ id: 1, content: '学习JavaScript' }, { id: 3, content: '练习算法题' }]
console.log(todoList);
// 原数组未被修改，输出: [{ id: 1, content: '学习JavaScript' }, { id: 2, content: '完成项目文档' }, { id: 3, content: '练习算法题' }]
filter方法的优势是不会改变原数组，在需要遵循不可变数据原则的场景中非常适用，比如使用React等框架开发时，状态更新通常需要返回新的数据而不是修改原数据。
两种方法的适用场景对比
我们可以通过下表对比两种方法的差异，根据实际需求选择：
| 方法 | 是否修改原数组 | 适用场景 |
|---|---|---|
| splice | 是 | 已知目标元素索引、允许修改原数组的场景 |
| filter | 否 | 需要保留原数组、遵循不可变数据原则的场景 |
注意事项
- 删除元素前一定要先校验目标元素是否存在，避免出现索引越界或者不必要的空操作。
- 如果待办项没有唯一id，而是用内容作为标识，需要注意内容重复的情况，避免误删多个元素。
- 在循环遍历数组的同时使用splice删除元素，要注意索引变化的问题，建议从后往前遍历或者先收集要删除的索引再统一处理。
除了上述两种常用方法，还可以使用slice方法结合索引拼接数组实现删除，不过实现逻辑相对复杂，实际开发中splice和filter已经能满足大部分待办事项列表的删除需求。
JavaScript待办事项列表数组删除元素splice方法filter方法修改时间：2026-07-16 23:39:26