小结concat()、slice()、splice()操作方法

分手后的思念是犯贱 2022-08-07 04:57 167阅读 0赞

今天继续来总结一下ECMAscript为操作已经包含在数组中的项提供了很多方法。第一个先讲concat()方法。

这个方法可以理解为一种合并。concat()方法的具体用法是：**它可以创建当前数组的一个副本，然后将接受到的参数添加到这个副本的末尾，最后返回新构建的数组。**这里又分三种情况。（1）在没有给concat()方法传递参数的情况下，它只是复制当前数组并返回副本。（2）如果传递给concat()方法的是一或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中。（3）如果传递的值不是数组，这些值就会被简单地添加到结果数组的末尾。

var colors=["red","green","blue"];
    var colors2=colors.concat("yellow",["black","brown"]);
    
    alert(colors);
    alert(colors2);

分析一下，以上代码开始定义了一个包含3个值的数组colors。然后，基于colors调用了concat()方法，并传入字符串“yellow”和一个包含"black"和"brown"的数组。最终，结果数组colors2中包含了"red"、"green"、"blue"、"yellow"、"black"和"brown"。 **至于原来的数组colors，其值仍然保持不变。注意：concat()方法是在数组的副本上进行操作并返回新构建的数组，所以并不会影响到原来的数组。**

**       ** 第二个方法是slice()，**它能够基于当前数组中的一个或多个项创建一个新数组。**slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。这里又产生了两种情况：（1）**在只有一个参数的情况下，slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。（2）如果有两个参数，该方法返回起始和结束位置之间的项，注意但不包括结束位置的项。同时还要注意的是，slice()方法不会影响到原始数组，因为它是基于当前数组中的一个或多个项创建的一个新数组。****        **

var colors=["red","green","blue","yellow","purple"];
    var colors2=colors.slice(1);
    var colors3=colors.slice(1,4);
    
    alert(colors2);  //green,blue,yellow,purple
    alert(colors3);  //green,blue,yellow

**注意：如果slice()方法的参数中有一个负数，则用数组长度加上该数来确定相应的位置。如，在一个包含5项的数组上调用slice(-2,-1)与调用slice(3,4)得到的结果相同。如果结束位置小于起始位置，则返回空数组。**

**       ** 最后来介绍splice()方法，这个方法恐怕要算是最强大的数组方法了，它有很多种用法。splice()的主要用途是向数组的中部插入项，但使用这种方法的方式则有如下3种：

（1）删除：可以删除任意数量的项，只需指定2个参数：要删除的第一项的位置和要删除的项数。例如，splice(0,2)会删除数组中的前两项。

（2）插入：可以向指定位置插入任意数量的项，只需提供3个参数：起始位置、0（要删除的项数）和要插入的项。如

splice(2,0,"red","green")

会从当前数组的位置2开始插入字符串"red"和"green"。

（3）替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定3个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如

splice(2,1,"red","green")

会删除当前数组位置2的项，然后再从位置2开始插入字符串"red"和"green"。

**注意：splice()方法始终都会返回一个数组，该数组中包含从原始数组中删除的项（如果没有删除任何项，则返回一个空数组）。**下面的代码展示了上述3种使用splice()方法的方式。

第一种：删除第一项

var colors=["red","green","blue"];
    var removed=colors.splice(0,1);
    alert(colors);      //green,blue
    alert(removed);   //red，返回的数组中只包含一项

第二种：从位置1开始插入两项

<span style="font-size:18px;">removed=colors.splice(1,0,"yellow","orange");
    alert(colors);    //green,yellow,orange,blue
    alert(removed);   //返回的是一个空数组</span>

第三种：插入两项，删除一项

removed=colors.splice(1,1,"red","purple");
    alert(colors);
    alert(removed);