数组方法splice与slice有何区别？

Question

在JavaScript开发中，`splice()` 和 `slice()` 是常用但易混淆的数组方法。常见问题如下： **问题：** 在实际项目中，有开发者尝试使用 `slice()` 删除数组中的指定元素，却发现原数组未被修改；而另一些人用 `splice()` 提取子数组时，意外改变了原数组，导致后续逻辑出错。这两种方法究竟有何本质区别？它们在参数传递、返回值以及是否改变原数组方面各有什么特点？何时应选用 `slice()`，何时应使用 `splice()` 才能避免副作用和性能问题？

Answer 1

1. 基本概念：slice() 与 splice() 的定义

slice() 和 splice() 都是 JavaScript 中用于操作数组的方法，但它们的设计目的和行为机制截然不同。

• slice(start, end)：从数组中提取一个浅拷贝的子数组，不修改原数组。
• splice(start, deleteCount, item1, ..., itemN)：从数组中删除、替换或插入元素，直接修改原数组。

这是两者最根本的区别：是否产生副作用（side effect）。

2. 参数传递对比分析

方法	参数说明	是否可选
slice(start, end)	start: 起始索引；end: 结束索引（不包含）	end 可选，默认到末尾
splice(start, deleteCount, items...)	start: 起始位置；deleteCount: 删除数量；items: 插入的新元素	deleteCount 和 items 均可选

注意：slice() 的 end 是非包含性的，而 splice() 的 deleteCount 控制删除多少项。

3. 返回值差异

// 示例：slice() 返回新数组
const arr = [1, 2, 3, 4];
const subArr = arr.slice(1, 3);
console.log(subArr); // [2, 3]
console.log(arr);    // [1, 2, 3, 4] —— 原数组未变

// 示例：splice() 返回被删除的元素
const removed = arr.splice(1, 2);
console.log(removed); // [2, 3]
console.log(arr);     // [1, 4] —— 原数组已改变

由此可见，slice() 适合“读取”场景，splice() 更适用于“写入”操作。

4. 是否改变原数组：核心区别

1. slice()：纯函数行为，返回新数组，原数组不变 —— 符合函数式编程原则。
2. splice()：具有副作用，直接修改调用它的数组 —— 属于命令式编程风格。

在现代前端开发中（如 React、Redux），推荐使用不可变数据模式，因此 slice() 更受青睐。

5. 实际应用场景对比

使用 slice() 的典型场景：

• 分页处理：获取当前页的数据片段
• 克隆数组：[...arr] 或 arr.slice(0)
• 避免状态污染：在 reducer 中返回新状态

使用 splice() 的典型场景：

• 动态删除列表项（如待办事项）
• 在指定位置插入新元素
• 实现拖拽排序后的数组更新

6. 常见误用案例解析

// ❌ 错误：试图用 slice 删除元素
let list = [1, 2, 3];
list.slice(1, 1); // 返回空数组，原数组不变 → 无效果

// ✅ 正确做法：使用 splice
list.splice(1, 1); // 删除一项，list 变为 [1, 3]

// ❌ 错误：用 splice 提取子数组
let extracted = list.splice(0, 2); // 提取前两项但破坏了原数组

// ✅ 正确做法：使用 slice
extracted = list.slice(0, 2); // 安全提取，保留原数组

7. 性能考量与最佳实践

graph TD A[开始数组操作] --> B{需要修改原数组?} B -- 是 --> C[使用 splice()] B -- 否 --> D[使用 slice()] C --> E[注意性能开销：splice 是 O(n)] D --> F[利用缓存或结构复制优化] E --> G[频繁插入/删除考虑使用 Map 或 Set] F --> H[适合 immutable 场景]

由于 splice() 可能触发元素位移，其时间复杂度为 O(n)，在大型数组中应谨慎使用。

8. 不可变数据模式中的替代方案

在 Redux 或 React 状态管理中，禁止直接修改 state。此时应避免 splice()，改用扩展运算符结合 slice()：

// 删除索引为 i 的元素
const newArr = [...arr.slice(0, i), ...arr.slice(i + 1)];

// 在索引 i 处插入元素
const inserted = [...arr.slice(0, i), newItem, ...arr.slice(i)];

这种方式既保持了语义清晰，又符合不可变性要求。