js 中数组的 slice 和 splice 方法的区别

感觉每次对数组的方法 slice() 和 splice() 使用总是容易混淆，今天特意做个简洁、明了的记录，供大家参考。

slice() 方法和 splice() 方法都是 js 对数组操作的方法。都可以对数组进行某一部分的截取

1. slice(start,end) 方法

slice() , 返回一个新的数组，此方法可从已有的数组中返回选定的元素。

array.slice(start,end)，
start：是必须的，规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end： 是可选的，规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素

返回值为一个新的数组
原始的数组不会发生改变

该方法的示例如下：

{
  let arr1 = ["a", "b", "c", "d","e"];
  let arr2 = arr1.slice(2)   
  //  从数组下标为2的开始选取，
  //  一直到数组结束的所有元素
  console.log(arr1); 
       // ["a", "b", "c", "d","e"]    原始数组不会改变
  console.log(arr2); 
       // ["c", "d","e"]
}
{
   let arr3 = ["a", "b", "c", "d","e"];
   let arr4 = arr3.slice(2,4)   
   //  从数组下标为2的开始选取，
   //  一直到数组下标为4的结束
   console.log(arr3); 
        // ["a", "b", "c", "d","e"]    原始数组不会改变
   console.log(arr4); 
        // ["c", "d"]
}

2. splice(start,end) 方法

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

array.splice(index,howmany,item1,.....,itemX)，
index：是必须的，整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany： 是必须的，要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX： 是可选的，向数组添加的新项目。

返回值如果有的话，为包含被删除项目的新数组
该方法会改变原始数组

该方法的示例如下：

{
   //删除数组中从第2个下标开始的到最后的所有元素
   let arr1 = ["a", "b", "c", "d","e"];
   let arr2 = arr1.splice(2);
   console.log(arr1); 
        // ["a", "b"]    原始数组被该改变
   console.log(arr2); 
        // ["c", "d", "e"]  
}
{
   //往新数组中添加一个元素"YY"
   let arr3 = ["a", "b", "c", "d","e"];
   let arr4 = arr3.splice(2,0,"YY")  
   //  从数组下标为2的开始，
   //  删除0个元素，
   //  然后用"YY"来替换被删除的0个元素， 
   console.log(arr3); 
        // ["a", "b", "YY","c", "d","e"]    原始数组被该改变
   console.log(arr4); 
        // []  
}
{
   // 将删除3个元素，
   // 并添加2个新元素 ("PP","WW") 来替代被删除的元素
   let arr5 = ["a", "b", "c", "d","e"];
   let arr6 = arr5.splice(1,3,"PP","WW")   
   //  从数组下标为1的开始，
   //  删除3个元素（"b"、"c"、"d"），
   //  然后用（"PP"、"WW"）替换被删除掉的3个元素
   console.log(arr5); 
          // ["a", "PP", "WW","e"]   原始数组被改变
   console.log(arr6); 
          //  ["b", "c", "d"]
}
{
   //删除第2个元素以后的3个数组元素(包含第2个元素)
   let arr7 = ["a", "b", "c", "d","e"];
   let arr8 = arr7.splice(1,3); 
   //  从数组下标为1的开始，
   //  删除3个元素（"b"、"c"、"d")
   console.log(arr7); 
          //  ["a", "e"]   原始数组被改变
   console.log(arr8); 
          //  ["b", "c", "d"]
}

最后编辑于：2019.03.28 15:52:13