前言
splice()是数组里非常强大但容易踩坑 的方法，它集「删除、插入、替换」三种能力于一身。 ⚠️重点：splice 会直接改变原数组 ，这和slice（切片，不改动原数组）最大的区别。
思维导图总览： array.splice(startIndex, deleteCount, item1, item2, ...)
参数完整解析
array.splice(startIndex, deleteCount, item1, item2, ...)表格
| 参数 | 说明 |
|---|---|
| startIndex | 起始下标 ，从哪个位置开始操作正数：从数组开头正常索引；负数：从数组末尾倒数，-1倒数第一位，-2倒数第二位 |
| deleteCount | 需要删除多少个元素。0代表不删除，只做插入 |
| item1,item2... | 可选参数，要插入到数组的新元素 |
返回值：被删除的元素组成的新数组 ；没有删除任何元素，返回空数组
[]。 ✨关键点：原数组会被直接修改！
四种使用场景示例
场景 1：删除元素
格式：splice(起始下标, 删除个数)
let arr = ['a','b','c','d']
//从索引1开始，删除2个元素
let del = arr.splice(1,2)
console.log(arr) // ['a','d'] 原数组被修改
console.log(del) // ['b','c'] 返回被删除的元素- arr：原始数组，执行之后内容直接变化
- del：接收返回值，可以拿到被删掉的数据
场景 2：只插入元素，不删除（deleteCount = 0）
deleteCount 设置为 0，代表不删除元素，在
startIndex位置插入新内容，原有元素向后挪位。
let arr = [1,2,3,4]
// 在索引2的位置插入99，100，不删除
let del = arr.splice(2, 0, 99, 100)
console.log(arr) // [1,2,99,100,3,4]
console.log(del) // [] 没有删除，返回空数组注意：不是追加到末尾！是插在索引前面 。
splice(2,0,x)：x 放在下标 2 的位置，原来下标 2 及以后全部后移。
场景 3：替换元素（删多少，插多少）
逻辑：在同一个位置，先删掉 N 个，再插入 N 个新元素，等价替换。
let arr = [10,20,30]
//索引1，删除1个，插入666
arr.splice(1, 1, 666)
console.log(arr) // [10, 666, 30]过程：下标 1 的20被删掉，立刻把666填到这个空位，实现替换效果。
场景 4：负数索引，从倒数位置操作
startIndex 支持负数，从数组末尾倒数定位下标。
let arr = [1,2,3,4]
//从倒数第2位开始删除1个
arr.splice(-2,1)
console.log(arr) // [1,2,4]解析：数组[1,2,3,4]，-2指向元素3，删除 1 个，3被移除。
splice 高频坑点拓展
坑 1：会改变原数组
很多新手以为返回值是新数组，原数组不变。splice 直接修改自身数组。
let arr = [1,2,3]
let res = arr.splice(1,1)
console.log(arr) // [1,3] 原数组已经变了！
console.log(res) // [2] res拿到删除项如果不想破坏原数组：先复制一份再操作
let temp = [...arr]; temp.splice(...)
坑 2：遍历数组同时 splice 删除，下标错乱
❌错误写法：正向 for 循环，一边删数组一边 i++，会跳过元素
let arr = [1,2,2,3]
for(let i=0;i<arr.length;i++){
if(arr[i]===2){
arr.splice(i,1)
}
}
console.log(arr) // [1,2,3] 有一个2漏掉了！原因：splice 删除后数组长度变短，后面元素往前挪，i 继续 ++ 就跳过下一个元素。
✅解决方案：
-
倒序循环（推荐），从后往前删，不会影响前面下标
for(let i = arr.length-1; i >=0 ;i--){
if(arr[i] ===2){
arr.splice(i,1)
}
} -
删除成功 i--，抵消数组前移
if(arr[i]===2){
arr.splice(i,1)
i--
}
坑 3：区分 splice 和 slice，名字很像，行为完全不同
表格
| 方法 | 作用 | 是否修改原数组 |
|---|---|---|
| splice(start,delCount,newItem) | 删除 / 插入 / 替换 | ✅修改原数组 |
| slice(start,end) | 截取片段 | ❌返回新数组，原数组不变 |
let arr = [1,2,3,4]
let s1 = arr.slice(1,3)
console.log(arr) // [1,2,3,4] slice不会改动原数组
let s2 = arr.splice(1,3)
console.log(arr) // [1] splice改动原数组坑 4：deleteCount 省略不写
splice(start)，只写第一个参数，代表：从 start 下标开始，删除后面全部元素
let arr = [10,20,30,40]
arr.splice(2)
console.log(arr) // [10, 20]业务实战场景
- 上一篇图片上传案例中删除图片：
pics_url_arr.splice(index,1)
根据数组下标，删除当前图片，之后重新渲染页面。
function delete_pic(index) {
pics_url_arr.splice(index, 1)
render_pics(pics_url_arr)
}- 列表中间插入一条数据：
arr.splice(pos,0,newObj) - 根据下标替换列表项：
arr.splice(pos,1,newObj)
总结
splice(startIndex,deleteCount,item...)是数组多功能方法，可以删、插、替换。- 会直接改动原数组，返回被删除元素组成的数组。
- deleteCount=0，只插入；负数索引从末尾倒数；省略 deleteCount 删除后面全部。
- 循环删除优先倒序遍历，避免下标错位。
- 和
slice区分：splice 改原数组，slice 只截取不修改。