JavaScript数组splice和slice的区别

Question

JavaScript数组splice和slice的区别

338

splice和slice有什么区别？

const array = [1, 2, 3, 4, 5];
array.splice(index, 1);
array.slice(index, 1);

- Renat Gatin

1

请检查此答案是否对您有帮助：https://dev59.com/uXI-5IYBdhLWcg3wlpeW - Fábio Luiz

splice() 方法通过向数组添加或删除元素来改变数组，并仅返回已删除的项目。 - Shaik Md N Rasool

1

他们本应该交换名称以表达实际含义，例如说“切块蛋糕” - 意味着要切大蛋糕并分给一部分人。但在现实中，它却恰恰相反，原来的蛋糕完好无损，并且只是切了一片出来，这怎么可能啊，哎呀。 - vikramvi

当你拿到一个三明治时，真正做的是拿到两个面包片，而不是两片面包。这样做会让整个面包变小，感觉不太直观，我知道。 - Dean

20个回答

126

Splice和Slice都是JavaScript数组函数。

Splice与Slice的区别

splice()方法返回一个数组中被移除的元素，而slice()方法则返回选定的元素作为一个新的数组对象。
splice()方法改变原始数组，slice()方法不改变原始数组。
splice()方法可以接受n个参数，而slice()方法只接受两个参数。

使用示例：splice()

参数1: 索引, 必填项。指定要添加/删除项的位置的整数值。使用负值可从数组末尾指定位置。

参数2: 可选项。要删除的项目数量。如果设置为0（零），则不会删除任何项目。如果未传递，则将删除提供的索引之后的所有项目。

参数3…n: 可选项。要添加到数组中的新项。

var array=[1,2,3,4,5];
console.log(array.splice(2));
// shows [3, 4, 5], returned removed item(s) as a new array object.
 
console.log(array);
// shows [1, 2], original array altered.
 
var array2=[6,7,8,9,0];
console.log(array2.splice(2,1));
// shows [8]
 
console.log(array2.splice(2,0));
//shows [] , as no item(s) removed.
 
console.log(array2);
// shows [6,7,9,0]

切片示例

参数 1：必需。一个整数，指定选择的起始位置（第一个元素的索引为 0）。使用负数从数组末尾开始选择。

参数 2：可选。一个整数，指定选择的结束位置但不包括在内。如果省略，则将选择从起始位置到数组末尾的所有元素。使用负数从数组末尾开始选择。

var array=[1,2,3,4,5]
console.log(array.slice(2));
// shows [3, 4, 5], returned selected element(s).
 
console.log(array.slice(-2));
// shows [4, 5], returned selected element(s).
console.log(array);
// shows [1, 2, 3, 4, 5], original array remains intact.
 
var array2=[6,7,8,9,0];
console.log(array2.slice(2,4));
// shows [8, 9]
 
console.log(array2.slice(-2,4));
// shows [9]
 
console.log(array2.slice(-3,-1));
// shows [8, 9]
 
console.log(array2);
// shows [6, 7, 8, 9, 0]

- Gagandeep Gambhir

5

虽然这两个函数执行的任务非常不同，但是与 splice(x,y) 不同的是，在 slice(x,y) 中，第二个参数 y 不是从位置 x 开始计算，而是从数组的第一个元素开始计算。 - Ramesh Pareek

我注意到的另一件事是：如果你使用array.slice((index, count))而不是array.slice(index, count)，你将得到在“切片”后剩余的部分。试试看！ - Ramesh Pareek

编辑队列已满，因此：Splice和Slice都是Javascript数组方法。它们不是独立存在的，它们都是Array.prototype方法。 - tnsaturday

72

S LICE = 返回数组的一部分，但不会将原始数组分割。

SP LICE = 返回数组的一部分，并将原始数组拆分。

个人认为这样更容易记住，因为在Web开发初学者时，这两个术语经常令人困惑。

- vikramvi

18

剪切 -> ctrl+X + ctrl+V 复制 -> ctrl+C - Shankar Nanda

1

太棒了，我永远不会忘记那个。 - mansoureh.hedayat

43

这里有一个简单的技巧可以记住slice和splice之间的区别

Here is a simple trick to remember the difference between slice and splice.

var a=['j','u','r','g','e','n'];

// array.slice(startIndex, endIndex)
a.slice(2,3);
// => ["r"]

//array.splice(startIndex, deleteCount)
a.splice(2,3);
// => ["r","g","e"]

记忆技巧：

把"spl"（splice 的前三个字母）理解为“指定长度”，即第二个参数应该是一个长度而不是索引。

- Sajeetharan

5

这不仅仅涉及参数的指定方式。其中一个函数（splice）会修改原始数组，而另一个则不会。 - Arbiter

2

也可以将splice视为split（生成2个数组）+ slice。 - user7437554

27

slice() 方法将数组的一部分浅拷贝到一个新数组对象中。

$scope.participantForms.slice(index, 1);

这不会改变participantForms数组，而是返回一个新的数组，其中包含原始数组中在index位置找到的单个元素。

splice() 方法通过删除现有元素和/或添加新元素来更改数组的内容。

$scope.participantForms.splice(index, 1);

这将从 participantForms 数组中删除一个位于 index 位置的元素。

这些是 Javascript 原生函数，与 AngularJS 无关。

- Alexander Kravets

有人能给出有帮助的例子，并为每个例子提供理想的解决方案吗？比如，在哪些情况下您更喜欢使用splice或slice？ - petrosmm

2

这个答案部分是错误的。对于 splice，第二个参数是返回数组中元素的数量，但对于 slice，第二个参数是要返回的最后一个元素的索引 +1。slice(index,1) 不一定返回从 index 开始的一个元素的数组。 [1,2,3,4,5].slice(0,1) 返回 [1]，但 [1,2,3,4,5].slice(3,1) 返回 []，因为 1 被解释为 final index +1，所以 final index = 0，但这是在 start index = 3 之前，所以返回空数组。 - BaltoStar

为什么这不是最佳答案？ - JJ Labajo

18

Splice - MDN 参考文档 - ECMA-262 规范

语法
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

参数

start：必选项。起始索引。
如果 start 为负数，则按照规范视作 "Math.max((array.length + start), 0)"（下方提供示例），从 array 的末尾开始计算。
deleteCount：可选项。要删除的元素数量（如果未提供则默认删除从 start 开始的所有元素）。
item1, item2, ...：可选项。要从 start 索引处添加到数组中的元素。

返回值：一个包含已删除元素的数组（如果没有删除任何元素则返回空数组）

原始数组被改变：是

示例：

const array = [1,2,3,4,5];

// Remove first element
console.log('Elements deleted:', array.splice(0, 1), 'mutated array:', array);
// Elements deleted: [ 1 ] mutated array: [ 2, 3, 4, 5 ]

// array = [ 2, 3, 4, 5]
// Remove last element (start -> array.length+start = 3)
console.log('Elements deleted:', array.splice(-1, 1), 'mutated array:', array);
// Elements deleted: [ 5 ] mutated array: [ 2, 3, 4 ]

更多示例请查看MDN Splice examples

Slice - MDN 参考文档 - ECMA-262 规范

语法
array.slice([begin[, end]])
参数

begin：可选。初始索引（默认值为 0）。
如果begin为负数，则根据规范将其视为"Math.max((array.length + begin), 0)"，从array的末尾有效地提取（下面提供了示例）。
end：可选。提取但不包括的最后一个索引（默认值为 array.length）。如果end为负数，则按照规范将其视为"Math.max((array.length + begin),0)"，从array的末尾有效地提取（下面提供了示例）。

返回值：包含提取元素的数组。

原始数组是否被修改：否

示例：

const array = [1,2,3,4,5];

// Extract first element
console.log('Elements extracted:', array.slice(0, 1), 'array:', array);
// Elements extracted: [ 1 ] array: [ 1, 2, 3, 4, 5 ]

// Extract last element (start -> array.length+start = 4)
console.log('Elements extracted:', array.slice(-1), 'array:', array);
// Elements extracted: [ 5 ] array: [ 1, 2, 3, 4, 5 ]

更多示例请参考MDN Slice 示例

性能比较

不要将此视为绝对真理，因为根据每种场景，一个可能比另一个表现更好。
性能测试

- taguenizy

18

splice() 方法返回从数组中移除的元素列表。

slice() 方法以一个新的数组对象的形式返回所选的元素（或元素子集），并不改变原始数组。

splice() 方法可以接受n个参数：

参数1：索引，必需。

参数2：可选。要移除的元素数量。如果设置为0（零），则不删除任何元素。如果未传递，则将从所提供的索引开始删除所有项目。

参数3..n：可选。要添加到数组中的新项目。
slice() 方法可以接受2个参数：

参数1：必需。一个整数，指定从哪里开始选择（第一个元素的索引为0）。使用负数从数组末尾进行选择。

参数2：可选。一个整数，指定选择的结束位置。如果省略，则将选择从起始位置到数组的末尾的所有元素。使用负数从数组末尾进行选择。

- Ranjith Ayyadurai

根据文档 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice，slice 方法不需要参数。 - cikatomo

13

Splice和Slice是内置的Javascript命令，不是特定于AngularJS的命令。Slice返回从“start”到“end”指定器之前的数组元素。Splice改变了实际的数组，并从“start”开始保留指定数量的元素。Google上有很多信息，只需要搜索即可。

- Matt Runion

3

Splice删除指定数量的元素，然后插入任何后续的参数。 - Josiah Keller

splice从给定的起始索引删除给定数量的元素，例如splice(4,1);从索引4开始删除一个元素，而splice(4,3);从索引4开始删除三个元素。然后在删除它们之后，它返回已删除的值。 - briancollins081

8

两者返回相同的答案，但：

SPlice 会改变您的原始数组。
Slice 不会改变您的原始数组。

- AmerllicA

1

它们实际上并不返回相同的内容！ [0,1,2,3].splice(1,1) 修改了数组，从索引1（第一个参数）开始删除1个项目（第二个参数），并返回已删除的元素（在本例中为[1]），而[0,1,2,3].slice(1,1)则复制了该数组，从索引1（第一个参数）开始，并在索引1（第二个参数）处停止，然后返回该数组，这在本例中是一个空数组[]。因此，它们并不都返回相同的内容。 - mockingjay

@mockingjay，因为splice是一种变异方法，所以它的返回值显然不同于slice。 - AmerllicA

8

大多数答案都过于冗长。

splice和slice返回数组中剩余的元素。

splice会改变被操作的数组并删除元素，而slice不会。

- Soner from The Ottoman Empire

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Thalaivar · Accepted Answer

splice() 会改变原始数组，而 slice() 不会，但两者都会返回数组对象。

请参见下面的示例：

var array=[1,2,3,4,5];
console.log(array.splice(2));

这将返回 [3,4,5]。原始数组会受到影响，导致 array 变成了 [1,2]。

var array=[1,2,3,4,5]
console.log(array.slice(2));

这将返回[3,4,5]。 原始数组不受影响，导致array为[1,2,3,4,5]。

下面是一个简单的示例，证实了这一点:

//splice
var array=[1,2,3,4,5];
console.log(array.splice(2));

//slice
var array2=[1,2,3,4,5]
console.log(array2.slice(2));


console.log("----after-----");
console.log(array);
console.log(array2);