(超详细)数组方法 ——— splice( )

splice( )函数详解

splice() 方法:

通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
参数:

index ------ 必需。整数,规定添加/删除项目的位置。使用负数可从数组结尾处规定位置。

howmany ------ 必需。要删除的项目数量。包含该index项在内。如果设置为 0,则不会删除项目。

item1, ..., itemX ------ 可选。向数组添加的新项目。在index项之前添加。
返回值:通常为删除掉的数组元素。

原数组:被改变,原数组经过删除或增加之后的。

一、情况一(只有一个参数)

splice(index) ------> 从index的位置开始,删除之后的所有元素(包括第index个)

若 index < 0 , 则删除最后-index个元素

eg1. index初始值为0,index = 2 即从第三个元素开始,删除之后所有元素,包括第三个

javascript 复制代码
      

      let arr = [0, 1, 2, 3, 4, 5, 6];
      console.log("原数组" , arr);  // 原数组 [0,1,2,3,4,5,6]
      let arrBack = arr.splice(2);    
      console.log("通过splice改变了原数组,变为", arr); //通过splice改变了原数组,变为[0, 1]
      console.log("返回值", arrBack);  // 返回值 [2, 3, 4, 5, 6]

运算后的arr:0,1

被删除的元素:2,3,4,5,6

eg2. 数组最后一个值对应的index=-1 index = -3即倒数第三个元素, 即从倒数第三个元素开始,删除之后的所有元素,包括倒数第三个

javascript 复制代码
      
      let array = [0, 1, 2, 3, 4, 5, 6];
      console.log("原数组为:", array);
      let arrBack = array.splice(-3);
      console.log("原数组变为:", array); // [0,1,2,3]
      console.log("返回值", arrBack); //[ 4,5,6]

运算后的array:0,1,2,3

被删除的元素:4,5,6

二、情况二 (两个参数)

splice(index,howmany) ------> 删除从index位置开始的数,howmany为删除的个数

若 howmany 小于等于 0,则不删除

eg1. 删除从index=2 即第三个元素开始,删除一个,即它自己本身

javascript 复制代码
      
      let array = [0, 1, 2, 3, 4, 5, 6];
      console.log(array);
      let arrBack = array.splice(2, 1);
      console.log(array);   //  [0, 1, 3, 4, 5, 6]
      console.log(arrBack); //  [2]

运算后的array:0,1,3,4,5,6

被删除的元素:2

eg2. 删除从index=2 即第三个元素开始,删除0个,即不删除

javascript 复制代码
      let array = [0, 1, 2, 3, 4, 5, 6];
      let arrBack = array.splice(2, 0);
      console.log(array); // [0, 1, 2, 3, 4, 5, 6]
      console.log(arrBack); //[]

运算后的array:0,1,2,3,4,5,6

被删除的元素:

三、情况三 (大于等于三个参数)

splice(index ,howmany , item1, ..., itemX )

① index >0 时

1). howmany 为 0 时 不删除只添加 ------ 在index位置前添加item1, ..., itemX的数

2). howmany > 0 删除且添加 ------ 删除从index位置开始的数,howmany为删除的个数,并且在index位置前添加item1, ..., itemX的数

② index <0 时 最后一个数为 -1 依次倒数第二个数为-2

1). howmany 为 0 时 不删除只添加 ------ 在-index位置前添加item1, ..., itemX的数

2). howmany > 0 删除且添加 ------ 删除从-index位置开始的数,howmany为删除的个数,并且在-index位置前(相当于往后 -2前是 -1)添加item1, ..., itemX的数

eg1. 删除从index= -2 即倒数第二个元素开始,删除0个,即不删除;并在倒数第二个元素前添加 8,9

javascript 复制代码
      
      let array = [0, 1, 2, 3, 4, 5, 6];
      let arrBack = array.splice(-2, 0, 8, 9);
      console.log(array); //[0,1,2,3,4,8,9,5,6]
      console.log(arrBack); //[]

eg2. 删除从index= -2 即倒数第二个元素开始,删除3个,即5,6(虽然只有两个);并在倒数第二个元素前添加8,9

javascript 复制代码
     
      let array = [0, 1, 2, 3, 4, 5, 6];
      let arrBack = array.splice(-2, 3, 8, 9);
      console.log(array); // [0, 1, 2, 3, 4, 8, 9];
      console.log(arrBack); //[5, 6];

eg3. 删除从index=5 即第六个元素开始,删除3个(包含第六个),后面只剩两个,全部删除;并在第六个元素前添加8,9

javascript 复制代码
       let array = [0, 1, 2, 3, 4, 5, 6, 7];
       let arrBack = array.splice(5, 3, 8, 9);
       console.log(array); //[0,1,2,3,4,8,9];
       console.log(arrBack); //[5, 6, 7];

eg4. 删除从index=2 即第三个元素开始,删除0个,即不删除;并在第三个元素前添加8,9

javascript 复制代码
        
      let array = [0, 1, 2, 3, 4, 5, 6];
      let arrBack = array.splice(2, 0, 8, 9);
      console.log(arr); //[0,1,8,9,2,3,4,5,6]
      console.log(arrBack); //[]

以下案例来自uniapp官网:

TypeScript 复制代码
    const months = ['Jan', 'March', 'April', 'June'];
    months.splice(1, 0, 'Feb');
    // inserts at index 1
    console.log(months);
    // expected output: Array ["Jan", "Feb", "March", "April", "June"]

    months.splice(4, 1, 'May');
    // replaces 1 element at index 4
    console.log(months);
    // expected output: Array ["Jan", "Feb", "March", "April", "May"]
相关推荐
itmigrate9 小时前
前端项目里,Object.is 并不是 === 的平替
前端
小大宇10 小时前
Vue知识点6-computed计算属性
前端·javascript·vue.js
程序员海军11 小时前
尤雨溪 : Vue 4 已经在规划中了!
前端·javascript·vue.js
2601_9499706911 小时前
HumanizeDuration 跨端三方库仓颉适配全流程
前端·javascript·flutter
风骏时光牛马13 小时前
后端服务接口开发与性能优化
前端
kyriewen13 小时前
我让 4 个 AI 互相 review 代码,最温柔的那个下手最狠
前端·程序员·ai编程
计算机魔术师13 小时前
493家公司白砸AI钱?Apollo这组数据戳破了幻觉
前端
IT_陈寒13 小时前
Java静态变量初始化坑得我头皮发麻
前端·人工智能·后端
天外飞雨道沧桑13 小时前
我在浏览器里练了一个 792 参数的大模型,它学会了补全 JavaScript
开发语言·javascript·ai·ecmascript·ai编程
柳杉14 小时前
用 Codex 完成智慧高速 3D 可视化大屏,从 18 张行业设计稿到可交互的运行监测中心
前端·ai编程·数据可视化