JavaScript从入门到精通（第3版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

5.3 JavaScript中的数组

可以把数组看作一张单行表格，该表格的每一个单元格又都可以存储一个数据，而且各单元格中存储的数据类型可以不同。这些单元格被称为数组元素，每个数组元素都有一个索引号，通过索引号可以方便地引用数组元素。数组是JavaScript中唯一用来存储和操作有序数据集的数据结构。

5.3.1 创建Array对象

可以用静态的Array对象创建一个数组对象，以记录不同类型的数据。

语法格式：

    arrayObj = new Array()
    arrayObj = new Array([size])
    arrayObj = new Array([element0[, element1[, ...[, elementN]]]])

参数说明：

arrayObj：必选项，表示要赋值为Array对象的变量名。

size：可选项，用于设置数组的大小。数组的下标从0开始，创建元素的下标为0～size-1。

elementN：可选项，表示存入数组中的元素。使用该语法时，数组必须有一个以上的元素。

注意

用第1行语句创建Array对象时，元素的个数是不确定的，用户可以在赋值时任意定义；第2行语句指定了数组的长度，在对数组赋值时，元素个数不能超过其指定的长度；第3行语句是定义的同时对数组对象进行赋值，其长度为数组元素的个数。

例如，创建一个可存入3个元素的Array对象，并向该对象中存入数据，代码如下：

    arrayObj = new Array(3)
    arrayObj[0]= "a";
    arrayObj[0]= "b";
    arrayObj[0]= "c";

例如，创建Array对象的同时向该对象中存入数组元素，代码如下：

    arrayObj = new Array(1,2,3,"a","b")

5.3.2 Array对象的输入／输出

1．Array对象的输入

向Array对象中输入数组元素有3种方法，分别介绍如下：

（1）在定义Array对象时直接输入数组元素

该方法只能在数组元素确定的情况下才可以使用。

例如，在创建Array对象的同时存入字符串数组，代码如下：

    arrayObj = new Array("a","b","c","d")

（2）利用Array对象的元素下标向其输入数组元素

该方法可以随意地为Array对象中的各元素赋值，或是修改数组中的任意元素值。

例如，在创建一个长度为7的Array对象后，向下标为3和4的元素赋值。

    arrayObj = new Array(7)
    arrayObj[3] = "a";
    arrayObj[4] = "b";

（3）利用for语句向Array对象输入数组元素

该方法主要用于批量向Array对象输入数组元素，一般用于为Array对象赋初值。

例如，可以通过改变变量n的值（必须是数值型），给数组对象arrayObj赋指定个数的数值元素，代码如下：

    Var n=7
    arrayObj = new Array()
    for(var i=0;i<n;i++){
          arrayObj[i]=i
    }

例如，给指定元素个数的Array对象赋值，代码如下：

    arrayObj = new Array(7)
    for(var i=0;i<arrayObj.length;i++){
          arrayObj[i]=i
    }
2．Array对象的输出

将Array对象中的元素值进行输出有3种方法，分别介绍如下：

（1）用下标获取指定元素值

该方法通过Array对象的下标获取指定的元素值。

例如，获取Array对象中第3个元素的值，代码如下：

    arrayObj = new Array("a","b","c","d")
    var s=arrayObj[2]

运行结果：

    c

注意

Array对象的元素下标是从0开始的。

（2）用for语句获取数组中的元素值

该方法利用for语句获取Array对象中所有元素的值。

例如，获取Array对象中的所有元素值，代码如下：

    arrayObj = new Array("a","b","c","d")
    for(var i=0;i<arrayObj.length;i++){
        str=str+arrayObj[i].toString();
    }
    document.write(str);

运行结果：

    abcd

（3）用数组对象名输出所有元素值

该方法用创建的数组对象显示数组中的所有元素值。

例如，显示数组中的所有元素值，代码如下：

    arrayObj = new Array("a","b","c","d")
    document.write(arrayObj);

运行结果：

    abcd

5.3.3 Array对象的属性

在Array对象中有length和prototype两个属性，下面分别进行介绍：

（1）length属性

length属性用于返回数组的长度。

语法格式：

    array.length

参数说明：

array：表示数组名称。

例如，获取已创建的数组对象的长度，代码如下：

    var arr=new Array(1,2,3,4,5,6,7,8);
    document.write(arr.length);

运行结果：

    8

例如，增加已有数组的长度，代码如下：

    var arr=new Array(1,2,3,4,5,6,7,8);
    arr[arr.length]=arr.length+1;
    document.write(arr.length);

运行结果：

    9

注意

当使用new Array()方法创建数组时，并不对其进行赋值，length属性的返回值为0。

（2）prototype属性

prototype属性的语法与String对象的prototype属性相同。下面以实例的形式对该属性的应用进行说明。

【例5.16】 利用自定义方法显示数组中的全部数据。（实例位置：资源包\TM\sl\5\16）

本实例利用prototype属性自定义一个方法，用于显示数组中的全部数据。运行结果如图5.17所示。

图5.17 利用自定义方法显示数组中的全部数据

代码如下：

5.3.4 Array对象的方法

Array对象中的方法如表5.13所示。

表5.13 Array对象的方法

5.3.5 数组的添加和删除

数组的添加和删除可以使用concat()、shift()、pop()、push()和unshift()方法实现。

1．concat()方法

concat()方法用于将其他数组连接到当前数组的尾端。

语法格式：

    arrayObject.concat(arrayX,arrayX,...,arrayX)

参数说明：

arrayObject：必选项。表示数组名称。

arrayX：必选项。该参数可以是具体的值，也可以是数组对象。

例如，在数组的尾部添加数组元素，代码如下：

    var arr=new Array(1,2,3,4,5,6,7,8);
    document.write(arr.concat(9,10));

运行结果如图5.18所示。

图5.18 向数组中添加元素

例如，在数组的尾部添加其他数组，代码如下：

    var arr1=new Array('a','b','c');
    var arr2=new Array('d','e','f');
    document.write(arr1.concat(arr2));

运行结果如图5.19所示。

图5.19 向数组中添加数组

2．shift()方法

shift()方法用于把数组中的第一个元素从数组中删除，并返回删除元素的值。

语法格式：

    arrayObject.shift()

参数说明：

arrayObject：必选项。表示数组名称。

返回值：在数组中删除的第一个元素的值。

例如，删除数组中的第一个元素，代码如下：

    var arr=new Array(1,2,3,4,5,6,7,8);
    var Del=arr. shift();
    document.write('删除元素为:'+Del+';删除后的数组为:'+arr);

运行结果如图5.20所示。

图5.20 删除数组中的元素

3．pop()方法

pop()方法用于删除并返回数组中的最后一个元素。

语法格式：

    arrayObject.pop()

参数说明：

返回值：Array对象的最后一个元素。

例如，删除数组中的最后一个元素，代码如下：

    var arr=new Array(1,2,3,4,5,6,7,8);
    var Del=arr.pop();
    document.write('删除元素为:'+Del+';删除后的数组为:'+arr);

运行结果如图5.21所示。

图5.21 删除数组中的最后一个元素

4．push()方法

push()方法用于向数组的末尾添加一个或多个元素，并返回添加后的数组长度。

语法格式：

    arrayObject.push(newelement1,newelement2,...,newelementX)

push()方法中各参数的说明如表5.14所示。

表5.14 push()方法中的参数说明

参数说明：

返回值：把指定的值添加到数组后的新长度。

【例5.17】 向数组的末尾添加元素5、6和7。（实例位置：资源包\TM\sl\5\17）

    var arr=new Array(1,2,3,4);
    document.write('原数组:'+arr+'<br>');
    document.write('添加元素后的数组长度:'+arr.push(5,6,7)+'<br>');
    document.write('新数组:'+arr);

运行结果如图5.22所示。

图5.22 向数组的末尾添加元素

5．unshift()方法

unshift()方法向数组的开头添加一个或多个元素。

语法格式：

    arrayObject.unshift(newelement1,newelement2,...,newelementX)

unshift()方法中各参数的说明如表5.15所示。

表5.15 unshift()方法中的参数说明

例如，向arr数组的开头添加元素1、2和3，代码如下：

    var arr=new Array(4,5,6,7);
    document.write('原数组:'+arr+'<br\>');
    arr.unshift(1,2,3);
    document.write('新数组:'+arr);

运行程序，会将原数组和新数组中的内容显示在页面中，如图5.23所示。

图5.23 向数组的开头添加元素

5.3.6 设置数组的排列顺序

通过reverse()和sort()方法可以将数组中的元素按照指定的顺序进行排列。

1．reverse()方法

reverse()方法用于颠倒数组中元素的顺序。

语法格式：

    arrayObject.reverse()

参数说明：

arrayObject：必选项，表示数组名称。

注意

该方法会改变原来的数组，但不创建新数组。

【例5.18】 将数组中的元素顺序颠倒后显示。（实例位置：资源包\TM\sl\5\18）

    var arr=new Array(1,2,3,4);
    document.write('原数组:'+arr+'<br\>');
    arr.reverse();
    document.write('颠倒后的数组:'+arr);

运行结果如图5.24所示。

图5.24 将数组颠倒输出

2．sort()方法

sort()方法用于对数组的元素进行排序。

语法格式：

    arrayObject.sort(sortby)

参数说明：

arrayObject：必选项，表示数组名称。

sortby：可选项，规定排序的顺序，必须是函数。

说明

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，也就是按照字符的编码顺序进行排序。如果想按照其他标准进行排序，就需要提供比较函数。

例如，将数组中的元素按字符的编码顺序进行显示，代码如下：

    var arr=new Array(2,1,4,3);
    document.write('原数组:'+arr+'<br\>');
    arr.sort();
    document.write('排序后的数组:'+arr);

运行本实例，将原数组和排序后的数组输出，结果如图5.25所示。

图5.25 输出排序前与排序后的数组元素

5.3.7 获取数组中的某段数组元素

获取数组中的某段数组元素主要用slice()方法实现。

slice()方法可从已有的数组中返回选定的元素。

语法格式：

    arrayObject.slice(start,end)

参数说明：

start：必选项，规定从何处开始选取。如果是负数，说明从数组尾部开始选取。也就是说，-1指最后一个元素，-2指倒数第二个元素，以此类推。

end：可选项，规定从何处结束选取。该参数是数组片段结束处的数组下标。如果没有指定该参数，那么截取的数组包含从start到数组结束的所有元素；如果这个参数是负数，那么将从数组尾部开始算起。

返回值：返回截取后的数组元素，该方法返回的数据中不包括end索引所对应的数据。

【例5.19】 截取数组中某段数组元素。（实例位置：资源包\TM\sl\5\19）

    <script language="javascript">
    <!--
    var arr=new Array("a","b","c","d","e","f");
    document.write("原数组:"+arr+"<br>");
    document.write("获取数组中第3个元素后的所有元素信息:"+arr.slice(2)+"<br>");
    document.write("获取数组中第2个到第5个的元素信息"+arr.slice(1,5)+"<br>");
    document.write("获取数组中倒数第2个元素后的所有信息"+arr.slice(-2));
    //-->
    </script>

运行程序，会将原数组以及截取数组元素后的数据输出。运行结果如图5.26所示。

图5.26 获取数组中某段数组元素

5.3.8 将数组转换成字符串

将数组转换成字符串主要通过toString()、toLocaleString()和join()方法实现。

1．toString()方法

toString()方法可把数组转换为字符串，并返回结果。

语法格式：

    arrayObject.toString()

参数说明：

arrayObject：必选项，表示数组名称。

返回值：以字符串显示arrayObject。返回值与没有参数的join()方法返回的字符串相同。

注意

转换成字符串后，数组中的各个元素以逗号进行分隔。

例如，将数组转换成字符串，代码如下：

    var arr=new Array("a","b","c","d","e","f");
    document.write(arr.toString());

运行结果如图5.27所示。

图5.27 将数组转换为字符串

2．toLocaleString()方法

toLocaleString()方法用于将数组转换成本地字符串。

语法格式：

    arrayObject.toLocaleString()

参数说明：

arrayObject：必选项，表示数组名称。

返回值：本地字符串。

说明

该方法首先调用每个数组元素的toLocaleString()方法，然后使用地区特定的分隔符把生成的字符串连接起来，形成一个字符串。

例如，将数组转换成用“,”分隔的字符串，代码如下：

    var arr=new Array("a","b","c","d","e","f");
    document.write(arr.toLocaleString());

运行结果如图5.28所示。

图5.28 将数组转换为本地字符串

3．join()方法

join()方法用于将数组中的所有元素放入一个字符串中。

语法格式：

    arrayObject.join(separator)

参数说明：

separator：可选项，表示要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

返回值：返回一个字符串。该字符串是把arrayObject的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入separator字符串而生成的。

例如，以指定的分隔符将数组中的元素转换成字符串，代码如下：

    var arr=new Array("a","b","c","d","e","f");
    document.write(arr.join("#"));

运行结果如图5.29所示。

图5.29 使用指定分隔符将数组中的元素转换为字符串

上一章目录下一章