JS方法splice和slice的区别

在js中对数组进行操作有很多方法,其中有两个功能很强大,并且很常用的对数组的操作的方法:splice() 和 slice(), 下面就说一下这两个方法的区别和功能

  1. splice():这个方法可以通过接收不同的参数,对数组实现增加、删除、替换等操作,注意:虽然给你一个新数组,但是该方法会改变原数组
    语法:
    array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

    语法有点不太好看,直接看代码更好理解:

    例如:

      var numArr = ['1', '3', '4', '5'];
      
      /*增加*/
      // 第一个参数表示数组的索引, 第二个参数为0,则表示在索引为1的位置,插入一个数‘5’
      numArr.splice(1, 0, '5'); 
      console.log(numArr);
      //  output: Array ['1', '2', '3', '4', '5']
      
      /*替换*/
      
      // 第2个参数为1,并且第三个参数存在,则替换索引为3的元素为第三个参数‘6’
      numArr.splice(3, 1, '6');
      console.log(numArr);
      //  output: Array ['1', '2', '3', '6', '5']
    
    
     /*删除*/
     
     // 只有2个参数,并且第二个参数为1,则表示删除索引为第一个参数上的元素
     // 如果第二个元素为2 ,则删除2个元素,以此类推
     numArr.splice(1,1)
     console.log(numArr)
     // output: Array['1', '3', '6', '5']
    
  2. slice(): 该方法可以通过start和end参数,获取到一个新数组,可以视为一个浅拷贝方法,注意:该数据不会改变原数组

语法: arr.slice([begin[, end]])

例子:

 var week = ['mon', 'thes', 'wed', 'thus', 'fri'];
 
 // 如果只有一个参数,那么会直接从该参数的索引截取到数组的结束
 console.log(animals.slice(2));
 // output: Array ["wed", "thus", "fri"]
 
 // 打印原数组,还是没有变化
 console.log(week)	
 // output: Array ['mon', 'thes', 'wed', 'thus', 'fri']
 
 //如果传递的是两个参数,那么会返回该数组的第一个参数的索引到第二个参数的索引的数组(不包含第二个参数 包前不包后)
 console.log(animals.slice(2, 4));
 // expected output: Array ["wed", “thus”]
 
  1. 扩展:

在es6中对数组进行操作的方式还有,mapfilter 等方法,还有其他的常用或者操作数组的技巧,可以一起学习~

你可能感兴趣的:(前端)