JAVASCRIPT引用类型之Array类型（三）

淡淡的烟草味﹌ 2022-02-27 05:52 263阅读 0赞

## Array类型 ##

ECMAScript为操作已经包含在数组中的项提供了很多方法。

### concat() 方法 ###

concat() 方法可以基于当前数组中的所有项创建一个新数组。具体来说，这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给concat() 方法传递参数的情况下，它只是复制当前数组并返回副本。如果传递给concat() 方法的是一或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中。如果传递的值不是数组，这些值就会被简单地添加到结果数组的末尾。如下：

var colors = ["red", "green", "blue"];
    var colors2 = colors.concat();
    alert("colors -> " + colors);                                   //colors -> red,green,blue
    alert("colors2 -> " + colors2);                                 //colors2 -> red,green,blue
    
    var colors3 = colors.concat("yellow");
    alert("colors -> " + colors);                                   //colors -> red,green,blue
    alert("colors3 -> " + colors3);                                 //colors3 -> red,green,blue,yellow
    
    var colors4 = colors.concat(["black", "brown"]);
    alert("colors -> " + colors);                                   //colors -> red,green,blue
    alert("colors4 -> " + colors4);                                 //colors4 -> red,green,blue,black,brown
    
    var colors5 = colors.concat("yellow", ["black", "brown"]);
    alert("colors -> " + colors);                                   //colors -> red,green,blue
    alert("colors5 -> " + colors5);                                 //colors5 -> red,green,blue,yellow,black,brown
    
    var colors6 = colors.concat("yellow", 6);
    alert("colors -> " + colors);                                   //colors -> red,green,blue
    alert("colors6 -> " + colors6);                                 //colors6 -> red,green,blue,yellow,6

以上代码开始定义了一个包含3个值的数组colors。 然后，基于colors调用了concat()方法，通过往concat()方法中传入不同的参数得到不同的返回结果， **但是原数组colors的值没有改变**。

### slice() 方法 ###

下一个方法是slice() 方法，它能够基于当前数组中一或多个项创建一个新数组。slice() 方法可以接收一个或两个参数，即要返回项的起始位置和结束位置。在只有一个参数的情况下，slice() 方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项--但不包括结束位置的项（类似于数学中的前闭后开 \[1,5) ）。注意，**slice()方法不会影响原始数组**。如下：

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

### splice() 方法 ###

splice()方法是要算是最强大数组方法了， 它有很多种用法，splice()的主要用途是想数组中部插入项，但使用这种方法的方式则有如下3种：

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

**插入：**可以向指定位置插入任意数量的项，只需提供3个参数：起始位置， 0（要删除的项数）和要插入的项。如果要插入多个项，可以在传入第四，第五，以至于任意多个项。例如，splice(2, 0, "red", "green")会从当前数组的位置2开始并插入字符串“red”和“green”.

**替换：**可以向指定位置插入任意数量的项，且同事删除任意数量的项，只需要指定3个参数：起始位置，要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice(2, 1, "red", "green")会删除当前数组位置2的项，然后再从位置2开始插入字符串“ren” 和 “green”。

splice()方法始终都会返回一个数组，该数组中包含从原始数组中删除的项（如果没有删除任何想，则返回一个空数组）。如下演示：

var colors = ["red", "green", "blue", "yellow", "purple"];
    alert(colors);                                      //red,green,blue,yellow,purple
    //删除
    var colors2 = colors.splice(2, 1);
    alert("colors -> " + colors);                      //colors -> red,green,yellow,purple
    alert(typeof colors2);                              //object
    alert("colors2 -> " + colors2);                   //colors2 -> blue
    
    colors = ["red", "green", "blue", "yellow", "purple"];
    alert(colors);                                      //red,green,blue,yellow,purple
    //插入
    var colors3 = colors.splice(2, 0, "black", "pink");
    alert("colors -> " + colors);                      //colors -> red,green,black,pink,blue,yellow,purple
    alert(typeof colors3);                              //object
    alert("colors3 -> " + colors3);                    //colors3 ->
    
    colors = ["red", "green", "blue", "yellow", "purple"];
    alert(colors);                                      //red,green,blue,yellow,purple
    //替換
    var colors4 = colors.splice(2, 1, "black", "pink");
    alert("colors -> " + colors);                      //ccolors -> red,green,black,pink,yellow,purple
    alert(typeof colors4);                              //object
    alert("colors4 -> " + colors4);                    //colors4 -> blue

通过上述可以知道splice()方法的用法， 但是需要注意的是： **splice()方法会修改原来的数组**；

**总结： concat()方法和slice()方法是在原来数组的副本上进行操作， 而splice()方法则是针对原数组进行操作， 所以concat() 和 slice() 方法不会修改原数组的值， 而splice() 方法则会修改原数组的值。**