《JavaScript 从入门到精通》原书读书笔记（第6章）-CSDN博客

六、数组与集合

数组是 JavaScript 中十分常用的一种数据类型。数组提供了一种快速、方便地管理一组相关数据的方法，是 JavaScript 程序设计的重要内容。通过数组可以对大量性质相同的数据进行存储、排序、插入及删除等操作，从而有效地提高程序开发效率及改善程序地编写方式。JavaScript 还提供了一种特殊地数据结构——集合。与数学中的集合概念类似，JavaScript 中的集合由一组无序的元素组成，且集合中的每个元素都是唯一存在的。

6.1、数组

数组是 JavaScript 中的一种复合数据类型。变量中保存单个数据，而数组中则保存的是多个数据的集合。数组与变量的比较效果如图1所示。

图1 数组与变量的比较效果

（1）数组概念

数组（Array）就是一组数据的集合。数组是 JavaScript 中用来存储和操作有序数据集的数据结构。可以把数组看作一个单行表格，该表格的每一个单元格中都可以存储一个数据，即一个数组中可以包含多个元素，如图2所示。

图2 数组示意图

由于 JavaScript 是一种弱类型的语言，所以在数组中的每个元素的类型可以是不同的。数组中的元素类型可以是数值型、字符串型和布尔型等，甚至也可以是一个数组。

（2）数组元素

数组是数组元素的集合，在图2中，每个单元格里所存放的就是数组元素。例如，一个班级的所有学生就可以看作是一个数组，每一位学生都是数组中的一个元素。再比如，一个酒店的所有房间就相当于一个数组，每一个房间都是这个数组中的一个元素。

每个数组元素都有一个索引号（数组的下标），通过索引号可以方便地引用数组元素。数组的下标从 0 开始编号，例如，第一个数组元素的下标是 0，第二个数组元素的下标是 1，以此类推。

6.1.1、定义数组的 4 种方式

在 JavaScript 中数组也是一种对象，这种对象被称为数组对象。因此在定义数组时，也可以使用构造函数。 JavaScript 中定义数组的方法主要有4种。

（1）定义空数组

使用不带参数的构造函数可以定义一个空数组。顾名思义，空数组中是没有数组元素的，可以在定义空数组后再向数组中添加数组元素。

arrayObject = new Array()

参数说明：

- arrayObject：必选项。新创建的数组对象名。

例如，创建一个空数组，然后向该数组中添加数组元素。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 创建数组
		var arr = new Array();
		
		// 2. 添加元素
		arr[0] = "JavaScript 前后端交互语言！";
		arr[1] = "学习 JavaScript 很重要！";
		arr[2] = "老苏带你学 JavaScript";
		
		console.log(arr.toString())
	</script>
</html>

在上述代码中定义了一个空数组，此时数组中元素的个数为 0。在为数组的元素赋值后，数组中才有了数组元素。

常见错误：定义的数组对象名和已存在的变量重名，例如，在开发工具中编写如下代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 定义变量
		var user = "李四";
		
		// 2. 定义数组
		var user = new Array();
		
		// 3. 添加数组元素
		user[0] = "姓名：张三";
		user[1] = "地址：北京";
		
		console.log(user)
	</script>
</html>

虽然上述代码在运行的时候不会报错，但是由于定义的数组对象名和已存在的变量重名，变量的值被数组的值所覆盖，所以在输出 user 变量的时候只能输出数组的值。

（2）指定数组长度

在定义数组的同时可以指定数组元素的个数。此时并没有为数组元素赋值，所有数组元素的值都是undefined。

arrayObject = new Array(size)

参数说明：

- arrayObject：必选项。新创建的数组对象名。
- size：设置数组的长度。由于数组的下标是从零开始，创建元素的下标将从 0 到 size-1。

例如，创建一个数组元素个数为 3 的数组，并向该数组中存入数据。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 创建数组，并指定数组的长度
		var arr = new Array(3);
		
		arr[0] = "张三";
		arr[1] = "李四";
		arr[2] = "王五";
		arr[3] = "赵六";
		arr[4] = "田七";
		console.log(arr)
	</script>
</html>

在上述代码中定义了一个元素个数为3的数组。在为数组元素赋值之前，这3个数组元素的值都是undefined。

（3）指定数组元素

在定义数组的同时可以直接给出数组元素的值。此时数组的长度就是在括号中给出的数组元素的个数。

arrayObject = new Array(element1, element2, element3, ...)

参数说明：

- arrayObject：必选项。新创建的数组对象名。
- element：存入数组中的元素。使用该语法时必须有一个以上元素。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 创建数组，并直接赋值
		var arr = new Array("张三","李四","王五",123,true);
		
		console.log(arr);
	</script>
</html>

（4）直接定义数组

在 JavaScript 中还有一种定义数组的方式，这种方式不需要使用构造函数，直接将数组元素放在一个中括号中，元素与元素之间用逗号分隔。

arrayObject = [element1, element2, element3, ...]

参数说明：

- arrayObject：必选项。新创建的数组对象名。
- element：存入数组中的元素。使用该语法时必须有一个以上元素。

例如，直接定义一个含有 3个元素的数组。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 直接定义数组
		var arr = ["张三","李四","王五",123,true];
		
		console.log(arr);
	</script>
</html>

6.1.2、数组元素的添加和输出

数组是数组元素的集合，在对数组进行操作时，实际上是对数组元素进行输入和输出、添加或删除的操作。

数组元素的输入即为数组中的元素进行赋值，数组元素的输出即获取数组中元素的值并输出，下面分别进行介绍。

6.1.2.1、数组元素的添加 3种方法

向数组对象中输入数组元素有3种方法：

（1）创建数组并直接赋值

在定义数组对象时直接添加数组元素；这种方法只能在数组元素确定的情况下才可以使用。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 使用构造函数创建数组，并添加数组元素
		var arr = new Array("张三",123,true);
		
		console.log(arr);
	</script>
</html>

（2）根据下标添加元素

利用数组对象的元素下标向其输入数组元素；该方法可以随意的向数组对象中的各元素赋值，或是修改数组中的任意元素值。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 使用构造方法创建数组对象，并指定数组的长度
		var arr = new Array(7);
		
		// 2. 根据数组下标，添加元素
		arr[1] = "下标 1";
		arr[3] = "下标 3";
		arr[5] = "下标 5";
		
		console.log(arr);
	</script>
</html>

（3）for 循环添加元素

利用 for 语句向数组对象中输入数组元素；该方法主要用于批量向数组对象中输入数组元素，一般用于向数组对象中赋初值。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 变量声明
		var n = 7;
		
		// 2. 创建数组
		var arr = [];
		
		// 3. 数组循环添加元素
		for(i=0;i<=n;i++){
			arr[i] = i;
		}
		
		console.log(arr)
	</script>
	<style>
		
	</style>
</html>

6.1.2.2、数组元素的输出 3种方法

将数组对象中的元素值进行输出有3种方法：

（1）根据下标获取元素

用下标获取指定元素值，该方法通过数组对象的下标，获取指定的元素值。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 创建数组并赋值
		var arr = new Array("张三",123,"abc",true);
		
		// 2. 根据下标输出数组元素
		for(i=0;i<arr.length;i++){
			console.log(arr[i]);
		}
	</script>
	<style>
		
	</style>
</html>

运行结果为：

注意：数组对象的元素下标是从 0 开始的。

常见错误：输出数组元素时数组的下标不正确，例如，在开发工具中编写如下代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 创建数组并赋值
		var arr = new Array("张三",123,"abc",true);
		
		// 2. 根据下标输出数组元素
		console.log(arr[9]);
	</script>
	<style>
		
	</style>
</html>

上述代码在运行的时候并不会报错，但是定义的数组中只有两个元素，这两个元素对应的数组下标分别为0和1，而输出的数组元素的下标超过了数组的范围，所以输出结果就是 undefined。

（2）根据下标 for 循环输出

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 创建数组并赋值
		var arr = new Array("张三",123,"abc",true);
		
		// 2. 声明变量
		var str = "";
		
		// 2. 根据下标输出数组元素
		for(i=0;i<arr.length;i++){
			str = str + arr[i];
		}
		
		console.log(str);
	</script>
	<style>
		
	</style>
</html>

运行结果为：

（3）根据数组对象名称输出

用数组对象名输出所有元素值，该方法是用创建的数组对象本身显示数组中的所有元素值。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 创建数组并赋值
		var arr = new Array("张三",123,"abc",true);
		
		console.log(arr);
	</script>
	<style>
		
	</style>
</html>

运行结果为：

【案例】输出3个学霸姓名

某班级里有3个学霸，创建一个存储3个学霸姓名（张三、李四、王五）的数组，然后输出这3个数组元素。首先创建一个包含3个元素的数组，并为每个数组元素赋值，然后使用for循环语句遍历输出数组中的所有元素。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 创建数组，并指定数组的长度
		var studentList = new Array(3);
		
		// 2. 数组添加元素
		studentList[0] = "张三";
		studentList[1] = "李四";
		studentList[2] = "王五";
		
		// 3. 遍历输出数组中的元素
		for(i=0;i<studentList.length;i++){
			console.log("第" + (i+1) +"个学生是：" + studentList[i] );
		}
	</script>
	<style>
		
	</style>
</html>

【案例】数组元素的添加和删除

在定义数组时虽然已经设置了数组元素的个数，但是该数组的元素个数并不是固定的。可以通过添加数组元素的方法来增加数组元素的个数。添加数组元素的方法非常简单，只要对新的数组元素进行赋值就可以了。

例如，定义一个包含两个元素的数组，然后为数组添加3个元素，最后输出数组中的所有元素值，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 创建数组，并指定数组的长度
		var studentList = new Array(3);
		
		// 2. 数组添加元素
		studentList[0] = "张三";
		studentList[1] = "李四";
		studentList[2] = "王五";
		studentList[3] = "赵六";
		studentList[4] = "田七";
		
		// 3. 遍历输出数组中的元素
		for(i=0;i<studentList.length;i++){
			console.log("第" + (i+1) +"个学生是：" + studentList[i] );
		}
	</script>
	<style>
		
	</style>
</html>

运行结果为：

另外，还可以对已经存在的数组元素进行重新赋值。例如，定义一个包含两个元素的数组，将第二个数组元素进行重新赋值并输出数组中的所有元素值，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 创建数组，并指定数组的长度
		var studentList = new Array(3);
		
		// 2. 数组添加元素
		studentList[0] = "张三";
		studentList[1] = "李四";
		studentList[2] = "王五";
		studentList[3] = "赵六";
		studentList[4] = "孙七";
		studentList[0] = "周八"; // 对数组中的元素进行重新赋值
		
		// 3. 遍历输出数组中的元素
		for(i=0;i<studentList.length;i++){
			console.log("第" + (i+1) +"个学生是：" + studentList[i] );
		}
	</script>
	<style>
		
	</style>
</html>

运行结果为：

使用 delete 运算符可以删除数组元素的值，但是只能将该元素恢复为未赋值的状态，即 undefined，而不能真正地删除一个数组元素，数组中的元素个数也不会减少。

例如，定义一个包含3个元素的数组，然后应用delete运算符删除下标为1的数组元素，最后输出数组中的所有元素值。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 创建数组，并指定数组的长度
		var studentList = new Array(3);
		
		// 2. 数组添加元素
		studentList[0] = "张三";
		studentList[1] = "李四";
		studentList[2] = "王五";
		studentList[3] = "赵六";
		studentList[4] = "孙七";
		
		delete studentList[2];
		
		// 3. 遍历输出数组中的元素
		for(i=0;i<studentList.length;i++){
			console.log("第" + (i+1) +"个学生是：" + studentList[i] );
		}
	</script>
	<style>
		
	</style>
</html>

运行结果为：

注意：应用 delete 运算符删除数组元素之前和删除数组元素之后，元素个数并没有改变，改变的只是被删除的数组元素的值，该值变为 undefined。

6.1.3、稀疏数组（不连续索引数组）

稀疏数组是指包含从 0 开始的不连续索引的数组。通过数组的 length 属性可以获取数组中元素的个数，如果数组是稀疏的，那么数组的 length 属性值将大于元素的个数。定义稀疏数组可以使用 Array() 构造函数，或者简单地指定数组的索引值大于当前数组的长度。

例如，使用两种不同的方式分别定义稀疏数组 arr1 和 arr2，代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 创建数组，并指定数组的长度
		var arr01 = new Array(3);
		
		var arr02 = [];
		arr02[5] = 0;
		
		console.log("数组 1：" +arr01);
		console.log("数组 2 ：" + arr02);
	</script>
	<style>
		
	</style>
</html>

在数组直接量中省略值并不会创建稀疏数组，因为省略的元素在数组中是存在的，其值是 underfined。

6.1.4、获取数组的长度

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

arrayObject.length

参数说明：

- arrayObject：数组名称。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 创建数组，并指定数组的长度
		var arr = new Array("张三","李四");
		
		// 2. 输出数组的长度
		console.log("数组的长度是：" + arr.length);
	</script>
	<style>
		
	</style>
</html>

运行结果为：

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 创建数组，并指定数组的长度
		var arr = new Array("张三","李四");
		
		// 2. 增加数组的长度
		arr[arr.length] = arr.length + 1;
		
		// 3. 输出数组的长度
		console.log("数组的长度是：" + arr.length);
		
		// 4. 输出数组中的元素
		for(i=0;i<arr.length;i++){
			console.log("数组中的元素分别是：" + arr[i]);
		}
	</script>
	<style>
		
	</style>
</html>

运行结果为：

注意：

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

（2）数组的长度是由数组的最大下标决定的。

【案例】输出数组的长度

例如，用不同的方法创建数组，并输出数组的长度。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 创建数组并赋值
		var arr01 = new Array();
		console.log("数组 1 的长度是：" + arr01.length);
		
		var arr02 = new Array("张三","李四");
		console.log("数组 2 的长度是：" + arr02.length);
		
		var arr03 = [];
		console.log("数组 3 的长度是：" + arr03.length);
		
	</script>
	<style>
		
	</style>
</html>

【案例】输出省份、省会以及旅游景点

将东北三省的省份名称、省会城市名称以及3个城市的旅游景点分别定义在数组中，应用 for 循环语句和数组的 length 属性，将省份、省会以及旅游景点循环输出在表格中。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

		<!--创建表格-->
		<table cellspacing="1px" bgcolor="#CC00FF" align="center">
			<tr style="height: 30px; background-color: #FFFFFF;" >
				<td align="center" style="width: 50px;">序号</td>
				<td align="center" style="width: 100px;">省份</td>
				<td align="center" style="width: 100px;">省会</td>
				<td align="center" style="width: 260px;">旅游景点</td>
			</tr>
			<script type="text/javascript">
				
				// 1. 创建省份数组
				var provinceList = new Array("黑龙江省","吉林省","辽宁省");
				// 2. 创建省会数组
				var cityList = new Array("哈尔滨市","吉林市","沈阳市");
				// 3. 定义旅游景点
				var tourist=new Array(
					"太阳岛 圣索菲亚教堂 中央大街",
					"净月潭 长影世纪城 动植物公园",
					"沈阳故宫 沈阳北陵 张氏帅府");
				// 4. 遍历省份
				for(i=0;i<provinceList.length;i++){
					 document.write("<tr height=26 bgcolor='#FFFFFF'>");
					 document.write("<td align='center'>"+(i+1)+"</td>");
					 document.write("<td align='center'>"+provinceList[i]+"</td>");
					 document.write("<td align='center'>"+cityList[i]+"</td>");
					 document.write("<td align='center'>"+tourist[i]+"</td>");
					 document.write("</tr>");          
				}
			</script>
		</table>
	</body>
	<style>
		
	</style>
</html>

6.1.4.1、prototype 为数组添加属性或方法

该属性可以为数组对象添加自定义的属性或方法。

Array.prototype.name=value

参数说明：

- name：要添加的属性名或方法名。
- value：添加的属性的值或执行方法的函数。

例如，利用 prototype 属性自定义一个方法，用于显示数组中的最后一个元素。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

		<script>
			// 1. 创建数组
			var arr = new Array("张三","李四","王五");
			
			// 2. 为数组添加属性并输出最后一个属性值
			Array.prototype.outLast = function(){
				// 输出数组中的最后一个属性
				console.log(this[this.length - 1]);
			}
			
			// 3. 调用方法
			arr.outLast();
		</script>
	</body>
	<style>
		
	</style>
</html>

运行结果为：

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

【案例】应用自定义方法输出数组

应用数组对象的 prototype 属性自定义一个方法，用于显示数组中的全部数据。程序代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 创建数组
		var arr = new Array("张三","李四","王五");
		
		// 2. 添加数组属性，并赋予一个方法方法，输出数组中的全部数据
		Array.prototype.outAll = function(){
			for(i=0;i<arr.length;i++){
				console.log("数组中的第：" + (i + 1) + "个数据是：" + arr[i]);
			}
		}
		
		// 3. 调用方法
		arr.outAll();
	</script>
	<style>
		
	</style>
</html>

6.1.5、数组对象的方法

6.1.6、数组的添加和删除

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

（1）concat 结尾拼接元素或数组

该方法用于将其他数组连接到当前数组的末尾。

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

参数说明：

- arrayObject：必选项。数组名称。
- arrayX：必选项。该参数可以是具体的值，也可以是数组对象。
- 返回值：返回一个新的数组，而原数组中的元素和数组长度不变。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

	</body>

	<script type="text/javascript">
		// 1. 创建数组
		var arr01 = new Array("张三","李四","王五");
		
		// 3. 打印数组
		console.log(arr01.concat(4,5,6));
	</script>

	<style type="text/css">
		
	</style>
</html>

运行结果为：

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

	</body>

	<script type="text/javascript">
		// 1. 创建数组
		var arr01 = new Array("张三","李四","王五");
		
		var arr02 = new Array(1,2,3);
		
		// 3. 打印数组
		console.log(arr01.concat(arr02));
	</script>

	<style type="text/css">
		
	</style>
</html>

运行结果为：

（2）push 结尾添加一个或多个

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

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

参数说明：

- arrayObject：必选项。数组名称。
- newelement1：必选项。要添加到数组的第一个元素。
- newelement2：可选项。要添加到数组的第二个元素。
- newelementX：可选项。可添加的多个元素。
- 返回值：把指定的值添加到数组后的新长度。

例如，向数组的末尾添加两个数组元素，并输出原数组、添加元素后的数组长度和新数组。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

	</body>

	<script type="text/javascript">
		// 1. 创建数组
		var arr01 = new Array("张三","李四","王五");
		
		// 2. 添加数组元素，并返回数组的长度
		var arr02 = arr01.push(1,2,3);
		
		console.log(arr01)
		console.log("新数组的长度是：" + arr02);
		
	</script>

	<style type="text/css">
		
	</style>
</html>

（3）unshift 开头添加一个或多个

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

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

参数说明：

- arrayObject：必选项。数组名称。
- newelement1：必选项。向数组添加的第一个元素。
- newelement2：可选项。向数组添加的第二个元素。
- newelementX：可选项。可添加的多个元素。
- 返回值：把指定的值添加到数组后的新长度。

例如，向数组的开头添加两个数组元素，并输出原数组、添加元素后的数组长度和新数组。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

	</body>

	<script type="text/javascript">
		// 1. 创建数组
		var arr01 = new Array("张三","李四","王五");
		
		// 2. 添加数组元素，并返回数组的长度
		arr01.unshift(1,2,3);
		
		console.log(arr01)
		
	</script>

	<style type="text/css">
		
	</style>
</html>

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

（4）pop 删除最后数据并返回删除的值

该方法用于把数组中的最后一个元素从数组中删除，并返回删除元素的值。

arrayObject.pop()

参数说明：

- arrayObject：必选项，数组名称。
- 返回值：在数组中删除的最后一个元素的值。

例如，删除数组中的最后一个元素，并输出原数组、删除的元素和删除元素后的数组。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

	</body>

	<script type="text/javascript">
		// 1. 创建数组
		var arr01 = new Array("张三","李四","王五");
		
		// 2. 添加数组元素，并返回数组的长度
		var deleteValue =  arr01.pop();
		
		console.log(deleteValue)
		
	</script>

	<style type="text/css">
		
	</style>
</html>

（5）shift 删除第一个并返回删除的值

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

arrayObject.shift()

参数说明：

- arrayObject：必选项，数组名称。
- 返回值：在数组中删除的第一个元素的值。

例如，删除数组中的第一个元素，并输出原数组、删除的元素和删除元素后的数组。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

	</body>

	<script type="text/javascript">
		// 1. 创建数组
		var arr01 = new Array("张三","李四","王五");
		
		// 2. 添加数组元素，并返回数组的长度
		var deleteValue =  arr01.shift();
		
		console.log(deleteValue)
		
	</script>

	<style type="text/css">
		
	</style>
</html>

（6）splice 删除或添加指定位置数据

pop() 方法的作用是删除数组的最后一个元素，shift() 方法的作用是删除数组的第一个元素，而要想更灵活的删除数组中的元素，可以使用 splice() 方法。通过 splice() 方法可以删除数组中指定位置的元素，还可以向数组中的指定位置添加新元素。

arrayObject.splice(start,length,element1,element2,…)

参数说明：

- arrayObject：必选项，数组名称。
- start：必选项，指定要删除数组元素的开始位置，即数组的下标。
- length：可选项，指定删除数组元素的个数。如果未设置该参数，则删除从start开始到原数组末尾的所有元素。
- element：可选项，要添加到数组的新元素。

例如，在 splice() 方法中应用不同的参数，对相同的数组中的元素进行删除操作。代码如下：

		// 1. 创建数组
		var arr01 = [1,2,3];
		
		// 2. 从指定的下标位置开始删除
		arr01.splice(1);
		console.log(arr01)

		// 1. 创建数组
		var arr01 = [1,2,3];
		
		// 2. 根据下标范围，删除元素
		arr01.splice(0,1);
		console.log(arr01)

		// 1. 创建数组
		var arr01 = [1,2,3];
		
		// 2. 根据下标范围，删除元素，并新增元素
		arr01.splice(0,1,"a","b");
		console.log(arr01)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 创建数组
		var arr01 = [1,2,3];
		
		// 2. 根据下标范围，并新增元素
		arr01.splice(1,0,"a","b");
		console.log(arr01)
	</script>
</html>

6.1.7、设置数组的排列顺序

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

6.1.7.1、reverse 数据反转

该方法用于颠倒数组中元素的顺序。

arrayObject.reverse()

参数说明：

- arrayObject：必选项，数组名称。

注意：该方法会改变原来的数组，而不创建新数组。

例如，将数组中的元素顺序颠倒后显示。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 创建数组
		var arr01 = [1,2,3];
		
		// 2. 数组元素反转
		console.log(arr01.reverse())
	</script>
</html>

6.1.7.2、sort 升序，自定义排序

该方法用于对数组的元素进行排序。

arrayObject.sort(sortby)

参数说明：

- arrayObject：必选项。数组名称。
- sortby：可选项。规定排序的顺序，必须是函数。

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		
		// 1. 创建数组
		var arr01 = [1,4,3,8,6,5,9,7];
		
		// 2. 数组元素反转
		console.log(arr01.sort())
	</script>
</html>

如果想要将数组元素按照其他方法进行排序，就需要指定 sort() 方法的参数。该参数通常是一个比较函数，该函数应该有两个参数（假设为 a 和 b）。在对元素进行排序时，每次比较两个元素都会执行比较函数，并将这两个元素作为参数传递给比较函数。其返回值有以下两种情况：

（1）如果返回值大于 0，则交换两个元素的位置。

（2）如果返回值小于等于 0，则不进行任何操作。

例如，定义一个包含4个元素的数组，将数组中的元素按从小到大的顺序进行输出。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

	</body>

	<script type="text/javascript">

		// 1. 创建数组
		var arr = new Array(8,6,7,4);
		
		// 2. 遍历数组，升序
		function sortArr(x,y){
			// 1. 判断第一个参数是否大于第二个参数
			if(x > y){
				return 1;
			}else{
				return -1;
			}
		}
		
		// 3. 按照方法排序
		arr.sort(sortArr);
		
		// 4 输出数组
		document.write(arr);
	</script>

	<style type="text/css">
		
	</style>
</html>

【案例】输出 NBA 历史得分榜前五名

将 NBA 历史得分榜前五名的球员姓名和对应的总分分别定义在数组中，对总分进行降序排序，将排序后的得分、球员姓名和总分输出在表格中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>输出NBA历史得分榜前五名</title>
<style type="text/css">
.left{
padding-left:10px;}
</style>
</head>

<body>
<table cellspacing="1" bgcolor="#CC00FF">
  <tr height="30" bgcolor="#FFFFFF">
   <td align="center" width="50">排名</td>
   <td align="center" width="210">姓名</td>
   <td align="center" width="100">总分</td>
  </tr>
<script type="text/javascript">
var nameArr=new Array("卡尔·马龙","科比·布莱恩特","勒布朗·詹姆斯","迈克尔·乔丹","卡里姆·阿布杜尔-贾巴尔");//定义姓名数组nameArr
var scoreArr=new Array(36928,33643,37113,32292,38387);		//定义总分数组scoreArr
var sortArr=new Array(36928,33643,37113,32292,38387);	//定义总分数组sortArr
function ascOrder(x,y){//定义比较函数
	if(x<y){//如果第一个参数值小于第二个参数值
		return 1;//返回1
	}else{
		return -1;//返回-1
	}
}
sortArr.sort(ascOrder);//为总分进行降序排序
for(var i=0; i<sortArr.length; i++){//定义外层for循环语句
	for(var j=0; j<sortArr.length; j++){//定义内层for循环语句
		if(sortArr[i]==scoreArr[j]){//分别获取排序后的总分在原总分数组中的索引
			document.write("<tr height=26 bgcolor='#FFFFFF'>");//输出<tr>标记
			document.write("<td align='center'>"+(i+1)+"</td>");//输出得分排名
			document.write("<td class='left'>"+nameArr[j]+"</td>");//输出总分对应的球员姓名
			document.write("<td align='center'>"+sortArr[i]+"分</td>");//输出总分
			document.write("</tr>");//输出</tr>标记
		}
	}
}
</script>
</table>
</body>
</html>

6.1.8、获取数组中的某段数组元素

获取数组中的某段数组元素主要用 slice() 方法实现。slice() 方法可从已有的数组中返回选定的元素。

arrayObject.slice(start,end)

参数说明：

- start：必选项。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1指最后一个元素，-2指倒数第二个元素，以此类推。
- end：可选项。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从start到数组结束的所有元素。如果这个参数是负数，那么它将从数组尾部开始算起。
- 返回值：返回截取后的数组元素，该方法返回的数据中不包括end索引所对应的数据。

例如，获取指定数组中某段数组元素。代码如下：

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));//输出截取后的数组

【案例】计算选手的最终得分

某歌手参加歌唱比赛，五位评委分别给出的分数是 95、90、89、91、96，要获得最终的得分需要去掉一个最高分和一个最低分，并计算剩余 3 个分数的平均分。试着计算出该选手的最终得分。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>计算歌手的最终得分</title>
</head>

<body>
<script type="text/javascript">
var scoreArr=new Array(97,95,88,91,93);//定义分数数组
var scoreStr="";//定义分数字符串变量
for(var i=0; i<scoreArr.length; i++){
	scoreStr+=scoreArr[i]+"分 ";//对所有分数进行连接
}
function ascOrder(x,y){//定义比较函数
	if(x<y){//如果第一个参数值小于第二个参数值
		return 1;//返回1
	}else{
		return -1;//返回-1
	}
}
scoreArr.sort(ascOrder);//为分数进行降序排序
var newArr=scoreArr.slice(1,scoreArr.length-1);//去除最高分和最低分
var totalScore=0;//定义总分变量
for(var i=0; i<newArr.length; i++){
	totalScore+=newArr[i];//计算总分
}
document.write("5位评委打分："+scoreStr);//输出5位评委的打分
document.write("<br>去掉一个最高分："+scoreArr[0]+"分");//输出去掉的最高分
document.write("<br>去掉一个最低分："+scoreArr[scoreArr.length-1]+"分");//输出去掉的最低分
document.write("<br>歌手最终得分："+totalScore/newArr.length+"分");//输出歌手最终得分
</script>
</table>
</body>
</html>

6.1.9、将数组转换成字符串

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

（1）toString 转换成字符串

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

arrayObject.toString()

参数说明：

- arrayObject：必选项，数组名称。
- 返回值：以字符串显示数组对象。返回值与没有参数的join()方法返回的字符串相同。

注意：在转换成字符串后，数组中的各元素以逗号分隔。

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

var arr=new Array("a","b","c","d","e","f");     //定义数组
document.write(arr.toString());                  //输出转换后的字符串

运行结果为：

a,b,c,d,e,f

（2）toLocaleString()方法

该方法将数组转换成本地字符串。

arrayObject.toLocaleString()

参数说明：

- arrayObject：必选项，数组名称。
- 返回值：以本地格式的字符串显示的数组对象。

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

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

var arr=new Array("a","b","c","d","e","f");     //定义数组
document.write(arr.toLocaleString());            //输出转换后的字符串

运行结果为：

a, b, c, d, e, f

（3）join()方法

该方法将数组中的所有元素放入一个字符串中。

arrayObject.join(separator)

参数说明：

- arrayObject：必选项，数组名称。
- separator：可选项。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

返回值：返回一个字符串。该字符串是把arrayObject的每个元素转换为字符串，然后把这些字符串用指定的分隔符连接起来。

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

var arr=new Array("a","b","c","d","e","f");       //定义数组
document.write(arr.join("#"));                     //输出转换后的字符串

运行结果为：

a#b#c#d#e#f

6.1.10、编程训练

（1）获取包含星期信息的当前日期

为了使日期信息显示得更详细，一般会在日期后面显示星期几。通过数组来显示当前得星期信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title></title>
<script type="text/javascript">

</script>
</head>

<body>
<script type="text/javascript">
var now=new Date();						//创建日期对象
var year=now.getFullYear();
var month=now.getMonth()+1;
var date=now.getDate();
var day=now.getDay();						//获取当前星期
var week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
alert("今天是："+year+"年"+month+"月"+date+"日 "+week[day]);
</script>
</body>
</html>

（2）获取元素得最大值

利用数组中得 prototype 属性自定义一个用于获取元素中最大值得方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title></title>
</head>

<body>
<script type="text/javascript">
var arr = new Array(5,7,6,3,9,2);
var maxValue = arr[0];
Array.prototype.outMax=function(){
	for(var i=1;i<this.length;i++){
		if(maxValue<this[i]){
			maxValue = this[i];
		}
	}
	return maxValue;
}
document.write("数组中的元素："+arr);
document.write("<br>数组中元素的最大值："+arr.outMax());
</script>
</body>
</html>

（3）获取数组中得指定元素

获取数组（1，2，3，4，5，6）中第 2 个到倒数第 2 个数组元素。使用数组对象中得 slice() 方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title></title>
</head>

<body>
<script type="text/javascript">
var arr=new Array(1,2,3,4,5,6);
document.write("原数组："+arr+"<br>");
document.write("数组中第2个到倒数第2个元素："+arr.slice(1,-1));
</script>
</table>
</body>
</html>