拼接和切片的区别是什么?

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

Splice和Slice是内置的Javascript命令,而不是特定的AngularJS命令。Slice返回从“start”到“end”说明符之前的数组元素。Splice改变实际的数组,从“start”开始,并保持指定的元素数量。谷歌有很多这方面的信息,只要搜索。


slice()方法将数组部分的副本返回到新的数组对象中。

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

这不会改变participantForms数组,而是返回一个包含原始数组中索引位置上的单个元素的新数组。

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

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

这将在索引位置从participantForms数组中删除一个元素。

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


Splice()改变原始数组,而slice()不会,但它们都返回数组对象。

请看下面的例子:

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

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

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

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

下面是简单的小提琴,它证实了这一点:

/ /拼接 数组var =[1、2、3、4、5); console.log (array.splice (2)); / /片 var array2 =[1、2、3、4、5) console.log (array2.slice (2)); console.log(“——后——”); console.log(数组); console.log (array2);


Splice和Slice都是Javascript数组函数。

拼接与切片

splice()方法返回数组中被删除的元素,slice()方法返回数组中被选择的元素,作为一个新的数组对象。 splice()方法改变原始数组,slice()方法不改变原始数组。 splice()方法可以接受n个参数,slice()方法可以接受2个参数。

实例拼接

参数1:索引,必需的。指定在什么位置添加/删除项的整数。使用负值指定从数组末尾开始的位置。

论据2:可选。要删除的项的数目。如果设置为0(零),则不会删除任何项。如果没有通过,则从所提供的索引中删除所有项。

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

数组var =[1、2、3、4、5); console.log (array.splice (2)); //显示[3,4,5],作为一个新的数组对象返回已删除的项。 console.log(数组); //显示[1,2],原始数组改变。 var array2 = [6 7 8 9 0]; console.log (array2.splice (2,1)); //显示[8] console.log (array2.splice (2,0)); //显示[],表示没有删除任何项。 console.log (array2); //显示[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]


拼接- MDN参考- ECMA-262规范

语法 数组中。拼接(item1[[开始,deleteCount[第二条 [, ...]]]])

参数

开始:必需的。初始索引。 如果start为负,则将其视为“Math.max((数组。长度+ start), 0)”,按照规范(下面提供的示例)有效地从数组的末尾开始。 deleteCount:可选的。要删除的元素数量(如果没有提供,则全部从开始删除)。 Item1, item2,…:可选的。要从起始索引添加到数组的元素。

返回:删除元素的数组(如果没有删除则为空数组)

改变原始数组:是的

例子:

Const数组= [1,2,3,4,5]; //删除第一个元素 console.log('已删除的元素:',数组。Splice(0,1), '突变数组:',数组); //元素删除:[1]mutated array: [2,3,4,5] // array = [2,3,4,5] //删除最后一个元素start ->数组。长度+起始= 3) console.log('已删除的元素:',数组。Splice(- 1,1), '突变数组:',数组); //元素删除:[5]mutated array: [2,3,4]

更多的例子在MDN拼接的例子


切片- MDN参考- ECMA-262规范

语法 数组中。片([[,]]开始) 参数

开始:可选的。初始索引(默认为0)。 如果begin为负数,则将其处理为“Math.max((数组。长度+ begin), 0)”按照规范(下面提供的示例)有效地从数组的末尾开始。 结束:可选的。抽取的最后一个索引,但不包括(default array.length)。如果end为负数,则将其处理为“Math.max((数组。长度+ begin),0)”按照规范(下面提供的示例)有效地从数组的末尾开始。

返回:包含已提取元素的数组。

突变原:没有

例子:

Const数组= [1,2,3,4,5]; //提取第一个元素 console.log('提取的元素:',数组。Slice (0,1), 'array:', array); //元素提取:[1]array: [1,2,3,4,5] //提取最后一个元素start ->数组。长度+起始= 4) console.log('提取的元素:',array.slice(-1), 'array:', array); //元素提取:[5]array: [1,2,3,4,5]

更多的例子在MDN切片的例子

性能比较

不要认为这是绝对的真理,因为根据不同的场景,一个可能比另一个表现更好。 性能测试


按索引拼接和删除数组项

指数= 2

//splice & will modify the origin array
const arr1 = [1,2,3,4,5];
//slice & won't modify the origin array
const arr2 = [1,2,3,4,5]

console.log("----before-----");
console.log(arr1.splice(2, 1));
console.log(arr2.slice(2, 1));

console.log("----after-----");
console.log(arr1);
console.log(arr2);

Let log = console.log; //splice &将修改原始数组 Const arr1 = [1,2,3,4,5]; //slice &不会修改原始数组 Const arr2 = [1,2,3,4,5] 日志(前”————“); 日志(arr1。接头(2,1)); 日志(arr2。片(2,1)); 日志(”——后——”); 日志(arr1); 日志(arr2);


/ /拼接 数组var =[1、2、3、4、5); console.log (array.splice (2)); / /片 var array2 =[1、2、3、4、5) console.log (array2.slice (2)); console.log(“——后——”); console.log(数组); console.log (array2);


这里有一个简单的技巧来记住切片和拼接之间的区别

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的前3个字母)视为“指定长度”的缩写,即第二个参数应该是长度而不是索引


JavaScript数组拼接()方法示例

从索引1中删除2个元素

var arr =“1”,“2”,“三”、“四”、“5”、“6”、“7”、“八”,“九”,“十”); arr.splice(1、2); Console.log (arr);

例2通过tutsmake从索引0 JavaScript中添加新元素

var arr =“1”,“2”,“三”、“四”、“5”、“6”、“7”、“八”,“九”,“十”); arr.splice (0, 0, 0); Console.log (arr);

示例3:在数组JavaScript中添加和删除元素

var months = ['Jan', 'March', 'April', 'June']; 个月。splice(1,0, 'Feb');//添加索引1 console.log(个月); 个月。splice(4,1, 'May');//替换索引4的1个元素 console.log(个月);

https://www.tutsmake.com/javascript-array-splice-method-by-example/


另一个例子:

[2,4,8].splice(1, 2) -> returns [4, 8], original array is [2]

[2,4,8].slice(1, 2) -> returns 4, original array is [2,4,8]

Slice()和Splice() javascript内置函数之间的区别是, Slice返回删除的项,但没有改变原始数组; 就像,

        // (original Array)
        let array=[1,2,3,4,5] 
        let index= array.indexOf(4)
         // index=3
        let result=array.slice(index)
        // result=4  
        // after slicing=>  array =[1,2,3,4,5]  (same as original array)

但在splice()情况下,它会影响原始数组;就像,

         // (original Array)
        let array=[1,2,3,4,5] 
        let index= array.indexOf(4)
         // index=3
        let result=array.splice(index)
        // result=[4,5]  
        // after splicing array =[1,2,3]  (splicing affects original array)

切片不改变原始数组,它返回新的数组,但拼接改变原始数组。

example: var arr = [1,2,3,4,5,6,7,8];
         arr.slice(1,3); // output [2,3] and original array remain same.
         arr.splice(1,3); // output [2,3,4] and original array changed to [1,5,6,7,8].

拼接方法的第二个参数不同于切片方法。在拼接中,第二个参数表示要删除的元素的计数,在切片中,它表示结束索引。

arr.splice(-3,-1); // output [] second argument value should be greater then 
0.
arr.splice(-3,-1); // output [6,7] index in minus represent start from last.

-1代表最后一个元素,从-3到-1。 以上是拼接法与切片法的主要区别。


splice()方法返回数组中已删除的项。 slice()方法将数组中所选的元素作为一个新的数组对象返回。

splice()方法改变原始数组,slice()方法不改变原始数组。

Splice() method can take n number of arguments: Argument 1: Index, Required. Argument 2: Optional. The number of items to be removed. If set to 0(zero), no items will be removed. And if not passed, all item(s) from provided index will be removed. Argument 3..n: Optional. The new item(s) to be added to the array. slice() method can take 2 arguments: Argument 1: Required. An integer that specifies where to start the selection (The first element has an index of 0). Use negative numbers to select from the end of an array. Argument 2: Optional. An integer that specifies where to end the selection. If omitted, all elements from the start position and to the end of the array will be selected. Use negative numbers to select from the end of an array.


大多数答案都太啰嗦了。

拼接和切片返回数组中其余的元素。 拼接使被操作的数组发生突变,删除元素,而切片没有。


S LICE =给出数组的一部分&没有分裂原始数组

SP LICE =给出数组的一部分&分裂原始数组

我个人觉得这更容易记住,因为这两个术语总是让我这个网页开发初学者感到困惑。


两者都返回相同的答案,但是:

SPlice将改变原始数组。 Slice不会改变原始数组。


slice()方法复制数组的给定部分,并将复制的部分作为一个新数组返回。它不会改变原始数组。

splice()方法通过向数组中添加或删除元素来更改数组。

下面是切片语法:

array.slice(from, until);

// example
let array = [1, 2, 3, 4, 5, 6]
let newArray = array.slice(1, 3)
console.log({array, newArray})

// output: array: [1, 2, 3, 4, 5, 6], newArray: [2, 3]

注意:Slice()方法也可以用于字符串。

下面是拼接的语法:

//For removing elements, we need to give the index parameter,
// and the number of elements to be removed

array.splice(index, number of elements to be removed);


//example
let array = [1, 2, 3, 4, 5, 6]
let newArray = array.splice(1, 3)
console.log({array, newArray})

// output: array: [1, 5, 6], newArray: [2, 3, 4]

注意:如果不定义第二个形参,则从给定索引开始的每个元素都将从数组中删除

// For adding elements, we need to give them as the 3rd, 4th, ... parameter
array.splice(index, number of elements to be removed, element, element);

//example
let array = [1, 2, 3, 4, 5, 6]
let newArray = array.splice(1, 3, 'a', 'b')
console.log({array, newArray})

// output: array: [1, ,'a', 'b', 5, 6], newArray: [2, 3, 4]

相关链接:

让我们来澄清JavaScript中slice()、splice()和split()方法的混淆

Array.prototype.slice ()

Array.prototype.splice ()


切片和拼接紧密相连,但用途却截然不同:

slice函数用于选择数组的一部分。它的目的是返回值。它的执行并不影响它的主题。

splice函数用于从数组中删除元素。它的目的是修饰它的主题。如果需要,它仍然返回已删除项的副本,以供参考。


有3个不同点:

Splice将从原始数组中删除所选元素,并将它们作为一个新数组返回-请注意,原始数组将不再拥有它们-。Slice将使用所选元素创建一个新数组,而不会影响原来的数组。 Splice接收起始索引和从该点移除多少元素作为参数。Slice接收2个索引,开始和结束。 Splice可用于通过传递可选参数在数组中的特定位置添加元素。


这两种方法对初学者来说很容易混淆。我研究了slice和splice的4个关键点。你可以阅读更多关于切片和拼接的细节。

JavaScript切片

Slice只是从数组中返回指定数量的元素。例如,你有一个包含10个元素的数组,你只想从第二个下标中获取3个元素。 它不修改原始数组,而是返回元素的数量。 slice的语法是array。片(startingIndex elementCount)

在JavaScript中拼接

Splice还可以从与切片相同的数组中返回所选元素,但它会修改原始数组。 您可以在特定索引上使用拼接在数组中添加新元素 您可以同时删除指定的元素以及添加新元素。 使用splice的语法是array。splice(startingIndex, removeCounter, newElement(s)[optional])

总结

切片的目的是只从数组中获取选定的元素,而不修改原始数组。 当您希望通过删除元素和添加新元素来修改原始数组时,应该使用拼接。