slice 与splice_JavaScript Array Slice与Splice：Cake的区别

slice 与splice

This title could have been "how not to get confused between JavaScript's splice and slice," because I can never remember the difference between the two.

这个标题本来可以是“如何在JavaScript的拼接和切片之间不混淆”，因为我永远不记得两者之间的区别。

So I am hoping this trick will help both me and you in the future:

因此，我希望这个技巧将来对我和你都有帮助：

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

Array.prototype.slice() (Array.prototype.slice())

Array.prototype.slice() is used to slice an array from the start point to the end point, excluding the end.

Array.prototype.slice()用于切片从阵列start点到end点，不包括end 。

As the name suggests, it is used to slice elements out of an array. But unlike slicing a cake, slicing an array does not cut the actual array, but keeps it unmodified (infinite cake!).

顾名思义，它用于将元素切出数组。 但是与切片蛋糕不同，切片数组不会剪切实际的数组，而是使其保持不变(无限蛋糕！)。

arr.slice(start, [end])

Rules

规则

1. A new array is returned and the original array is unmodified.
   返回一个新数组，并且原始数组未修改。

2. If end is omitted, end becomes the end (last element) of the array.

   如果end被省略，端成为数组的末尾(最后一个元素)。

3. If start is -ve, the elements are counted from the end.

   如果start为-ve，则从末start计数元素。

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

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

As you see, inifinteCake is unmodified.

如您所见， inifinteCake未修改。

Array.prototype.splice() (Array.prototype.splice())

Splice does operations in place, which means it modifies the exisiting array.

Splice 在适当位置进行操作，这意味着它将修改现有数组。

In addition to removing elements, splice is also used to add elements. Splice is the real world cake "slice":

除了删除元素之外，还可以使用拼接来添加元素。 拼接是现实世界中的蛋糕“切片”：

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

Rules

规则

1. Operations are performed in place.
   操作就地执行。
2. An array is returned with the deleted items.
   返回一个数组，其中包含已删除的项目。

3. If start is -ve, the elements are counted from the end.

   如果start为-ve，则从末start计数元素。

4. If deleteCountis omitted,the elements until the end of the array are removed.

   如果省略deleteCount则删除直到数组末尾的元素。

5. If items to insert such as itemToInsert1 are omitted, elements are only removed.

   如果省略要插入的项目(例如itemToInsert1 ，则仅删除元素。

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

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

Here, cake is modified and reduces in size.

在这里， cake被修改并减小尺寸。

程式码范例 (Code Examples)

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]

TL; DR (TL;DR)

Use splice if the original array needs to be modified, or elements need to be added.

如果需要修改原始数组或需要添加元素，请使用splice 。

Use slice for removing elements if the original array should not be modified.

如果不应修改原始数组，请使用slice删除元素。

---

---

Interested in more tutorials and JSBytes from me? Sign up for my newsletter. or follow me on Twitter

对我的更多教程和JSBytes感兴趣吗？ 订阅我的时事通讯。 或在Twitter上关注我

翻译自: https://www.freecodecamp.org/news/javascript-array-slice-vs-splice-whats-the-difference/

slice 与splice