JavaScript Array数组用法详解（超级肝，新手必看）

数组用于组织一系列相关的数据，JavaScript 中的数组定义为 Array 类的对象，创建数组对象时，可以使用 Array 类的构造函数，主要有以下几种形式：

• 指定数组成员的数量，如 var arr = new Array(3); 定义了三个成员的数组。
• 直接指定数组的成员，如 var arr = Array(1, 2, 3); 定义了包含数值 1、2、3 的数组。
• 创建一个空数组对象，如 var arr = new Array();，此时，arr 对象的 length 属性值为 0。

访问数组成员时，需要在数组对象后使用一对方括号，其中包含成员的索引值。索引值从 0 开始，最大的索引值是成员数量减 1。

下面的代码演示了数组成员的访问：

<script>
    var arr = Array(1, 2, 3);
    document.write(arr[0]);  // 1
    document.write(arr[1]);  // 2
    document.write(arr[2]);  // 3
    arr = null;
</script>

创建数组后，还可以动态地修改数组成员，如下面的代码：

<script>
    var arr = Array(1, 2, 3);
    arr[5] = 6;
    document.write(arr[3]);
    document.write("<br>");
    document.write(arr[5]);
    arr = null;
</script>

代码中，首先创建了包含三个成员的数组对象 arr。然后指定第 6 个元素（索引 5）的值为 6。

那么，中间空出的第四个和第五个元素怎么办呢？代码并不会出错，而是将空出成员的值定义为 undefined（很贴切，未定义）。代码执行结果见下图。


在 C语言的数组中，成员的类型都是相同的，而在面向对象的编程语言中，由于可以使用终极类（如 Object 类）存放任何类型的数据，所以，在数组中可以保存不同类型的成员，在 JavaScript 中也是这样的。

如下面的代码就可以正常工作：

<script>
    var arr = Array(1, "abc", true);
    for (var i = 0; i < arr.length; i++) {
        document.write(arr[i]);
        document.write("<br>");
    }
    arr = null;
</script>

代码中，arr 数组中定义了三个成员，分别是数值、字符串和布尔值。代码执行结果见下图。


实际应用中，不建议大家这样使用数组，而是将数组成员定义为相同的类型。不过，在一些特殊场景下，如处理函数参数的 arguments 对象，或者代码的灵活性要求更高时，使用数组传递不同类型的数据也是没有问题的。

在观察数组成员时，可以使用 Array 对象的 toString() 方法，它会返回由数组成员连接而成的字符串，每个成员由英文逗号分隔。实际上，也可以直接使用数组对象，默认情况下，也会显示以逗号分隔的所有成员，如下面的代码：

<script>
    var arr = Array("abc", "def", "ghi");
    document.write(arr);
    arr = null;
</script>

执行代码会显示 abc,def,ghi。

下面介绍一些 Array 对象中的常用成员。

JavaScript Array常用成员

1) length属性

首先，可以使用 length 属性获取数组的成员数量。循环访问数组成员时，经常会使用 length 属性作为循环变量的上限（不包含），如下面的代码：

var cards = new Array(54);
for(int i = 0; i < cards.length ; i++) {
    cards[i] = i+1;
}
cards = null;

如果需要在数组的末尾加一个成员，可以使用一个小技巧，如下面的代码：

<script>
    var arr = Array(1, 2, 3);
    arr[arr.length] = 4;
    document.write(arr.);  // 1,2,3,4
    arr = null;
</script>

代码中，使用 arr.length 值作为新成员的索引，这样可以正确地将成员添加到数组的最后。

2) push()方法

此外，还可以使用 push() 方法在数组的末尾添加一个成员，如下面的代码：

<script>
    var arr = Array(1, 2, 3);
    arr.push(4);
    document.write(arr);  // 1,2,3,4
    arr = null;
</script>

3) join()方法

如果需要将数组成员的数据连接为字符串，可以使用 join() 方法，方法的参数指定成员的分隔字符，如下面的代码：

<script>
    var arr = Array("abc", "def", "ghi");
    document.write(arr.join("-"));
    arr = null;
</script>

代码执行结果为 abc-def-ghi。

4) sort()方法

sort() 方法用于将数组中的成员排序，如下面的代码：

<script>
    var arr = Array(12, 1, 2, 10, 3, 99);
    arr.sort();
    document.write(arr);
    arr = null;
</script>

代码执行结果会显示 1,10,12,2,3,99，可以看到，默认情况下是按字符的编码进行排序，而不是按数值的大小。不过，我们可以改变比较规则。

首先，需要定义一个比较数值的函数，如下面代码中定义的 numberCompare() 函数。当参数一小于参数二时返回 -1，参数一大于参数二时返回 1，相等时返回 0。调用数组对象的 sort() 方法进行排序时，可以将函数名作为参数传递。完整的示例如下面的代码：

<script>
    //
    function numberCompare(x, y) {
        var num1 = Number(x);
        var num2 = Number(y);
        if (num1 < num2) return -1;
        else if (num1 == num2) return 0;
        else return 1;
    }
    //
    var arr = Array(12, 1, 2, 10, 3, 99);
    arr.sort(numberCompare);
    document.write(arr);
    arr = null;
</script>

执行代码后会返回 1,2,3,10,12,99，这一次是按数值排序的，而操作的关键就是 numberCompare() 函数。

调用数组的 sort() 方法时，将其参数指定为 numberCompare 函数，这样，排序的规则就由 numberCompare() 函数的返回值来决定，如果返回值大于 0 会交换两个成员的位置。

如果需要降序排列数值，可以定义一个 numberCompareDesc() 函数，如下面的代码：

<script>
    //
    function numberCompareDesc(x, y) {
        var num1 = Number(x);
        var num2 = Number(y);
        if (num1 < num2) return 1;
        else if (num1 == num2) return 0;
        else return -1;
    }
    //
    var arr = Array(12, 1, 2, 10, 3, 99);
    arr.sort(numberCompareDesc);
    document.write(arr);
    arr = null;
</script>

代码输出结果为 99,12,10,3,2,1。实际上，numberCompareDesc() 函数与 numberCompare() 函数的区别很小，只是交换了两个参数比较时大于或小于情况下的返回值。

5) reverse()方法

reverse() 方法用于将数组的成员反向排列，如下面的代码：

<script>
    var arr = Array("aaa", "bbb", "ccc", "ddd", "eee");
    arr.reverse();
    document.write(arr);
    arr = null;
</script>

执行代码后会显示 eee,ddd,ccc,bbb,aaa。

6) slice()方法

slice() 方法可以截取数组的一部分，其中：

• 参数一指定开始截取的索引值；
• 参数二指定截取结束的索引值，但结果不包含此元素。

如果不指定参数二，则返回从参数一指定位置开始的所有成员。此外，这两个参数还可以使用负数：

• 参数一指定的为负数时，表示从数组末尾截取 n 个字符（n 是参数一的绝对值）；
• 如果参数二为负数，表示截取参数开始到 n 之前的成员（n 是参数二的绝对值，表示倒数第几个元素，截取结果不包含此元素）。

下面的代码展示了 slice() 方法的应用：

<script>
    var arr = Array("aaa", "bbb", "ccc", "ddd", "eee");
    document.write(arr.slice(1, 3));
    document.write("<br>");
    document.write(arr.slice(1));
    document.write("<br>");
    document.write(arr.slice(-2));
    document.write("<br>");
    document.write(arr.slice(1, -2));
    arr = null;
</script>

代码执行结果见下图：

7) splice()方法

splice() 方法可以灵活地删除或替换数组成员，其参数包括：

• 参数一指定操作的开始位置（成员的索引值）；
• 参数二指定删除的成员数量；
• 参数三开始指定删除内容的替换内容。如果插入更多的成员，可以依次写出。

下面介绍一些 splice() 方法的常用形式。首先，需要删除成员时，只需要使用前两个参数。执行下面的代码会删除数组的第二个和第三个成员：

<script>
    var arr = Array(1, 2, 3, 4, 5);
    arr.splice(1, 2);
    document.write(arr);  // 1,4,5
    arr = null;
</script>

执行下面的代码会将第二个和第三个成员删除，并用 0 填补替换：

<script>
    var arr = Array(1, 2, 3, 4, 5);
    arr.splice(1, 2, 0, 0);
    document.write(arr);  // 1,0,0,4,5
    arr = null;
</script>

执行下面的代码将第二个和第三个成员删除，并用两个 0 填补：

<script>
    var arr = Array(1, 2, 3, 4, 5);
    arr.splice(1, 2, 0, 0);
    document.write(arr);  // 1,0,0,4,5
    arr = null;
</script>

8) unshift()方法

如果需要在数组的第一个位置插入成员，可以使用 unshift() 方法，如下面的代码：

<script>
    var arr = Array(1, 2, 3);
    arr.unshift(0);
    document.write(arr);  // 0,1,2,3
    arr = null;
</script>

9) shift()方法

删除数组第一个成员时，可以使用 shift() 方法，如下面的代码：

<script>
    var arr = Array(1, 2, 3);
    arr.shift();
    document.write(arr);  // 2,3
    arr = null;
</script>

10) pop()方法

删除数组最后一个成员时，可以使用 pop() 方法，如下面的代码：

<script>
    var arr = Array(1, 2, 3);
    arr.pop();
    document.write(arr);  // 1,2
    arr = null;
</script>

11) indexOf()方法

判断数组中是否存在某个成员时，可以使用 indexOf() 方法，它会返回成员第一次出现的索引值，如下面的代码：

<script>
    var arr = Array("a", "b", "c");
    document.write(arr.indexOf("b"));  // 1
    document.write("<br>");
    document.write(arr.indexOf("c"));  // 2
    arr = null;
</script>

页面会显示 1 和 2，其中，“b”位于第二位，索引值为 1，“c”元素位于第三位，索引值为 2。

12) lastIndex()方法

需要查询元素在数组中最后一次出现的索引位置，可以使用 lastIndexOf() 方法。如下面的代码执行后会显示 4：

<script>
    var arr = Array("a", "b", "c", "a", "b", "c");
    document.write(arr.lastIndexOf("b"));  // 4
    arr = null;
</script>

13) map数组

JavaScript 中的数组和 PHP 中的数组很相似，也可以使用“键／值”对应的数组，通常称为 map 或 dictionary。这种集合结构的特点是，每个成员都由名称（键）和数据（值）组成，访问成员的数据时，可以使用数据名称作为索引，如下面的代码：

<script>
    var map = { "earth":"地球 ", "mars":"火星 ", "jupiter":"木星 "};
    document.write(map["earth"] + "<br>");
    document.write(map["mars"] + "<br>");
    document.write(map["jupiter"] + "<br>");
</script>

代码执行结果见下图：


对于数组或 map 结构，还可以通过 for-in 循环结构快速地访问所有成员。在下面的代码中，先来看 map 成员的访问：

<script>
    var map = { "earth":"地球 ", "mars":"火星 ", "jupiter":"木星 " };
    for(var key in map)
        document.write(map[key] + "<br>");
</script>

对于数组或 map 结构，还可以通过 for-in 循环结构快速地访问所有成员。在下面的代码中，先来看 map 成员的访问：

<script>
    var map = { "earth":"地球 ", "mars":"火星 ", "jupiter":"木星 " };
    for(var key in map)
        document.write(map[key] + "<br>");
</script>

代码执行结果与上图相同。

下面的代码演示了如何使用 for-in 语句访问数组成员：

<script>
    var arr = Array(1, 2, 3);
    for(var e in arr)
        document.write(arr[e] + "<br>");
</script>

执行代码后页面会显示 1、2、3。

需要获取 map 对象的所有键名时，可以使用 Object.keys() 方法，此方法返回由键名组成的数组，此数组的成员数量也就是 map 对象的成员数量。下面的对象演示了相关的操作：

<script>
    var map = { "earth":"地球 ", "mars":"火星 ", "jupiter":"木星 " };
    var arr=Object.keys(map);
    document.write(arr);
    document.write("<br>");
    document.write("成员数量：" + arr.length);
</script>

代码执行结果见下图：