(超详细)数组方法 ——— 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"]
相关推荐
To_OC3 小时前
别再串行写 await 了,Promise.all 才是并行请求的正确打开方式
前端·javascript·promise
To_OC3 小时前
LC 17 电话号码的字母组合:我的回溯算法,就是从这道题开窍的
javascript·算法·leetcode
vipbic4 小时前
中后台越做越乱后,我用插件化把它救回来了
前端·vue.js
Hyyy4 小时前
Computer Use 适合做什么,不适合做什么——一次真实使用后的思考
前端
小和尚同志4 小时前
前端 AI 单元测试思考与落地
前端·人工智能·aigc
invicinble5 小时前
c端系统,其实更像一个信息展示平台
前端
你怎么知道我是队长6 小时前
JavaScript的变量和数据类型介绍
开发语言·javascript·ecmascript
李姆斯6 小时前
管理是否可以被完全量化
前端·产品经理·团队管理
名字还没想好☜7 小时前
Next.js 中间件实战:鉴权、重定向与 A/B 分流
开发语言·前端·javascript·中间件·react·next.js
广州灵眸科技有限公司7 小时前
瑞芯微RV1126B开发板(EASY-EAI-PI2) INI文件操作
java·前端·javascript·网络·人工智能