slice和splice区别

slice

• 基于当前数组中的一或多个项创建一个新数组
• 可以接受一或两个参数，即要返回项的起始和结束位置,但不包括结束位置
• 在只有一个参数的情况下，返回从该参数指定位置开始到当前数组末尾的所有项
• 不会影响原始数组

  var colors = ["red", "green", "blue", "yellow", "purple"];
  var colors2 = colors.slice(1);
  var colors3 = colors.slice(1,4);
  
  console.log(colors); // ["red", "green", "blue", "yellow", "purple"]
  console.log(colors2); // ["green","blue","yellow","purple"]
  console.log(colors3); // ["green","blue","yellow"]

如果参数中有一个负数，则用数组长度加上该数来确定相应的位置。例如，在一个包含5项的数组上调用 slice(-2,-1)与调用 slice(3,4)得到的结果相同。如果结束位置小于起始位置，则返回空数组。

---

splice

• 主要用途是向数组的中部插入元素
• 会影响原始数组

删除

要实现 splice 的删除功能，最多只能传两个参数

一个参数

删除从参数位置到当前数组末尾的所有项

var colors = ["red", "green", "blue", "black"];
var spliceColors = colors.splice(0)

console.log(colors) // []
console.log(spliceColors) // ["red", "green", "blue", "black"]

两个参数

起始位置和要删除元素的数量

var colors = ["red", "green", "blue", "black"];
var spliceColors = colors.splice(0,2)

console.log(colors) // ["blue", "black"]
console.log(spliceColors) // ["red", "green"]

插入

要实现 splice 的插入功能，至少传3个参数：起始位置、0（要删除元素的数量）和要插入的元素。如果要插入多个元素，可以再传入第四、第五，以至任意多个元素

var colors = ["red", "green", "blue", "black"];
var spliceColors = colors.splice(1,0,'yellow','white')

console.log(colors) // ["red", "yellow", "white", "green", "blue", "black"]
console.log(spliceColors) // []

替换

splice 可以向指定位置插入任意数量的项，且同时删除任意数量的项。要实现 splice 的替换功能，只需指定3个参数：起始位置、要删除元素的数量和要插入的元素。插入的项数不必与删除的项数相等

var colors = ["red", "green", "blue", "black"];
var spliceColors = colors.splice(1,2,'yellow','white')

console.log(colors) // ["red", "yellow", "white", "black"]
console.log(spliceColors) // ["green", "blue"]