Js数组Array的特点以及操作方法

js的数组的每个位置可以保存任意类型的数据。

1. Array创建的方式

创建数组的方式如下：

1. new Array()
2. new Array(长度)
3. new Array(元素，元素，……)
4. 字面量[元素，元素，……]

    //创建一个长度为3，元素为"one","two","three"的数组
    var arr = new Array();
    arr[0] = "one";
    arr[1] = "two";
    arr[2] = "three";

    var arr1 = new Array(3);//3会被自动赋值给Array的length属性
    arr1[0] = "one";
    arr1[1] = "two";
    arr1[2] = "three";

    var arr2 = new Array("one","two","three");

    var arr3 = ["one","two","three"];//字面量创建数组的方式

2. Array赋值和改变长度

js中的数组在取值、赋值时没有角标越界异常，可以任意扩容，如果元素没有定义，获取该元素的值就是undefined。

    var arr = ["one","two","three"];

    console.log(arr[3]);//undefined
    console.log(arr.length);//3

    arr[3] = "four";//即使添加第四个元素，也不会报错，只不过此时arr的length值变为4
    console.log(arr[34]);//undefined
    console.log(arr.length);//4

    arr[99] = "99";//添加第100个元素，中间没有定义元素的位置，取到的值是undefined
    console.log(arr[50]);//undefined
    console.log(arr.length);//100

3. Array类型检测

    var flag = Array.isArray(arr);//推荐使用这种
    var flag1 = arr instanceof Array;//多框架时可能会出问题

4. Array的打印输出

4.1 toString()和valueOf()

Array是一种引用类型，也具备Object类型的一些基本方法：

• toString
• valueOf

    var arr = ["one","two","three"];

    console.log(arr.toString());//返回逗号隔开的元素
    console.log(arr.valueOf());//返回数组

下面是通过谷歌浏览器打印的结果：

4.3 join()

join方法可以修改toString()的输出结果，可以将数组中的元素用指定的符号隔开并输出。

    var arr = ["one","two","three"];
    console.log(arr.join("--"));//one--two--three

5. Array的容器方法

Array实例在使用时，可以被当做作容器，例如栈(先进后出)、队列(先进先出)。

5.1 被当做栈时有进栈push()和pop()出栈两个方法可供使用。举例如下：

    var arr = new Array();

    arr.push("one");
    arr.push("two");
    arr.push("three");

    console.log(arr.pop());//three

5.2 被当做队列时有push()和shift()两个方法可供使用。举例如下：

    var arr = new Array();

    arr.push("one");
    arr.push("two");
    arr.push("three");

    console.log(arr.shift());//one

6. Array的排序方法

6.1 sort()和reverse()

• sort()：对数组元素进行排序，sort默认的比较的是元素的toString()结果（即使每个元素都是数字，比较的也是数字的字符串形式），按照从小到大的顺序输出。sort()还可以接收一个比较器函数作为参数来自定义比较规则。
• reverse()：将数组元素倒序（从右到左）输出。

    var arr1 = [5,7,6,4,3,14];
    var arr2 = [5,7,6,4,3,14];

    console.log(arr1.reverse().toString());//14,3,4,6,7,5
    console.log(arr2.sort().toString());//14,3,4,5,6,7

	//自定义比较器的形式
    var arr = [5,7,6,4,3,14];

    function compare(val1,val2) {
        if(val1 < val2){
            return 1;
        }else if(val1 > val2){
            return -1;
        }else {
            return 0;
        }
    }

    console.log(arr.sort(compare).toString());//14,7,6,5,4,3

上面例子中的arr2.sort()结果将14排在了前面，因为默认的sort方法比较的是字符串形式的"14"，而不是数字14。

7. Array的合并、拆分、修改

7.1 合并

用于合并数组的方法concat()，该方法在合并数组时的执行过程：先创建一个当前数组的副本，然后将接收到的参数添加这个副本的末尾，从而构建一个新数组。

    var arr1 = [1,2,3];
    var arr2 = [4,5,6];
    var arr3 = arr1.concat(arr2);//直接拼接数组
    var arr4 = arr1.concat(7,8,9);//也可以直接追加元素

    console.log(arr3.toString());//1,2,3,4,5,6
    console.log(arr4.toString());//1,2,3,7,8,9

7.2 拆分

拆分数组的方法是slice()，该方法的用法与java和js中字符串的substring()方法一样，可以接收一个参数，也可以接收两个参数，举例如下：

    var arr1 = [1,2,3,4,5,6,7,8,9];

    var arr2 = arr1.slice(1,4);
    var arr3 = arr1.slice(2);

    console.log(arr2.toString());//2,3,4
    console.log(arr3.toString());//3,4,5,6,7,8,9

7.3 修改

修改数组元素包括删除指定位置元素、在指定位置添加元素、在指定位置替换元素。都是通过splice方法实现的，具体的功能通过参数的个数来实现。

• 删除：需要指定2个参数分别是：要删除第一项的位置、要删除的元素个数。
• 添加：需要指定3个参数分别是：起始位置、要删除的项数、要插入的元素。
• 替换（可以理解为删除和追加同时进行的一个方法）：参数可以任意，前两个参数是：位置，删除元素的个数，后面是要要想追加的元素，个数不确定。

    var arr1 = [1,2,3,4,5,6,7,8,9];
    var arr2 = [1,2,3,4,5,6,7,8,9];
    var arr3 = [1,2,3,4,5,6,7,8,9];

    arr1.splice(1,4).toString();//从位置1开始删除后面4个元素
    arr2.splice(1,2,0).toString();//从位置1开始删除后面2个元素，然后将0添加到数组中
    arr3.splice(2,1,0,0).toString();//从位置2开始，删除一个元素，删除后将后面的元素进行追加

    console.log(arr1.toString());//1,6,7,8,9
    console.log(arr2.toString());//1,0,4,5,6,7,8,9
    console.log(arr3.toString());//1,2,0,0,4,5,6,7,8,9

8. Array查找元素位置

js的Array查找元素与字符串中查找某个字符的方法是一样的。

• indexOf()返回元素在数组中第一次出现的位置。
• lastIndexOf()返回元素在数组中最后一次出现的位置。

    var arr = [1,2,3,4,5,6,7,8,9];

    console.log(arr.indexOf(3));//2
    console.log(arr.lastIndexOf(8));//7
    console.log(arr.indexOf(0));//-1
    console.log(arr.lastIndexOf(0));//-1

8. Array的迭代

Array的迭代有5个方法，每个方法都接收一个函数作为参数，该函数可以设置3个参数，分别是value,index,array，即：当前元素、当前元素位置、当前数组。

• every()：每一项都返回true，结果返回true。
• filter()：只返回符合条件的元素。
• some()：有一项返回true，结果就返回true.
• map()：可以对每个元素进行相应的映射操作后再返回。
• forEach()：相当于for循环。

上面提到的方法对应的实例：

    var arr = [1,2,3,4,5,4,3,2,1];

    //只有数组中的元素每个都大于0,结果才会返回true.
    var result1 = arr.every(function (value,index,array) {
        return value > 2;
    });
    console.log(result1.toString());//false


    //返回大于数组中元素值大于2的元素组成的数组
    var result2 = arr.filter(function (value,index,array) {
        return value > 2;
    });
    console.log(result2.toString());//3,4,5,4,3


    //只要数组中有一项是大于2的就返回true
    var result3 = arr.some(function (value,index,array) {
        return (value > 2);
    });
    console.log(result3.toString());//true


    //将数组中的每一项元素进行相应的操作
    var result4 = arr.map(function (value,index,array) {
        return value * 2;
    });
    console.log(result4.toString());//2,4,6,8,10,8,6,4,2

    
    //类似与for循环，或者java中容器的迭代器
    arr.forEach(function (value,index,array) {
        console.log(value);//将元素逐个输出
    });

8. Array的归并

Array的归并可以理解为将数组中的元素进行相应的操作最终返回一个值，或者理解为函数每个元素被迭代时递归调用的函数。

• reduce：从左到右
• reduceRight：从右到左

    var arr = [1,2,3,4,5,4,3,2,1];

    //返回数组中元素全部相加的结果
    var result1 = arr.reduce(function (previousValue, currentValue, currentIndex, array) {
        return previousValue + currentValue;
    });
    console.log(result1.toString());//25


    //与reduce方法结果一致，只不过reduce是从前到后迭代，reduceRight是从后到前的迭代
    var result1 = arr.reduceRight(function (previousValue, currentValue, currentIndex, array) {
        return previousValue + currentValue;
    });
    console.log(result1.toString());//25

备注：本文内容是学习“JavaScript高级程序设计”这本书整理的笔记。