filter 删除数组元素本质是创建新数组保留满足条件的项,不修改原数组,符合不可变原则;它通过判断函数筛选元素,返回全新数组,适用于按值、条件删除及避免常见误区。

使用 filter 删除数组元素时,本质是创建一个新数组,保留满足条件的项,跳过要“删除”的项——这天然符合不可变原则,不修改原数组。
理解 filter 的不可变逻辑
filter 总是返回一个全新数组,原数组完全不变。它不会 splice、push 或直接赋值,而是遍历并“筛选出”符合条件的元素。
- 传入一个判断函数(返回
true表示保留,false表示丢弃) - 对每个元素调用该函数,只把返回
true的元素放进新数组 - 原数组引用和内容均不受影响
按值删除单个或多个元素
例如,从 [1, 2, 3, 2, 4] 中删掉所有 2:
const arr = [1, 2, 3, 2, 4]; const newArr = arr.filter(item => item !== 2); // [1, 3, 4] console.log(arr); // [1, 2, 3, 2, 4] —— 原数组没变
注意:这是浅比较,适用于基本类型或已知引用场景;若删对象,需用 id 或其他唯一字段判断。
按条件删除(如对象属性、空值、特定规则)
常见场景举例:
- 删除空字符串:
arr.filter(str => str.trim() !== '') - 删除
null/undefined:arr.filter(item => item != null) - 删除对象中某字段为
false的项:items.filter(item => item.isActive) - 根据 ID 删除:
list.filter(item => item.id !== targetId)
避免常见误区
不要混淆 filter 和 find/some;filter 返回数组,哪怕结果为空([]),不是 undefined。
- ❌ 错误写法:
arr.filter(...).pop()—— 这看似“删了最后一个”,但实际是先生成新数组再取值,原数组仍完整,且语义不清 - ✅ 正确思路:明确“保留哪些”,而不是“删哪些”。比如“保留除最后一个外的所有”应写成
arr.slice(0, -1),而非用filter - ⚠️ 注意性能:对超大数组频繁 filter 可能影响效率,但这是为不可变性付出的合理代价










