splice 方法详解

Array.prototype.splice() 是 JavaScript 中用于 原地修改数组 的核心方法，主要功能：
删除元素、插入新元素、替换元素 三合一操作

基础语法

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

核心特性

参数	描述
start	起始索引（负数表示从末尾开始计算）
deleteCount	要删除的元素数量（0 或负数时不删除元素）
item1, item2	要插入的新元素（可选）
返回值	被删除元素组成的数组
副作用	直接修改原数组

---

10 个场景示例

1. 纯删除元素

const arr = [1, 2, 3, 4, 5];
const removed = arr.splice(2, 2); // 从索引2开始删除2个元素
console.log(arr);     // [1, 2, 5]
console.log(removed); // [3, 4]

2. 纯插入元素（不删除）

const arr = ['a', 'b', 'c'];
arr.splice(1, 0, 'x', 'y'); // 在索引1前插入
console.log(arr); // ['a', 'x', 'y', 'b', 'c']

3. 替换元素（删除+插入）

const arr = [10, 20, 30, 40];
const removed = arr.splice(1, 2, 'new1', 'new2');
console.log(arr);     // [10, 'new1', 'new2', 40]
console.log(removed); // [20, 30]

4. 负数索引操作

const arr = [1, 2, 3, 4, 5];
arr.splice(-2, 1); // 从倒数第2位删除1个元素
console.log(arr);  // [1, 2, 3, 5]

5. 删除所有后续元素

const arr = ['a', 'b', 'c', 'd'];
arr.splice(2); // 从索引2删除到末尾
console.log(arr); // ['a', 'b']

6. 插入对象类型

const obj = { id: 1 };
const arr = [10, 20];
arr.splice(1, 0, obj, [30]);
console.log(arr); // [10, {id:1}, [30], 20]

7. 删除并插入不同类型

const arr = [100, 200, 300];
arr.splice(1, 1, 'hello', false);
console.log(arr); // [100, 'hello', false, 300]

8. 边界情况处理

const arr = ['x'];
// start超过数组长度时自动定位到末尾
arr.splice(5, 1, 'a', 'b'); 
console.log(arr); // ['x', 'a', 'b']

9. 删除0元素仅插入

const arr = ['apple'];
arr.splice(0, 0, 'banana'); 
console.log(arr); // ['banana', 'apple']

10. 类数组对象应用

const arrayLike = { 0: 'a', 1: 'b', length: 2 };
Array.prototype.splice.call(arrayLike, 0, 1, 'z');
console.log(Array.from(arrayLike)); // ['z', 'b']

---

特殊场景说明

处理稀疏数组

const sparseArr = [1, , 3]; // 中间有空位
sparseArr.splice(1, 1, 'filled');
console.log(sparseArr); // [1, 'filled', 3]

与 slice 方法对比

方法	是否修改原数组	功能
splice	✅	删除/插入元素
slice	❌	创建新数组的浅拷贝片段

---

注意事项

1. 性能问题：大数据量操作时频繁使用 splice 可能影响性能
2. 引用类型元素：操作对象元素时修改的是数组引用，不会影响已存在的对象内容
3. 空位处理：在稀疏数组中会保留空位（ECMAScript 规范行为）
4. 浏览器兼容性：所有现代浏览器完全支持，包括 IE9+

---

总结表格

操作类型	示例代码	结果变化
删除	arr.splice(2, 1)	删除索引2的元素
插入	arr.splice(1, 0, 'new')	在索引1前插入'new'
替换	arr.splice(0, 2, 'a', 'b')	替换前两个元素
清空尾部	arr.splice(3)	删除索引3及之后所有元素
负数索引操作	arr.splice(-1, 1)	删除最后一个元素

掌握 splice 可以高效处理数组的增删改操作，但要注意其 原地修改 特性可能引发的副作用！