7.5 数组的方法
视频讲解
数组是JavaScript中的一个内置对象，使用数组对象的方法可以更加方便地操作数组中的数据。数组对象的方法如表7.1所示。
表7.1 数组对象的方法
7.5.1 数组的添加和删除
数组的添加和删除可以使用concat()、push()、unshift()、pop()、shift()和splice()方法实现。
1．concat()方法
concat()方法用于将其他数组连接到当前数组的末尾。
语法如下：
arrayObject.concat(arrayX,arrayX,...,arrayX)
参数说明。
arrayObject：必选项。数组名称。
arrayX：必选项。该参数可以是具体的值，也可以是数组对象。
返回值：返回一个新的数组，而原数组中的元素和数组长度不变。
例如，在数组的尾部添加数组元素。代码如下：
01 var arr=new Array(1,2,3,4,5,6,7,8); //定义数组
02 document.write(arr.concat(9,10)); //输出添加元素后的新数组
运行结果为：
1,2,3,4,5,6,7,8,9,10
例如，在数组的尾部添加其他数组。代码如下：
01 var arr1=new Array('a','b','c'); //定义数组arr1
02 var arr2=new Array('d','e','f'); //定义数组arr2
03 document.write(arr1.concat(arr2)); //输出连接后的数组
运行结果为：
a,b,c,d,e,f
2．push()方法
push()方法向数组的末尾添加一个或多个元素，并返回添加后的数组长度。
语法如下：
arrayObject.push(newelement1,newelement2,...,newelementX)
参数说明。
arrayObject：必选项。数组名称。
newelement1：必选项。要添加到数组的第一个元素。
newelement2：可选项。要添加到数组的第二个元素。
newelementX：可选项。可添加的多个元素。
返回值：把指定的值添加到数组后的新长度。
例如，向数组的末尾添加两个数组元素，并输出原数组、添加元素后的数组长度和新数组。代码如下：
01 var arr=new Array("JavaScript","HTML","CSS"); //定义数组
02 document.write('原数组：'+arr+'<br>'); //输出原数组
03 //向数组末尾添加两个元素并输出数组长度
04 document.write('添加元素后的数组长度：'+arr.push("PHP","Java")+'<br>');
05 document.write('新数组：'+arr); //输出添加元素后的新数组
运行结果如图7.7所示。
图7.7 向数组的末尾添加元素
3．unshift()方法
unshift()方法向数组的开头添加一个或多个元素。
语法如下：
arrayObject.unshift(newelement1,newelement2,...,newelementX)
参数说明。
arrayObject：必选项。数组名称。
newelement1：必选项。向数组添加的第一个元素。
newelement2：可选项。向数组添加的第二个元素。
newelementX：可选项。可添加的多个元素。
返回值：把指定的值添加到数组后的新长度。
例如，向数组的开头添加两个数组元素，并输出原数组、添加元素后的数组长度和新数组。代码如下：
01 var arr=new Array("JavaScript","HTML","CSS"); //定义数组
02 document.write('原数组：'+arr+'<br>'); //输出原数组
03 //向数组开头添加两个元素并输出数组长度
04 document.write('添加元素后的数组长度：'+arr.unshift("PHP","Java")+'<br>');
05 document.write('新数组：'+arr); //输出添加元素后的新数组
运行程序，会将原数组和新数组中的内容显示在页面中，如图7.8所示。
图7.8 向数组的开头添加元素
4．pop()方法
pop()方法用于把数组中的最后一个元素从数组中删除，并返回删除元素的值。
语法如下：
arrayObject.pop()
参数说明。
arrayObject：必选项。数组名称。
返回值：在数组中删除的最后一个元素的值。
例如，删除数组中的最后一个元素，并输出原数组、删除的元素和删除元素后的数组。代码如下：
01 var arr=new Array(1,2,3,4,5,6,7,8); //定义数组
02 document.write('原数组：'+arr+'<br>'); //输出原数组
03 var del=arr.pop(); //删除数组中最后一个元素
04 document.write('删除元素为：'+del+'<br>'); //输出删除的元素
05 document.write('删除后的数组为：'+arr); //输出删除后的数组
运行结果如图7.9所示。
图7.9 删除数组中最后一个元素
5．shift()方法
shift()方法用于把数组中的第一个元素从数组中删除，并返回删除元素的值。
语法如下：
arrayObject.shift()
参数说明。
arrayObject：必选项。数组名称。
返回值：在数组中删除的第一个元素的值。
例如，删除数组中的第一个元素，并输出原数组、删除的元素和删除元素后的数组。代码如下：
01 var arr=new Array(1,2,3,4,5,6,7,8); //定义数组
02 document.write('原数组：'+arr+'<br>'); //输出原数组
03 var del=arr.shift(); //删除数组中第一个元素
04 document.write('删除元素为：'+del+'<br>'); //输出删除的元素
05 document.write('删除后的数组为：'+arr); //输出删除后的数组
运行结果如图7.10所示。
图7.10 删除数组中第一个元素
6．splice()方法
pop()方法的作用是删除数组的最后一个元素，shift()方法的作用是删除数组的第一个元素，而要想更灵活地删除数组中的元素，可以使用splice()方法。通过splice()方法可以删除数组中指定位置的元素，还可以向数组中的指定位置添加新元素。
语法如下：
arrayObject.splice(start,length,element1,element2,…)
参数说明。
arrayObject：必选项。数组名称。
start：必选项。指定要删除数组元素的开始位置，即数组的下标。
length：可选项。指定删除数组元素的个数。如果未设置该参数，则删除从start开始到原数组末尾的所有元素。
element：可选项。要添加到数组的新元素。
例如，在splice()方法中应用不同的参数，对相同的数组中的元素进行删除操作。代码如下：
01 var arr1 = new Array("a","b","c","d"); //定义数组
02 arr1.splice(1); //删除第二个元素和之后的所有元素
03 document.write(arr1+"<br>"); //输出删除后的数组
04 var arr2 = new Array("a","b","c","d"); //定义数组
05 arr2.splice(1,2); //删除数组中的第二个和第三个元素
06 document.write(arr2+"<br>"); //输出删除后的数组
07 var arr3 = new Array("a","b","c","d"); //定义数组
08 arr3.splice(1,2,"e","f"); //删除数组中的第二个和第三个元素，并添加新元素
09 document.write(arr3+"<br>"); //输出删除后的数组
10 var arr4 = new Array("a","b","c","d"); //定义数组
11 arr4.splice(1,0,"e","f"); //在第二个元素前添加新元素
12 document.write(arr4+"<br>"); //输出删除后的数组
运行结果如图7.11所示。
图7.11 删除数组中指定位置的元素
7.5.2 设置数组的排列顺序
将数组中的元素按照指定的顺序进行排列可以通过reverse()和sort()方法实现。
1．reverse()方法
reverse()方法用于颠倒数组中元素的顺序。
语法如下：
arrayObject.reverse()
参数说明。
arrayObject：必选项。数组名称。
注意
该方法会改变原来的数组，而不创建新数组。
例如，将数组中的元素顺序颠倒后显示。代码如下：
01 var arr=new Array("JavaScript","HTML","CSS"); //定义数组
02 document.write('原数组：'+arr+'<br>'); //输出原数组
03 arr.reverse(); //对数组元素顺序进行颠倒
04 document.write('颠倒后的数组：'+arr); //输出颠倒后的数组
运行结果如图7.12所示。
图7.12 将数组颠倒输出
2．sort()方法
sort()方法用于对数组的元素进行排序。
语法如下：
arrayObject.sort(sortby)
参数说明。
arrayObject：必选项。数组名称。
sortby：可选项。规定排序的顺序，必须是函数。
说明
如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，也就是按照字符的编码顺序进行排序。如果想按照其他标准进行排序，就需要提供比较函数。
例如，将数组中的元素按字符的编码顺序进行显示。代码如下：
01 var arr=new Array("PHP","HTML","JavaScript"); //定义数组
02 document.write('原数组:'+arr+'<br>'); //输出原数组
03 arr.sort(); //对数组进行排序
04 document.write('排序后的数组:'+arr); //输出排序后的数组
运行程序，将原数组和排序后的数组输出，结果如图7.13所示。
图7.13 输出排序前与排序后的数组
如果想要将数组元素按照其他方法进行排序，就需要指定sort()方法的参数。该参数通常是一个比较函数，该函数应该有两个参数（假设为a和b）。在对元素进行排序时，每次比较两个元素都会执行比较函数，并将这两个元素作为参数传递给比较函数。其返回值有以下两种情况。
如果返回值大于0，则交换两个元素的位置。
如果返回值小于等于0，则不进行任何操作。
例如，定义一个包含4个元素的数组，将数组中的元素按从小到大的顺序进行输出。代码如下：
01 var arr=new Array(9,6,10,5); //定义数组
02 document.write('原数组：'+arr+'<br>'); //输出原数组
03 function ascOrder(x,y){ //定义比较函数
04 if(x>y){ //如果第一个参数值大于第二个参数值
05 return 1; //返回1
06 }else{
07 return -1; //返回-1
08 }
09 }
10 arr.sort(ascOrder); //对数组进行排序
11 document.write('排序后的数组：'+arr); //输出排序后的数组
运行结果如图7.14所示。
图7.14 输出排序前与排序后的数组元素
【例7.04】将2016年电影票房排行榜前五名的影片名称和对应的影片票房分别定义在数组中，对影片票房进行降序排序，将排序后的影片排名、影片名称和票房输出在表格中。代码如下：（实例位置：资源包\源码\07\7.04）
01 <table cellspacing="1" bgcolor="#CC00FF">
02 <tr height="30" bgcolor="#FFFFFF">
03 <td align="center" width="50">排名</td>
04 <td align="center" width="210">影片</td>
05 <td align="center" width="100">票房</td>
06 </tr>
07 <script type="text/javascript">
08 //定义影片数组movieArr
09 var movieArr=new Array("魔兽","美人鱼","西游记之孙悟空三打白骨精","疯狂动物城","美国队长3");
10 var boxofficeArr=new Array(14.7,33.9,12,15.3,12.5); //定义票房数组boxofficeArr
11 var sortArr=new Array(14.7,33.9,12,15.3,12.5); //定义票房数组sortArr
12 function ascOrder(x,y){ //定义比较函数
13 if(x<y){ //如果第一个参数值小于第二个参数值
14 return 1; //返回1
15 }else{
16 return -1; //返回-1
17 }
18 }
19 sortArr.sort(ascOrder); //为票房进行降序排序
20 for(var i=0; i<sortArr.length; i++){ //定义外层for循环语句
21 for(var j=0; j<sortArr.length; j++){ //定义内层for循环语句
22 if(sortArr[i]==boxofficeArr[j]){ //分别获取排序后的票房在原票房数组中的索引
23 document.write("<tr height=26 bgcolor='#FFFFFF'>"); //输出<tr>标记
24 document.write("<td align='center'>"+(i+1)+"</td>"); //输出影片排名
25 //输出票房对应的影片名称
26 document.write("<td class='left'>"+movieArr[j]+"</td>");
27 document.write("<td align='center'>"+sortArr[i]+"亿元</td>"); //输出票房
28 document.write("</tr>"); //输出</tr>标记
29 }
30 }
31 }
32 </script>
33 </table>
运行结果如图7.15所示。
图7.15 输出2016电影票房排行榜前五名
7.5.3 获取某段数组元素
获取数组中的某段数组元素主要用slice()方法实现。slice()方法可从已有的数组中返回选定的元素。
语法如下：
arrayObject.slice(start,end)
参数说明。
start：必选项。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1指最后一个元素，-2指倒数第二个元素，以此类推。
end：可选项。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从start到数组结束的所有元素。如果这个参数是负数，那么它将从数组尾部开始算起。
返回值：返回截取后的数组元素，该方法返回的数据中不包括end索引所对应的数据。
例如，获取指定数组中某段数组元素。代码如下：
01 var arr=new Array("a","b","c","d","e","f"); //定义数组
02 document.write("原数组："+arr+"<br>"); //输出原数组
03 //输出截取后的数组
04 document.write("获取数组中第3个元素后的所有元素："+arr.slice(2)+"<br>");
05 document.write("获取数组中第2个到第5个元素："+arr.slice(1,5)+"<br>"); //输出截取后的数组
06 document.write("获取数组中倒数第2个元素后的所有元素："+arr.slice(-2)); //输出截取后的数组
运行程序，会将原数组以及截取数组中元素后的数据输出，运行结果如图7.16所示。
图7.16 获取数组中某段数组元素
【例7.05】某歌手参加歌唱比赛，5位评委分别给出的分数是95、90、89、91、96，要获得最终的得分需要去掉一个最高分和一个最低分，并计算剩余3个分数的平均分。试着计算出该选手的最终得分。代码如下：（实例位置：资源包\源码\07\7.05）
01 <script type="text/javascript">
02 var scoreArr=new Array(95,90,89,91,96); //定义分数数组
03 var scoreStr=""; //定义分数字符串变量
04 for(var i=0; i<scoreArr.length; i++){
05 scoreStr+=scoreArr[i]+"分 "; //对所有分数进行连接
06 }
07 function ascOrder(x,y){ //定义比较函数
08 if(x<y){ //如果第一个参数值小于第二个参数值
09 return 1; //返回1
10 }else{
11 return -1; //返回-1
12 }
13 }
14 scoreArr.sort(ascOrder); //为分数进行降序排序
15 var newArr=scoreArr.slice(1,scoreArr.length-1); //去除最高分和最低分
16 var totalScore=0; //定义总分变量
17 for(var i=0; i<newArr.length; i++){
18 totalScore+=newArr[i]; //计算总分
19 }
20 document.write("五位评委打分："+scoreStr); //输出5位评委的打分
21 document.write("<br>去掉一个最高分："+scoreArr[0]+"分"); //输出去掉的最高分
22 //输出去掉的最低分
23 document.write("<br>去掉一个最低分："+scoreArr[scoreArr.length-1]+"分");
24 document.write("<br>选手最终得分："+totalScore/newArr.length+"分"); //输出选手最终得分
25 </script>
运行程序，结果如图7.17所示。
图7.17 计算选手的最终得分
7.5.4 数组转换成字符串
将数组转换成字符串主要通过toString()、toLocaleString()和join()方法实现。
1．toString()方法
toString()方法可把数组转换为字符串，并返回结果。
语法如下：
arrayObject.toString()
参数说明。
arrayObject：必选项。数组名称。
返回值：以字符串显示数组对象。返回值与没有参数的join()方法返回的字符串相同。
注意
在转换成字符串后，数组中的各元素以逗号分隔。
例如，将数组转换成字符串。代码如下：
01 var arr=new Array("a","b","c","d","e","f"); //定义数组
02 document.write(arr.toString()); //输出转换后的字符串
运行结果为：
a,b,c,d,e,f
2．toLocaleString()方法
toLocaleString()方法将数组转换成本地字符串。
语法如下：
arrayObject.toLocaleString()
参数说明。
arrayObject：必选项。数组名称。
返回值：以本地格式的字符串显示的数组对象。
说明
该方法首先调用每个数组元素的toLocaleString()方法，然后使用地区特定的分隔符把生成的字符串连接起来，形成一个字符串。
例如，将数组转换成用“,”号分隔的字符串。代码如下：
01 var arr=new Array("a","b","c","d","e","f"); //定义数组
02 document.write(arr.toLocaleString()); //输出转换后的字符串
运行结果为：
a, b, c, d, e, f
3．join()方法
join()方法将数组中的所有元素放入一个字符串中。
语法如下：
arrayObject.join(separator)
参数说明。
arrayObject：必选项。数组名称。
separator：可选项。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
返回值：返回一个字符串。该字符串是把arrayObject的每个元素转换为字符串，然后把这些字符串用指定的分隔符连接起来。
例如，以指定的分隔符将数组中的元素转换成字符串。代码如下：
01 var arr=new Array("a","b","c","d","e","f"); //定义数组
02 document.write(arr.join("#")); //输出转换后的字符串
运行结果为：
a#b#c#d#e#f