第10章：数组
本章目标
- 掌握一维数组的运用
课程回顾
- js中循环控制语句的作用
数组
概述
什么是数组
数组是一种特殊的变量，它能够一次存放一个以上的值。
如果您有一个项目清单（例如，汽车品牌列表），在单个变量中存储汽车品牌应该是这样的：
1
2
3
| var car1 = "奔驰";
var car2 = "宝马";
var car3 = "奥迪";
|
不过，假如您希望遍历所有汽车并找到一个特定的值？假如不是三个汽车品牌而是三百个呢？
解决方法就是数组！
数组可以用一个单一的名称存放很多值，并且还可以通过引用索引号来访问这些值。
语法
1
2
3
4
5
6
7
8
9
10
11
12
|
var arrayName;
arrayName=new Array(长度);
arrayName[索引]=值;
document.write("长度："+arrayName.length);
document.write("首项"+arrayName[0]);
|
说明：数组索引从0开始，最大索引为长度-1.
应用
案例：数组的基本运用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数组的基本运用</title>
</head>
<body>
<script>
var nums;
nums=new Array(5);
nums[0]=36;
nums[1]=18;
nums[2]="李四";
nums[3]=3.15;
nums[4]=98;
document.write(nums);
</script>
</body>
</html>
|
案例：数组的多种定义方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数组的多种定义方式</title>
</head>
<body>
<script>
var nums3=[56,34,90,23,100];
document.write("第一个数据："+nums3[0]);
document.write("数组的长度："+nums3.length);
</script>
</body>
</html>
|
案例：数组的伸展性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数组的伸展性</title>
</head>
<body>
<script>
var nums=new Array(3);
nums[0]=89;
nums[1]=56;
nums[2]=77;
nums[3]=100;
nums[99]=200;
document.write(nums[5]);
</script>
</body>
</html>
|
案例：查看数组中所有数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>查看数组中所有数据</title>
</head>
<body>
<script>
var nums=[45,89,3,99,100];
nums.forEach(function(item){
document.write(item+",");
});
</script>
</body>
</html>
|
案例：查找数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>查找数据</title>
</head>
<body>
<script>
var nums=[45,89,3,99,100];
var userNum=parseInt(prompt("请输入你要查找的数据："));
var isFind=false;
for(var i=0;i<nums.length;i++){
if(userNum==nums[i]){
isFind=true;
break;
}
}
if(isFind){
alert("找到了");
}else{
alert("没找到");
}
</script>
</body>
</html>
|
案例：修改数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>修改数据</title>
</head>
<body>
<script>
var nums=[45,89,3,99,100];
var oldNum=parseInt(prompt("请输入你要修改的数据："));
var newNum=parseInt(prompt("请输入修改后的数据："));
var index=-1;
for(var i=0;i<nums.length;i++){
if(oldNum==nums[i]){
index=i;
break;
}
}
if(index!=-1){
nums[index]=newNum;
alert("修改成功");
}else{
alert("修改失败，没有找到要修改的数据。");
}
for(var i=0;i<nums.length;i++){
document.write(nums[i]+",");
}
</script>
</body>
</html>
|
案例：删除数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>修改数据</title>
</head>
<body>
<script>
var nums=[45,89,3,99,100];
var delNum=parseInt(prompt("请输入你要删除的数据："));
var index=-1;
for(var i=0;i<nums.length;i++){
if(delNum==nums[i]){
index=i;
break;
}
}
if(index!=-1){
delete nums[index];
alert("删除成功");
}else{
alert("删除失败，没有找到要修改的数据。");
}
for(var i=0;i<nums.length;i++){
document.write(nums[i]+",");
}
</script>
</body>
</html>
|
案例：数组排序
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>修改数据</title>
</head>
<body>
<script>
var nums=new Array(5);
for(var i=0;i<nums.length;i++){
nums[i]= +prompt("请输入一个整数：");
}
nums.sort();
for(var i=0;i<nums.length;i++){
document.write(nums[i]+",");
}
</script>
</body>
</html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>修改数据</title>
</head>
<body>
<script>
var nums=new Array(5);
for(var i=0;i<nums.length;i++){
nums[i]= +prompt("请输入一个整数：");
}
nums.sort(function(a,b){
if(a<b){
return 1;
}else if(a>b){
return -1;
}else{
return 0;
}
});
for(var i=0;i<nums.length;i++){
document.write(nums[i]+",");
}
</script>
</body>
</html>
|
课后作业
基本作业(必须):
1.将一组数组[ ],的内容反过来，生成一个新的数组
2.将数组0,30,10,40,20,30,70,40,90,50中小于或等于50的数输出
3.弹出输入框，用户输入10个整数并且存到一个数组里，找到奇数和偶数分别有多少个，把这个数组打印出来,可以输入0，但是0不包括用户的输入10个里面，且输入0时是不消耗输入次数。
4。定义一个数组，存储科目：英语，语文，数学，然后依次输入老师的名字，最后输出科目对应的老师。（例如：语文：张莹）
5,在数组[10,11，30,40,40,50,60,70,80，90]中， 把11改成20然后把第一个40删除掉，然后把结果打印出来。
6.定义几个数字型的数组算出总分和平均分
7.定义一个长度为5的数组，里面包含有整型、字符串型的数据，然后更改3次数组中的数据，最后输出最终结果。
8.定义10个数字型的数组能被3整除数的和
9.随机输入10个整数，然后求其中的最大数和最小数各是多少。
10.随机输入10个整数，然后按照降序排序，最后再将首位和末尾数字互换，最终输出数组中的结果。
挑战作业(可选)：
1.[1,1,3,4,5,5,2,1,4]数组中每个元素的出现次数
2.广创科技需要一个学生管理系统,主要功能如下：
A：注册，需要输入姓名，年龄，电话号码
B：查看，输出所有的学生的信息
C：查找，根据输入学生名字输出，出对应的名片信息
D：删除，根据姓名来删除（可删除多个同名的）
重点：因为广创比较大所以可以无限录入学生名片
提示：用警告框输出数据`
微信
