JavaScript学习第四天——数组、Array

本文链接：https://blog.youkuaiyun.com/h_jQuery/article/details/115224160

复习：

流程控制语句：

分支语句：

基础分支：if(表达式){执行体}

单分支语句：if(表达式){执行体1}else{执行体2}

多分支语句：if(表达式){执行体1}else if(表达式2) {执行体2}……else{执行n}

特殊的分支语句：switch(值) {case 值1;执行体1;break;case 值2;执行体2;break;……default:执行体;break;};

注意事项：如果需要比对的值是固定的。类似于水果名称且我们比较的判断方法不是很多的情况下，建议使用switch;如果我们比较的值是一个区间的话，类似于大于3且小于7，这样建议使用if

循环语句：

for循环：for(表达式1;表达式2;表达式3){循环体}

起始的参数，终止参数，需要循环的动作

while循环：while(循环条件){执行体};

while循环的变量初始化在循环的外面，使用for循环时，变量的初始化在循环条件中完成

do while循环：do{循环体}while(表达式)

JS函数

函数的声明：

1.以变量的形式声明：var a = function() {执行体};

2.以方法的形式声明：function a() {执行体};

方法的调用:

方法名称();

函数的类型

1.按照参数来区分

有参数和无参数

带参数的函数：函数方法名后面的括号属于形参，实参是调用该函数时传入的参数

2.按照返回值来区分

有返回值和没有返回值

带返回值的只要在方法中加一个return关键字就可以有返回值

JS特殊的语法

1.在js中，每个语句结束之后可以用分号也可以不用分号，但是建议用分号

2.在js中定义变量可以用var,也可以不用var,如果不用var关键字的话，表示声明的是全局变量，但是不建议不使用var

作用域问题的介绍

全局作用域：

全局变量：申明在函数外面的变量，在引入该js文件的html中的任意地方都可以调用

全局函数：申明在****中或者是js中的函数也叫做全局函数，也可以在引入该js文件的html页面的任意位置调用

局部作用域：

局部变量：申明在函数的内部，只允许在函数内部调用，函数外部调用无法获取值，返回空

局部函数：定义在函数内部的函数叫做局部函数，局部函数可以获取外部函数的变量和数据

如果局部变量和全局变量的名字一致的时候，可能会出现变量覆盖的情况。所以在开发过程中避免变量名称重复的情况：一般公司会对变量的申明有一些规则

ECMAcript提供的全局函数

aval()把字符串进行运算

// aval()把字符串进行运算
alert(eval('5+10'));

1.递归调用：在函数的开发过程中有一种特殊的情况，这种情况叫做递归，就是指函数自己调用自己本身实现一些复杂的运算

注意：1.在函数递归的过程中一定要有一个终止条件

2.一般是通过调用函数的传入的参数来终止的，函数的递归都是带参的函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function fun(num) {
				if (num == 1) {
					return 1;
				}
				return num + fun(--num);
			}
			var result = fun(5);
			alert(result);
		</script>
	</head>
	<body>
	</body>
</html>

1-10之间的和

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function c(num) {
				if(num<=1) {
					return 1;
				}else {
					return num+c(--num);
				}
			}
			var numbers = c(10);
			alert(numbers);
		</script>
	</head>
	<body>
	</body>
</html>

数组

数组：可以存储多个数据，这些数据只有一个变量名

数组的定义：

1.用过关键字定义：

var array = new

2.直接定义

var srr = [];

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 1.通过关键字定义
			var array = new Array();
			document.write(typeof array);
			// 2.直接定义
			var arr = [];
			document.write(typeof arr);
			alert(array.length);
			alert(arr.length);
			
		</script>
	</head>
	<body>
	</body>
</html>

申明的时候赋值：

1.var arr = new Array(‘aaa’,‘bbb’);

2.var arr2 = [‘aaa’,‘bbb’];

通过下标来修改数组的值

通过下标获取数组中的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 1.通过关键字定义
			var array = new Array();
			document.write(typeof array);
			// 2.直接定义
			var arr = [];
			document.write(typeof arr);
			// alert(array.length);
			// alert(arr.length);
			// 初始化数组并赋值
			var arr = new Array('aa','bb');
			var arr2 = ['ss','dd','sdf'];
			// 通过下标来赋值
			arr[2] = 'cc';
			arr[3] = 'dd';
			document.write(arr.length);
			document.write(arr);
			// 通过下标来修改元素的值
			arr2[2]= 'zz';
			document.write(arr2.length);
			document.write(arr2);
			// 通过下标获取数组的值
			// alert(arr[3]);
			// 遍历（循环）数组
			for(var i = 0;i<arr.length;i++) {
				document.write("<br/>"+arr[i]);
			}
		</script>
	</head>
	<body>
	</body>
</html>

练习：定义一个数组，记录10个学生的姓名，并且修改其中下标为3的学生的姓名，然后一次打印出所有学生的名字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr = ['aa','bb','cc','dd','ee','ff','gg','hh','ii','jj'];
			arr[3]='kk';
			for(var i = 0;i<arr.length;i++) {
				document.write(arr[i]+'<br/>');
			}
		</script>
	</head>
	<body>
	</body>
</html>

数组的API：

1.join()

表示传入一个字符，把数组中所有的元素拼接上该字符，转成一个字符串

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// join:表示传入一个字符，把数组中所有的元素拼接上该字符，转成一个字符串
			var arr =['red','blue','black','pink'];
			document.write('arr:'+arr);
			var str = arr.join('*');
			document.write(str);
		</script>
	</head>
	<body>
	</body>
</html>

2.pop()

删除数组的最后一个元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// join:表示传入一个字符，把数组中所有的元素拼接上该字符，转成一个字符串
			var arr =['red','blue','black','pink'];
			document.write('删除前：'+arr);
			arr.pop();
			document.write('删除后：'+arr);
			
		</script>
	</head>
	<body>
	</body>
</html>

3.push()

push()如果传入参数，就在数组的最后添加一个新元素；如果没有传入参数，则是返回该数组的长度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// join:表示传入一个字符，把数组中所有的元素拼接上该字符，转成一个字符串
			var arr =['red','blue','black','pink'];
			document.write('添加前：'+arr);
			arr.push('orange');
			document.write('添加后：'+arr);
			
		</script>
	</head>
	<body>
	</body>
</html>

4.shift()

删除数组的第一个元素，并且把数组的所有元素的下标往前移动一位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr =['red','blue','black','pink'];
			// 删除数组的第一个元素，并且把数组的所有元素的下标往前移动一位
			arr.shift();
			document.write(arr);
		</script>
	</head>
	<body>
	</body>
</html>

5.unshift()

如果传递参数，向数组添加第一个元素，数组中的其他元素的下标往后移；如果不传递参数则是返回数组的长度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr =['red','blue','black','pink'];
			arr.unshift('yellow');
			document.write(arr);
			document.write(arr.unshift());
		</script>
	</head>
	<body>
	</body>
</html>

6.splice()

在数组中添加新的元素，可以是多个元素，第一个参数：起始位置；第二个参数：终止位置，若这个参数为0，则添加新的数据，不删除对应位置原有的数据，而是将后面的数据往后移；后面的参数是修改的数据或者是添加的数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr =['red','blue','black','pink'];
			// 从下标为2的元素到下标为4去添加
			// 第一个参数表示从下标为几去添加,第二个参数表示添加到截止的下标后面的添加或者修改的元素
			arr.splice(2,4,'ds','fc');
			document.write(arr);
		</script>
	</head>
	<body>
	</body>
</html>

练习：定义一个数组，统计10个学生的分数，获取数组中学生的分数不及格的人数，获取数组中学生分数大于80的人数，把下标2-5的学生的分数加10分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var mark = [56, 90, 76, 67, 78, 55, 89, 46, 78, 66];
			// 不及格的人数
			var fail = 0;
			// 分数超过80的人数
			var good = 0;
			for (var i = 0; i < mark.length; i++) {
				// if (mark[i]<60) {
				// 	fail++;
				// }
				// if(mark[i]>80) {
				// 	good++;
				// }
				// num为第i个下标元素的分数
				var num = mark[i];
				if (num < 60) {
					fail++;
				}
				
				if (num > 80) {
					good++;
				}
				// 下标2-5的分数加10分
				if (2 <= i && i <= 5) {
					num += 10;
					mark[i] = num;
				}
			}
			console.log('不及格的人数:'+fail);
			console.log('分数超过80的人数:'+good);
			console.log(mark);
		</script>
	</head>
	<body>
	</body>
</html>

7.contat()

把原有的数组和新的数组合并,然后返回

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// contat:把原有的数组和新的数组合并,然后返回
			var arr1 = ['java','css','js','jquery','html'];
			var arr2 = ['c++','python','php','vue'];
			console.log('合并前：'+arr1);
			var result = arr1.concat(arr2);
			console.log(result);
		</script>
	</head>
	<body>
	</body>
</html>

8.slice()

切割新数组，第一个参数是从那个下标开始切，第二参数是切到哪个位置，包头不包尾

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			var arr1 = ['java','css','js','jquery','html'];
			var arr2 = ['c++','python','php','vue'];
			console.log('合并前：'+arr1);
			
			// 第一个参数是从那个下标开始切，第二参数是切到哪个位置，包头不包尾
			var s = result.slice(1,3);
			console.log(s);
		</script>
	</head>
	<body>
	</body>
</html>

9.reverse()

反转数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr1 = ['java','css','js','jquery','html'];
			// 把数组反转
			var last = arr1.reverse();
			console.log(last);
		</script>
	</head>
	<body>
	</body>
</html>

10.sort()

把数组内的元素重新排序，是按照比较字符编码进行排序，而不是比较大小排序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr1 = [8,3,4,9,7,1,6,2,5];
			arr1.sort();
			console.log(arr1);
		</script>
	</head>
	<body>
	</body>
</html>

11.indexOf()

查找数组中是否存在某个字符或者某个数据，默认从元素的第一位（索引为0）开始查找，如果存在，返回所在的索引位置（下标），若不存在，就返回-1.传入的第一个参数是查找的元素，第二参数是从哪个下标开始

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// indexOf()：查找数组中是否存在某个字符或者某个数据，默认从元素的第一位（索引为0）开始查找，如果存在，返回所在的索引位置（下标），若不存在，就返回-1.传入的第一个参数是查找的元素，第二参数是从哪个下标开始
			var arr1 = ['java','css','js','jquery','html'];
			// 返回的是元素出现的下标，不存在就返回-1;
			var index = arr1.indexOf('CSS');
			console.log(index);
		</script>
	</head>
	<body>
	</body>
</html>

12.lastIndexOf()

若是只传了字符串，就是查找此参数最后一次出现的位置，返回出现的下标

若是有两个参数，则是从第二个参数传入的下标内，从数组的尾部开始往前查找字符第一次出现的位置，返回的是下标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr1 = ['java','css','js','jquery','html','c++','js','php','python','jquery','html'];
			//在0-9下标内（前10个数据内），从第十个数据往前找第一次出现的位置，然后返回所在的下标数，
			var index = arr1.lastIndexOf('js',9);
			console.log(index);
		</script>
	</head>
	<body>
	</body>
</html>

练习：定义一个数组[10,8,12,5,20,30,15]

1.将数组的所有元素输出在页面；

2.修改下标为2 的元素改为35并且将元素的内容输出页面

3.在页面编写一个按钮，点击该按钮，然后弹出数组中所有的元素的和；

4.在页面编写一个按钮，点击该按钮，然后弹出数组中所有的元素的平均值；

5.在页面编写一个按钮，点击该按钮，然后弹出数组中最大的数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr = [10, 8, 12, 5, 20, 30, 15];
			// 1.
			for (var i = 0; i < arr.length; i++) {
				document.write('第'+i+'个元素:'+arr[i] + '<br/>');
			}
			// 2.
			// arr[2] = 35;
			// document.write('<br/>' + arr[2]);
			arr.splice(2,1,35);
			for (var i = 0; i < arr.length; i++) {
				document.write('修改后的第'+i+'个元素:'+arr[i] + '<br/>');
			}
			// 3.
			function getsum() {
				var sum = 0;
				for (var i = 0; i < arr.length; i++) {
					sum += arr[i];
				}
				alert("所有元素的和:"+sum);
			}
			// 4.
			function getavg() {
				var sum = 0;
				for (var i = 0; i < arr.length; i++) {
					sum += arr[i];
				}
				var a = sum / arr.length;
				alert("所有数的平均数:"+a);
			}
			// 5.
			function getmax() {
				var max = arr[0];
				for (var i = 0; i < arr.length; i++) {
					if (max < arr[i]) {
						max = arr[i];
					}
				}
				alert("最大的数:"+max);
			}
			function getmin() {
				var min = arr[0];
				for (var i = 0; i < arr.length; i++) {
					if (min > arr[i]) {
						min = arr[i];
					}
				}
				alert("最小的数:"+min);
			}
		</script>
	</head>
	<body>
		<br />
		<button type="button" onclick="getsum()">求和</button>
		<br />
		<br />
		<button type="button" onclick="getavg()">求平均数</button>
		<br />
		<br />
		<button type="button" onclick="getmax()">求最大的数</button>
		<br />
		<br />
		<button type="button" onclick="getmin()">求最小的数</button>
	</body>
</html>

案例：

数组为：[1,3,5,7,24,32,25,48]

1.输出数组中的偶数

2.求数组中奇数的个数和偶数的个数

3.求上述数组的平均值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr = [1, 3, 5, 7, 24, 32, 25, 48];
			var sum1 = 0,
				sum2 = 0,
				size1 = 0,
				size2 = 0;
			for (var i = 0; i < arr.length; i++) {
				if (arr[i] % 2 == 0) {
					size1++;
					sum1 += arr[i];
				} else {
					size2++;
					sum2 += arr[i];
				}
			}
			console.log("偶数的个数:" + size1);
			console.log("奇数的个数:" + size2);
			console.log("偶数的平均数:" + (sum1 / size1));
			console.log("奇数的平均数:" + (sum2 / size2));
		</script>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr = [1, 3, 5, 7, 24, 32, 25, 48];
			var even = [];
			var evennum = 0;
			var odd = [];
			var oddnum = 0;
			var sum = 0;
			var avg = 0;
			for (var i = 0; i < arr.length; i++) {
				var num = arr[i];
				if (num % 2 == 0) {
					even.push(num);
					evennum++;
				} else {
					odd.push(num);
					oddnum++;
				}
				sum += num;
				avg = sum / arr.length;
			}
			document.write("偶数:" + even);
			document.write("<br/>")
			document.write("偶数的个数:" + evennum);
			document.write("<br/>")
			document.write("奇数:" + odd);
			document.write("<br/>")
			document.write("奇数的个数:" + oddnum);
			document.write("<br/>")
			document.write("数组的平均数:" + avg);
		</script>
	</head>
	<body>
	</body>
</html>