JS中splice和filter删除数组元素有什么区别

图 1：splice 原地修改与 filter 生成新数组的执行差异对比

一、深入 splice：基于索引的就地删除机制

Array.prototype.splice() 是 JavaScript 语言早期提供的多功能数组修改 API。当用于删除元素时，它的核心驱动机制是精确的物理索引（Index）。

1. 基础语法与返回值

语法结构为 arr.splice(startIndex, deleteCount)。第一个参数指定从哪一下标开始切除，第二个参数指定连续切除几个元素。

const fruits = ["苹果", "香蕉", "橙子", "葡萄"];

// 从下标 1 开始，删除 1 个元素
const deleted = fruits.splice(1, 1);

console.log(fruits);  // 示例输出: ["苹果", "橙子", "葡萄"] （原数组已被改变）
console.log(deleted); // 示例输出: ["香蕉"] （返回包含被删元素的数组）

2. 单元素删除的标准三步范式

在实际业务中，我们往往只知道要删除的“元素值”或“对象的属性”，而不是固定的数字索引。此时必须配合 indexOf 或 findIndex，且务必进行非负校验：

const users = [
  { id: 101, name: "张三" },
  { id: 102, name: "李四" },
  { id: 103, name: "王五" }
];

// 步骤 1：定位目标下标
const targetIndex = users.findIndex(user => user.id === 102);

// 步骤 2：校验有效性（若未找到将返回 -1）
if (targetIndex !== -1) {
  // 步骤 3：安全切除 1 项
  users.splice(targetIndex, 1);
}

console.log(users.length); // 示例输出: 2

图 2：splice 删除三步操作流程与批量循环中的“移位漏删”避坑方案

3. 批量循环删除时的“下标移位陷阱”

若试图用正向 for (let i = 0; i < arr.length; i++) 遍历并使用 splice 删除多个满足条件的项，会导致灾难性的连续项漏删。原因在于：当位置 i 被删除后，后续所有元素自动向前补位（原 i+1 变成新的 i），但下一次循环计数器 i++ 直接检查下一个位置，原本移位过来的元素就被跳过了。

如果必须用 splice 做批量删除，推荐采用逆向循环（从后往前遍历）：

const scores = [65, 40, 55, 90, 58, 80]; // 删除所有不及格分数 (< 60)

// 从末尾向开头遍历
for (let i = scores.length - 1; i >= 0; i--) {
  if (scores[i] < 60) {
    scores.splice(i, 1); // 删除只影响后面的元素，前面的下标安全稳定
  }
}

console.log(scores); // 示例输出: [65, 90, 80] （准确无漏删）

二、深入 filter：基于断言的声明式过滤机制

Array.prototype.filter() 属于 ES5 引入的函数式迭代方法。与 splice 的“找出来并切掉”不同，filter 的思维方式是“找出来并保留”。

1. 基础语法与纯函数理念

语法结构为 const newArr = arr.filter(callback(item, index, array))。它要求回调函数返回一个布尔值。返回 true 的元素被浅拷贝收集进新数组，返回 false 的元素被丢弃。

const originalList = [1, 2, 3, 4, 5];

// 目标：删除数字 3（即：保留所有不等于 3 的数字）
const filteredList = originalList.filter(item => item !== 3);

console.log(originalList); // 示例输出: [1, 2, 3, 4, 5] （原数组毫发无损）
console.log(filteredList); // 示例输出: [1, 2, 4, 5] （崭新的数组结果）

图 3：filter 纯函数过滤流与“以保留代删除”的新数组装配逻辑

2. 对象数组中批量删除的天然优势

filter 不需要关心当前元素处于哪个下标，也不存在任何由于数组收缩带来的索引移位问题。面对复杂的复合条件删除，表达极其自然：

const taskList = [
  { id: 1, title: "需求分析", completed: true },
  { id: 2, title: "编写文档", completed: false },
  { id: 3, title: "单元测试", completed: true }
];

// 清理已完成的任务（即：仅保留未完成的）
const pendingTasks = taskList.filter(task => !task.completed);

console.log(pendingTasks); 
// 示例输出: [ { id: 2, title: "编写文档", completed: false } ]

三、深层原理：内存引用模型与现代前端框架

理解 splice 与 filter 的底层差异，对于编写健壮的现代 Web 应用至关重要。

图 4：splice 与 filter 在 JavaScript 堆栈内存中的指针与地址行为剖析

1. 堆栈引用对比

• splice 的内存行为： JavaScript 中数组属于引用类型，保存在堆内存（Heap）中，变量名只是保存了指向该堆地址的指针。splice 直接在原有堆地址上移动内存插槽并缩减 length。执行前后，变量所指向的内存地址没有任何改变。
• filter 的内存行为： 引擎会在堆区重新开辟一块全新的连续内存块，依次将保留下来的元素引用放进去。原数组对象的堆内存结构完全未被改动。

2. 为什么 React / Vue 状态管理严格偏好 filter

在 React（如 useState）、Redux 或 Vue 的计算属性/深度监听中，组件是否需要重新渲染（Re-render）依赖于浅比较（Shallow Comparison: prevArr !== nextArr）。

// ❌ 错误做法：使用 splice 修改 React State
const handleDelete = (index) => {
  items.splice(index, 1);
  setItems(items); // 传入的引用与旧 state 相同（0x10A === 0x10A），React 判定无需更新，界面不会刷新！
};

// ✅ 正确做法：使用 filter 创建全新引用
const handleDelete = (id) => {
  setItems(prevItems => prevItems.filter(item => item.id !== id)); // 新引用触发重绘
};

四、全景对比与选型决策指南

为了在开发中快速准确地做出技术选型，下表列出了两者的完整核心参数对比：

图 5：splice 与 filter 在具体业务场景下的选型决策树与落地指引

五、常见问题与注意事项

1. 已知元素下标时，filter 也能按下标删除吗？
   可以。filter 的回调函数第二个参数即为索引：arr.filter((_, idx) => idx !== targetIndex)。但在不需要不可变引用的原生高频算法中，先找下标再 filter 会遍历整个数组，时间复杂度恒定为 O(n)；而 splice 在已知下标时删除只需一次位移。
2. splice 删除后，数组会变成稀疏数组（Sparse Array）吗？
   不会。splice 会自动压缩数组并向前移动后续元素，保持数组的稠密性（Dense Array）。若想保留索引空位（即 empty），使用的是 delete arr[index] 运算符，通常在现代开发中不建议使用 delete 处理数组。
3. filter 是深拷贝还是浅拷贝？
   浅拷贝（Shallow Copy）。filter 产生的新数组中，如果存放的是对象，新旧数组里的元素依然指向堆内存中的同一个对象实体。因此修改新数组中对象的属性，依然会波及原数组中的对象。