JavaScript阵列拼接与切片

2020/10/14 21:01 · javascript ·  · 0评论

splice之间有什么区别slice

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

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);

Splice和Slice都是Javascript Array函数。

拼接与切片

  1. splice()方法返回数组中已删除的项目,slice()方法返回数组中选定的元素作为新的数组对象。

  2. splice()方法更改原始数组,而slice()方法不更改原始数组。

  3. splice()方法可以接受n个参数,而slice()方法可以接受2个参数。

拼接示例

参数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]

这是记住slicevs与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"]

Trick to remember:

认为是"spl" (first 3 letters of splice)“指定长度”的缩写,第二个参数应该是长度而不是索引

所述切片()方法返回的阵列的一部分的副本到一个新的数组对象。

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

这并改变participantForms阵列,但返回包含在找到的单个元素的新阵列index的原始数组中的位置。

拼接()方法改变阵列的通过去除现有元件和/或添加新元素的内容。

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

这将从participantFormsindex位置数组中删除一个元素

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

接头- 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示例中的更多示例


切片- 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示例中的更多示例

性能比较

不要将此视为绝对真理,因为根据每种情况,一个可能比另一个更出色。
性能测试

Splice和Slice是内置的Javascript命令-尤其不是AngularJS命令。Slice从“开始”直到“结束”说明符之前返回数组元素。拼接会更改实际数组,并从“开始”开始,并保留指定的元素数。Google对此有很多信息,只需搜索即可。

splice()方法以数组形式返回已删除的项目。slice()方法以新的数组对象的形式返回数组中选定的元素。

splice()方法改变原始阵列和slice()方法不改变原来的阵列。

  • Splice() 方法可以接受n个参数:

    参数1:索引,必填。

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

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

  • slice() 方法可以使用2个参数:

    参数1:必填。一个整数,指定从何处开始选择(第一个元素的索引为0)。使用负数从数组末尾选择。

    参数2:可选。一个整数,指定结束选择的位置。如果省略,将选择从数组的开始位置到数组结尾的所有元素。使用负数从数组末尾选择。

按索引拼接和删除数组项

指数= 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 & 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]

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

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

在此处输入图片说明

小号LICE =给出阵列&的一部分NO分裂原数组

SP LICE =提供部分阵列并SP清除原始阵列

我个人觉得这很容易记住,因为这两个词总是让我作为Web开发的初学者感到困惑。

另一个例子:

[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不会更改原始数组,而是返回新数组,但是拼接会更改原始数组。

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开始。以上是拼接和切片方法之间的主要区别。

大多数答案过于罗word。

  • spliceslice返回数组中其余的元素。
  • spliceslice删除元素的情况下使正在操作的数组发生变化

在此处输入图片说明

//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);

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  
        // after splicing array =[1,2,3,5]  (splicing affects original array)

JavaScript Array splice()方法示例

通过tutsmake的Example1-从索引1中删除2个元素

  var arr = [ "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten" ]; 

 arr.splice(1,2);

 console.log( arr ); 

Example-2通过tutsmake –从索引0 JavaScript添加新元素

  var arr = [ "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten" ]; 

 arr.splice(0,0,"zero");

 console.log( arr );  

tutsmake的Example-3 –在数组JavaScript中添加和删除元素

var months = ['Jan', 'March', 'April', 'June'];

months.splice(1, 0, 'Feb'); // add at index 1

console.log(months); 

months.splice(4, 1, 'May'); // replaces 1 element at index 4

console.log(months);

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

本文地址:http://javascript.askforanswer.com/javascriptzhenliepinjieyuqiepian.html
文章标签:
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!