数组
数组（Array）是一种可以按顺序保存数据的数据类型
场景：如果有多个数据可以用数组保存起来，然后放到一个变量中，方便管理
声明数组
声明语法：
let 数组名 = [数据1,数据2,...,数据n]
1
代码示例：
let names = ['张三','李四','王五','赵六']
1
数组的基本使用
获取数组元素
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个JS程序</title>
</head>
<body>
<script>
let names = ['张三','李四','王五','赵六']
document.write(names)
document.write(names[0]) // 张三
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
结果如下：
注意事项：
数组是按顺序保存，所以每个数据都有自己的编号
计算机中的编号从 0 开始，所以张三的编号为 0，以此类推
在数组中，数据的编号也叫索引或下标
数组可以存储任意类型的数据
获取数组的长度
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个JS程序</title>
</head>
<body>
<script>
let names = ['张三','李四','王五','赵六']
document.write('数组的长度为' + names.length)
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
结果如下：
遍历数组
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = ['刘德华','张学友','周星驰','黎明','郭富城','周华健','周杰伦','王力宏','陶喆']
for(let i = 0;i < arr.length;i++){
document.write(arr[i] + ` `)
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
结果如下：
案例：求数组中的最值
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [10,9,45,123,4,86]
// 求数组的最大值
let max = arr[0]
// 遍历数组
for(let i = 0; i < arr.length; i++){
// 如果当前的元素比max大，就把当前元素赋值给max
if(arr[i] > max){
// 把当前元素赋值给max
max = arr[i]
}
}
// 输出最大值
document.write(`数组的最大值是${max}`)
</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
结果如下：
数组操作
数组本质是数据集合，操作数组就是增删改查
查询数据
获取数组元素
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个JS程序</title>
</head>
<body>
<script>
let names = ['张三','李四','王五','赵六']
document.write(names)
document.write(names[0]) // 张三
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
结果如下：
遍历数组
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = ['刘德华','张学友','周星驰','黎明','郭富城','周华健','周杰伦','王力宏','陶喆']
for(let i = 0;i < arr.length;i++){
document.write(arr[i] + ` `)
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
结果如下：
修改数据
通过赋新值覆盖旧值来修改数组
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [0,0,0,0,0,0,0,0,0,0]
let num = 1
for(let i = 0;i < 10;i++){
arr[i] += num
num++
}
document.write(arr)
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
结果如下：
新增数据
利用 数组.push() 将一个或多个元素添加到数组末尾，并返回该数组的新长度
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = ['国破山河在','城春草木深','感时花溅泪','恨别鸟惊心']
document.write(`新增前的数组：${arr}<br>`)
document.write(`新增前的数组长度：${arr.length}<br>`)
arr.push('烽火连三月','家书抵万金','白头搔更短','浑欲不胜簪')
document.write(`新增后的数组：${arr}<br>`)
document.write(`新增后的数组长度：${arr.length}<br>`)
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
结果如下：
利用 arr.unshift() 将一个或多个元素添加到数组的开头，并返回该数组的新长度
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = ['竹喧归浣女','莲动下渔舟','随意春芳歇','王孙自可留']
document.write(`新增前的数组：${arr}<br>`)
document.write(`新增前的数组长度：${arr.length}<br>`)
arr.unshift('空山新雨后','天气晚来秋','明月松间照','清泉石上流')
document.write(`新增后的数组：${arr}<br>`)
document.write(`新增后的数组长度：${arr.length}<br>`)
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
结果如下：
案例：数组筛选
将数组[90, 65, 70, 97, 78, 89, 80]中大于等于 80 的元素选出来，放入新数组
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [90, 65, 70, 97, 78, 89, 80]
let newArr = []
for(let i = 0; i < arr.length; i++){
if(arr[i] >= 80){
newArr.push(arr[i])
}
}
document.write(newArr)
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
结果如下：
删除数据
使用 arr.pop() 从数组中删除最后一个元素，并返回该元素的值
使用 arr.shift() 从数组中删除第一个元素，并返回该元素的值
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [1,2,3,4,5,6,7,8,9]
document.write(`原数组： ${arr}<br>`)
document.write(`pop删除的元素是： ${arr.pop()}<br>`)
document.write(`shift删除的元素是： ${arr.shift()}<br>`)
document.write(`删除后的数组： ${arr}<br>`)
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
结果如下：