在前端开发场景中，列表数据通常以数组形式存储，使用JavaScript从列表中删除特定项是十分常见的操作，不同的删除需求对应不同的实现方法，开发者可以根据实际场景选择最合适的方案。
使用splice方法删除特定项
splice是JavaScript数组的原生方法，可以直接修改原数组，通过指定起始索引和删除数量来移除元素，适合已知要删除项索引的场景。
已知索引删除单个项
如果已经知道要删除的项在列表中的索引位置，可以直接调用splice方法，第一个参数是起始索引，第二个参数是删除的元素个数。
// 定义原始列表 let list = [1, 2, 3, 4, 5]; // 删除索引为2的元素，也就是值为3的项 let deletedItem = list.splice(2, 1); console.log(list); // 输出 [1, 2, 4, 5] console.log(deletedItem); // 输出 [3]
先查找索引再删除
如果不知道要删除项的索引，只知道要删除的具体值，可以先通过indexOf方法找到对应的索引，再使用splice删除。
let list = ['apple', 'banana', 'orange', 'grape'];
// 要删除的目标值
let target = 'orange';
// 查找目标值的索引
let index = list.indexOf(target);
// 判断索引是否存在，避免删除不存在的项
if (index !== -1) {
list.splice(index, 1);
}
console.log(list); // 输出 ['apple', 'banana', 'grape']
需要注意的是，indexOf方法只会返回第一个匹配项的索引，如果列表中有重复的目标值，只会删除第一个匹配的项。
使用filter方法删除特定项
filter方法不会修改原数组，而是返回一个新数组，新数组中包含原数组中满足筛选条件的所有元素，适合需要保留原数组或者删除多个匹配项的场景。
删除单个匹配项
可以通过filter方法筛选出不等于目标值的元素，得到删除目标项后的新列表。
let list = [10, 20, 30, 20, 40]; let target = 20; // 筛选出所有不等于target的元素，得到新数组 let newList = list.filter(item => item !== target); console.log(newList); // 输出 [10, 30, 40] console.log(list); // 输出 [10, 20, 30, 20, 40]，原数组未被修改
删除符合复杂条件的项
filter方法的筛选条件可以自定义，适合删除符合特定规则的项，比如删除列表中所有大于10的数字。
let list = [5, 12, 8, 15, 3]; // 删除所有大于10的项 let newList = list.filter(item => item <= 10); console.log(newList); // 输出 [5, 8, 3]
两种方法的对比
下面通过表格对比splice和filter两种方法的差异，帮助开发者选择合适的方案：
| 对比维度 | splice方法 | filter方法 |
|---|---|---|
| 是否修改原数组 | 是 | 否 |
| 适用场景 | 已知索引、需要修改原数组、删除单个项 | 需要保留原数组、删除多个匹配项、复杂筛选条件 |
| 返回值 | 被删除的元素组成的数组 | 筛选后的新数组 |
删除对象类型的列表项
如果列表中的元素是对象，删除特定项时需要根据对象的某个属性来判断，同样可以使用上述两种方法。
// 对象类型列表
let userList = [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' }
];
// 要删除的用户id
let targetId = 2;
// 方法1：使用filter删除
let newUserList = userList.filter(user => user.id !== targetId);
console.log(newUserList); // 输出 [{id:1,name:'张三'},{id:3,name:'王五'}]
// 方法2：使用findIndex结合splice删除
let targetIndex = userList.findIndex(user => user.id === targetId);
if (targetIndex !== -1) {
userList.splice(targetIndex, 1);
}
console.log(userList); // 输出 [{id:1,name:'张三'},{id:3,name:'王五'}]
这里使用findIndex方法查找符合属性条件的元素索引，再配合splice删除，比indexOf更适合对象类型元素的查找。
注意事项
- 使用splice删除前一定要先判断索引是否存在，避免索引不存在时删除错误的元素或者报错。
- 如果不需要修改原数组，优先选择filter方法，避免副作用导致的数据问题。
- 删除重复项时，splice需要循环查找索引并删除，而filter可以一次性处理所有匹配项，效率更高。
- 处理对象列表时，不要直接比较对象本身，应该根据对象的唯一标识属性（如id）来判断是否为目标项。
JavaScript数组操作列表删除splice方法filter方法修改时间：2026-06-19 16:00:25