数组的学习

Posted 2020-10-21 Love馨蕊

5.2 Array类型

创建数组的基本方式有两种：

方式一：使用Array构造函数(new操作符也可省略不写)。

1     var colors = new Array();  //创建一个空数组
2     var colors = new Array(20); //创建一个length值为20的数组
3     var colors = new Array("red","black","blue","pinl"); //创建一个包含3个字符串的数组
4     console.log(colors);

 方式二：使用数组字面量表示法。

1     var colors = ["green","blue","pink"];  //创建一个包含3个字符串的数组
2     var names = [];//创建一个空数组
3     console.log(colors);
4     console.log(names);

    var group = [{name: "lily", age: 18}, {name: "sam", age: 20}]; //创建包含两个对象的数组。
    mgroup();
    function mgroup() {
        for (var i = 0; i < group.length; i++) {
            console.log(group[i]);
        }
    }

 

 数组之：索引和length

 数组之索引：

     var colors = ["green", "blue", "pink"];
     colors[3] = "brown";  //索引值超过数组现有项数，数组就会自动增加到该索引值加1的长度（比如该示例中：索引是3，因此数组长度就是4）
     colors[7] = "red"; //索引是7 数组是8
     console.log(colors);

数组之length:

    //当length属性值小于数组项数时：移除
    var colors = ["green", "blue", "pink"];//创建一个包含3个字符串的数组
    colors.length = 2;  //length属性设置为2(小于数组项数)会移除最后一项（位置为2的那一项），再访问colors[2]就会显示undefined
    console.log(colors);
    console.log(colors[2]);

    //当length属性值大于数组项数时：新增
    var colors = ["green", "blue", "pink"];//创建一个包含3个字符串的数组
    colors.length = 4;  //length属性设置为4(大于数组项数)，则新增的每一项会取得undefined值
    console.log(colors);
    console.log(colors[3]); //undefined


    //利用length属性在数组末尾添加新项
    var colors = ["green", "blue", "pink"];//创建一个包含3个字符串的数组
    colors[colors.length] = "red"; //在位置3添加一种颜色
    colors[colors.length] = "black";//在位置4再添加一种颜色
    console.log(colors);    //(5) ["green", "blue", "pink", "red", "black"]

由于数组最后一项的索引值始终是length-1，因此下一个新项的位置就是length。每当在数组末尾添加一项后，其length属性都会自动更新以反应这一变化。

 

5.2.1 检测数组

方法有二分别为：

   // instanceof操作符的问题在于：假定只有一个全局执行环境
    if (colors instanceof Array) {
        console.log("Yes,array");
    }

    //ECMAscript5新增Array.isArray()方法。这个方法的目的是最终确定某个值到底是不是数组，而不管他是在哪个全局执行环境中创建的。
    if (Array.isArray(colors)) {
        console.log("is array");
    }

 

5.2.3 栈方法

push()方法可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后的数组长度。

     var colors = new Array();  //创建一个数组
     var count = colors.push("red", "black", "green");  //推入三项
     console.log(colors);
 
     count = colors.push("blue");    //推入另一项
     console.log(colors);

pop()方法则从数组末尾移除最后一项，减少数组的length值，然后返回移除的项。

     var item = colors.pop(); //取得最后一项
     console.log("数组最后一项的值为：" + item);
     console.log(colors);

 

5.2.6 操作方法

concat()方法可以基于当前数组中的所有项创建一个新数组。具体来说，这个方法会创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给concat方法传递参数的情况下，它只是复制当前数组并返回副本。

    var colors = ["red","blue"];
    var colors2 = colors.concat("green","black",["pink","brown"]);
    console.log(colors2);

 slice()方法，它能够基于当前数组中的一或多个项创建一个新数组。slice()方法可以接受一或是二个参数，即要返回项的起始和结束位置。注意slice()方法不会影响原始数组。

• 一个参数：slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。
• 二个参数：slice()方法则返回起始和结束位置之间的项-但不包括结束位置的项

    var colors = ["orange", "blue", "green", "black", "pink", "white", "brown"];
    var colors2 = colors.slice(1);  //接受一个参数
    var colors3 = colors.slice(1, 5); //接受二个参数
    console.log(colors2);
    console.log(colors3);

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

• 删除：可以删除任意数量的项，只需指定2个参数：要删除的第一项的位置和要删除的项数。例如：splice(0,2)会删除数组中的前两项。
• 插入：可以向指定位置插入任意数量的项，只需提供三个参数：起始位置、0(要删除的项数)和要插入的项(任意多个项)。
• 替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定3个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。

    //删除
    var colors = ["red", "orange", "blue"];
    var removed = colors.splice(0, 1); //删除第一项
    console.log(colors);   //(2) ["orange", "blue"]
    console.log(removed); //["red"]  返回的数组中只包含一项

    //插入
    var removed = colors.splice(1, 0, "pink", "white"); //从位置1开始插入两项
    console.log(colors);  //(4) ["orange", "pink", "white", "blue"]
    console.log(removed); //返回的是一个空数组
    
    //替换
    var removed = colors.splice(1, 1, "purple", "black");  //插入两项，删除一项（pink）
    console.log(colors);    // ["orange", "purple", "black", "white", "blue"]
    console.log(removed);   //["pink"] 返回的数组中只包含一项