小言_互联网的博客

讲给后台程序员看的前端系列教程(32)——数组

2020-04-01 15:16 282人阅读  评论(0)

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)

版权声明

  • 本文原创作者：谷哥的小弟
  • 作者博客地址：http://blog.csdn.net/lfdfhl

数组概述

数组是存储一系列值的变量集合，它是由一个或多个数组元素组成的，各元素之间使用逗号分隔。每个数组元素由“下标”和“值”构成。其中，“下标”也称为"索引"， 默认情况下索引从0开始依次递增；“值”为元素的内容，它可以是任意类型的数据，如数值型、字符型、数组、对象等。

创建数组

数组在JavaScript中有两种创建方式，一种是实例化Array对象的方式；另一种是直接使用中括号[ ]的方式创建数组。在JavaScript中数组中所存数据类型可以一致，也可以不同。下面将分别对以上两种实现方式进行详细介绍。

使用Array创建数组

示例如下：

var stringArray=new Array("hello","world","JavaScript");
var numberArray=new Array(9,5,2,7);
var mixArray=new Array("zxx",95,true,null);

使用[ ]创建数组

示例如下：

var stringArray=["hello","world","JavaScript"];
var numberArray=[9,5,2,7];
var mixArray=["zxx",95,true,null];

数组基本操作

在此介绍数组常用的基本操作。

获取数组长度

语法如下：

数组名.length;

示例如下：

<script type="text/javascript">
	var stringArray=["hello","world","JavaScript"];
	document.write(stringArray.length);
	document.write("<br />")
	var numberArray=[9,5,2,7];
	document.write(numberArray.length);
	document.write("<br />")
	var mixArray=["zxx",95,true,null];
	document.write(mixArray.length);
	document.write("<br />")
</script>

结果如下：

3
4
4

在JavaScript中数组名.length不但可以获取数据长度还可以修改数组长度，示例如下：

var stringArray=["hello","world","JavaScript"];
stringArray.length=8;

访问数组元素

语法如下：

数组名[元素下标];

遍历数组元素

遍历数组元素方式1

<script type="text/javascript">
		var stringArray=["hello","world","JavaScript"];
		var arrayLength=stringArray.length;
		for(var i=0;i<arrayLength;i++){
			document.write(stringArray[i]);
			document.write("<br />");
		}
</script>

遍历数组元素方式2

<script type="text/javascript">
		var stringArray=["hello","world","JavaScript"];
		for(k in stringArray){
			document.write(stringArray[k]);
			document.write("<br />");
		}
</script>

添加数组元素

语法如下：

数组名[索引]=值;

示例如下：

<script type="text/javascript">
	var stringArray=[];
	stringArray[0]=96;
	stringArray[1]=97;
	stringArray[2]=98;
</script>

修改数组元素

修改元素与添加元素的使用方式相同，不同的是修改元素是为已含有值的元素重新赋值。

语法如下：

数组名[索引]=值;

示例如下：

<script type="text/javascript">
	var stringArray=["hello","world","JavaScript"];
	stringArray[0]=96;
	stringArray[1]=97;
	stringArray[2]=98;
</script>

删除数组元素

语法如下：

delete 数组名[索引];

示例如下：

<script type="text/javascript">
	var stringArray = ["hello", "world", "JavaScript"];
	var arrayLength = stringArray.length;
	for (var i = 0; i < arrayLength; i++) {
		document.write(stringArray[i]);
		document.write("<br />");
	}
	document.write("<br />");
	delete stringArray[1];
	arrayLength = stringArray.length;
	for (var i = 0; i < arrayLength; i++) {
		document.write(stringArray[i]);
		document.write("<br />");
	}
</script>

结果如下：

由此可见：delete可删除数组中指定下标的元素值，但是删除后该该元素依然会占 用存储位置其值为undefined。

数组常见操作

数组是JavaScript中最常用的数据类型之一，为此在JavaScript中为Array对象中提供了许多内置方法，如栈方法、检索方法、数组转字符串的方法等。在此，对数组的常用方法进行详细讲解。

栈方法


示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>栈方法</title>
	</head>
	<body>
		<script type="text/javascript">
			var arr = ["hello", "world"];
			console.log('原数组：' + arr);
			var last = arr.pop();
			console.log('在末尾移出元素：' + last + ' - 移出后数组：' + arr);
			var len = arr.push('Tulip', 'Jasmine');
			console.log('在末尾添加元素后长度变为：' + len + ' - 添加后数组：' + arr);
			var first = arr.shift();
			console.log('在开头移出元素：' + first + ' - 移出后数组：' + arr);
			len = arr.unshift('Balsam', 'Xixi');
			console.log('在开头添加元素后长度变为：' + len + ' - 添加后数组：' + arr);
		</script>
	</body>
</html>

结果如下：

检索方法

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>检索方法</title>
	</head>
	<body>
		<script type="text/javascript">
			var arr = ['potato', 'tomato', 'chillies', 'greenpepper'];
			var search = 'cucumber';
			if (arr.indexOf(search) === -1) { 
				arr.push(search);
				console.log('更新后的数组为: ' + arr);
			} else if (arr.indexOf(search) > -1) { 
				console.log(search + '元素已在arr数组中');
			}
		</script>
	</body>
</html>

结果如下：

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>检索方法</title>
	</head>
	<body>
		<script type="text/javascript">
			var res = [];
			var arr = ['a', 'b', 'a', 'c', 'a', 'd']; 
			var search = 'a'; 
			var i = arr.lastIndexOf(search);
			while (i !== -1) {
				res.push(i);
				i = (i > 0 ? arr.lastIndexOf(search, i - 1) : -1);
			}
			console.log('元素 ' + search + ' 在数组中的所有位置为：' + res);
		</script>
	</body>
</html>

结果如下：

数组转字符串


示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组转字符串</title>
	</head>
	<body>
		<script type="text/javascript">
			var stringArray = new Array("hello", "world", "JavaScript");
			var numberArray = new Array(9, 5, 2, 7);
			document.write(stringArray.join());
			document.write("<br />");
			document.write([stringArray,numberArray].join("-"));
			document.write("<br />");
			document.write(stringArray.toString());
			document.write("<br />");
			document.write([stringArray,numberArray].toString());
			document.write("<br />");
		</script>
	</body>
</html>

结果如下：

数组排序

方法如下：

sort( );

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组排序</title>
	</head>
	<body>
		<script type="text/javascript">
			var stringArray = new Array("hello", "world", "JavaScript");
			var numberArray = new Array(9, 5, 2, 7);
			document.write(stringArray.toString());
			document.write("<br />");
			stringArray.sort();
			document.write(stringArray.toString());
			document.write("<br />");
			document.write(numberArray.toString());
			document.write("<br />");
			numberArray.sort();
			document.write(numberArray.toString());
			document.write("<br />");
		</script>
	</body>
</html>

结果如下：

综合练习

练习1:查找数组中的最大值与最小值

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>查找数组中的最大值与最小值</title>
	</head>
	<body>
		<script type="text/javascript">
			var numberArray = new Array(9, 5, 2, 7, 33);
			var max = numberArray[0];
			var min = numberArray[0];
			for (var i = 0; i < numberArray.length; i++) {
				if (numberArray[i] > max) {
					max = numberArray[i];
				}
				if (numberArray[i] < min) {
					min = numberArray[i];
				}
			}
			document.write("数组:" + numberArray.toString());
			document.write("<br />");
			document.write("数组中最大值为:" + max);
			document.write("<br />");
			document.write("数组中最小值为:" + min);
			document.write("<br />");
		</script>
	</body>
</html>

结果如下：

练习2:冒泡排序

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>冒泡排序</title>
	</head>
	<body>
		<script type="text/javascript">
			var arr = [1, 22, 5, 23, 56, 33];
			document.write('待排序数组：' + arr);
			document.write("<br />")
			for (var i = 1; i < arr.length; i++) {
				for (var j = 0; j < arr.length - i; j++) {
					if (arr[j] > arr[j + 1]) {
						[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
					}
				}
			}
			document.write('排序后数组：' + arr);
		</script>
	</body>
</html>

结果如下：

练习3:插入排序

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插入排序</title>
	</head>
	<body>
		<script type="text/javascript">
			var arr = [1, 22, 5, 23, 56, 33];
			document.write('待排序数组：' + arr);
			document.write("<br />")
			for (var i = 1; i < arr.length; i++) {
				for (var j = i; j > 0; j--) {
					if (arr[j - 1] > arr[j]) {
						[arr[j - 1], arr[j]] = [arr[j], arr[j - 1]];
					}
				}
			}
			document.write('排序后数组：' + arr);
		</script>
	</body>
</html>

结果如下：

练习4:省市区三级联动

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>省市区三级联动</title>
	</head>
	<body>
		<form>
			<select id="province">
				<option value="-1">请选择</option>
			</select>
			<select id="city"></select>
			<select id="area"></select>
		</form>
		<script>
			// 省份数组
			var provinceArr = ['上海', '江苏', '河北'];
			// 城市数组
			var cityArr = [
				['上海市'],
				['苏州市', '南京市', '扬州市'],
				['石家庄', '秦皇岛', '张家口']
			];
			// 区域数组
			var areaArr = [
				[
					['黄浦区', '静安区', '长宁区', '浦东区']
				],
				[
					['虎丘区', '吴中区', '相城区', '姑苏区', '吴江区'],
					['玄武区', '秦淮区', '建邺区', '鼓楼区', '浦口区'],
					['邗江区', '广陵区', '江都区']
				],
				[
					['长安区', '桥西区', '新华区', '井陉矿区'],
					['海港区', '山海关区', '北戴河区', '抚宁区'],
					['桥东区', '桥西区', '宣化区', '下花园区']
				]
			];
			function createOption(obj, data) {
				for (var i in data) {
					var op = new Option(data[i], i); 
					obj.options.add(op); 
				}
			}
			var province = document.getElementById('province');
			createOption(province, provinceArr);
			var city = document.getElementById('city');
			province.onchange = function() {
				city.options.length = 0; 
				createOption(city, cityArr[province.value]);
				if (province.value >= 0) {
					city.onchange();  
				} else {
					area.options.length = 0; 
				}
			};
			var area = document.getElementById('area');
			city.onchange = function() {
				area.options.length = 0; 
				createOption(area, areaArr[province.value][city.value]);
			};
		</script>
	</body>
</html>

结果如下：


转载：https://blog.csdn.net/lfdfhl/article/details/100688948
查看评论
* 以上用户言论只代表其个人观点，不代表本网站的观点或立场