前言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 0deleteCount 设置为 0代表不删除元素在startIndex位置插入新内容原有元素向后挪位。let arr [1,2,3,4] // 在索引2的位置插入99100不删除 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 i0;iarr.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改动原数组坑 4deleteCount 省略不写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...)是数组多功能方法可以删、插、替换。会直接改动原数组返回被删除元素组成的数组。deleteCount0只插入负数索引从末尾倒数省略 deleteCount 删除后面全部。循环删除优先倒序遍历避免下标错位。和slice区分splice 改原数组slice 只截取不修改。