JavaScript 数组中 Slice 和 Splice 的区别

我最近在写一些简明的 Web 前端开发教程。这篇文章的标题或许应该是“怎么才能不混淆 JavaScript 数组中的 Slice 方法和 Splice 方法”，因为我自己总是记不住这两者的区别。

希望这个解释可以帮我自己理解，也帮到你：

S (p) lice = Slice + (p) => Slice + in (p) lace

Array.prototype.slice()

Array.prototype.slice() 是用于提取一个数组，从  start 元素到 end  元素（不包含 end 元素）。

其实可以从这个方法的名字看出来，它是用于从一个 JavaScript 数组中提取元素。不过和切蛋糕不同，从数组中提取元素不会影响原数组，原数组根本就不会变化（像是切不完的蛋糕！）

arr.slice(start, [end])

要点：

1、返回新数组，而原数组保持不变

2、如果没有指定 end 元素，那么切分的数组包含从 start 到数组结束的所有元素

3、如果  start 元素是负数，那就从数组尾部算起，-1 是指最后一个元素

const infiniteCake = ['🍰','🍰','🍰','🍰','🍰','🍰']

let myPieceOfCake = infiniteCake.slice(0,1) // ['🍰']
let yourDoublePieceOfCake = infiniteCake.slice(0,2) // (2) ["🍰", "🍰"]
console.log(infiniteCake) //['🍰','🍰','🍰','🍰','🍰','🍰']

可以看到，原数组  inifinteCake 保持不变。

Array.prototype.splice()

Splice 方法为原数组添加或者删除元素，返回被删除的元素，也就是说它会改变原数组。

这是真正意义上的“切蛋糕”。

arr.splice(start, [deleteCount, itemToInsert1, itemToInsert2, ...])

要点：

1、返回一个数组，包含被删除的元素

2、如果  start 元素是负数，那就从数组尾部算起，-1 是指最后一个元素

3、如果没有指定 deleteCount，则删除至原数组尾部

4、如果没有指定 itemToInsert1，则不向原数组添加元素

const cake = ['🍰','🍰','🍰','🍰','🍰','🍰'];
let myPieceOfCake = cake.splice(0, 1) // ["🍰"]
console.log(cake) // (5) ["🍰", "🍰", "🍰", "🍰", "🍰"]

let yourDoublePieceOfCake = cake.splice(0,2) //(2) ["🍰", "🍰"]
console.log(cake) //(3) ["🍰", "🍰", "🍰"]

如上， cake 数组被修改了，元素减少了。

代码示例

const myArray  = [1,2,3,4,5,6,7] 

console.log(myArray.slice(0))       // [ 1, 2, 3, 4, 5, 6, 7 ]
console.log(myArray.slice(0, 1))    // [ 1 ]
console.log(myArray.slice(1))       // [ 2, 3, 4, 5, 6, 7 ]
console.log(myArray.slice(5))       // [ 6, 7 ]
console.log(myArray.slice(-1))      // [ 7 ]
console.log(myArray)                // [ 1, 2, 3, 4, 5, 6, 7 ]



const secondArray = [10, 20, 30, 40, 50]

console.log(secondArray.splice(0, 1))   // [ 10 ] : deletes 1 element starting at index 0
console.log(secondArray.splice(-2, 1))  // [ 40 ] : deletes 1 element starting at index end-2 
console.log(secondArray)                // [ 20, 30, 50 ]
console.log(secondArray.splice(0))      // [ 20, 30, 50 ] : deletes all elements starting at index 0
console.log(secondArray)                // []
console.log(secondArray.splice(2, 0, 60, 70)) // [] : deletes 0 elements starting at index 2 (doesn't exist so defaults to 0) and then inserts 60, 70
console.log(secondArray)                // [60, 70]

小结

如果需要改变原数组，或者为原数组增加元素，用 splice。

如果只是删除元素，而不改变原数组，用 slice。

原文：JavaScript Array Slice vs Splice: the Difference Explained with Cake，作者：Shruti Kapoor