WEBSTORM前端 —— 第4章：JavaScript —— 第6节：数组
·
目录
一、数组是什么
1.数组
(Array)是一种可以按顺序保存数据的数据类型
2.为什么要数组？
思考：如果我想保存一个班里所有同学的姓名怎么办？
场景：如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便
二、数组的基本使用
1. 声明语法
- 数组是按顺序保存，所以每个数据都有自己的编号
- 计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
- 在数组中，数据的编号也叫索引或下标
- 数组可以存储任意类型的数据
2. 取值语法
- 通过下标取数据
- 取出来是什么类型的，就根据这种类型特点来访问
3. 一些术语
- 元素：数组中保存的每个数据都叫数组元素
- 下标：数组中数据的编号
- 长度：数组中数据的个数，通过数组的length属性获得
<!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>Document</title>
</head>
<body>
<script>
// 1. 字面量声明数组
// let arr = [1, 2, 'pink', true]
// 2. 使用new Array 构造函数声明 了解
// let arr = new Array(1, 2, 3, 4)
// console.log(arr)
</script>
</body>
</html>4. 遍历数组(重点)
用循环把数组中每个元素都访问到,一般会用for循环遍历
语法：
5.练习1：数组求和
需求：求数组 [2,6,1,7, 4] 里面所有元素的和以及平均值
分析：
①：声明一个求和变量 sum。
②：遍历这个数组，把里面每个数组元素加到 sum 里面。
③：用求和变量 sum 除以数组的长度就可以得到数组的平均值。
<!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>Document</title>
</head>
<body>
<script>
let arr = [2, 6, 1, 7, 4]
// 1. 求和的变量 sum
let sum = 0
// 2.遍历累加
for (let i = 0; i < arr.length; i++) {
// console.log(arr[i])
// sum = sum + arr[i]
sum += arr[i]
}
console.log(`数组的和的结果是: ${sum}`)
// 3. 平均值 和 / arr.length = 4
console.log(`数组的平均值结果是: ${sum / arr.length}`)
// sum = sum + arr[0]
// console.log(sum)
</script>
</body>
</html>6.练习2：数组求最大值和最小值
需求：求数组 [2,6,1,77,52,25,7] 中的最大值
分析：
①：声明一个保存最大元素的变量 max。
②：默认最大值可以取数组中的第一个元素。
③：遍历这个数组，把里面每个数组元素和 max 相比较。
④：如果这个数组元素大于max 就把这个数组元素存到 max 里面，否则继续下一轮比较。
⑤：最后输出这个 max
拓展： 自己求一下最小值
<!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>Document</title>
</head>
<body>
<script>
let arr = [2, 6, 1, 7, 400, 55, 88, 100]
// max里面要存的是最大值
let max = arr[0]
// min 要存放的是最小值
let min = arr[0]
// 遍历数组
for (let i = 1; i < arr.length; i++) {
// 如果max 比 数组元素里面的值小，我们就需要把这元素赋值给 max
// if (max < arr[i]) max = arr[i]
max < arr[i] ? max = arr[i] : max
// 如果min 比 数组元素大， 我们就需要把数组元素给min
// if (min > arr[i]) {
// min = arr[i]
// }
min > arr[i] ? min = arr[i] : min
}
// 输出 max
console.log(`最大值是: ${max}`)
console.log(`最小值是: ${min}`)
</script>
</body>
</html>三、操作数组
数组本质是数据集合, 操作数据无非就是 增 删 改 查
1.语法
2.新增
①数组.push()
方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度 (重点)
语法：
<!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>Document</title>
</head>
<body>
<script>
let arr = ['pink', 'hotpink']
// 新增 push 推末尾
// console.log(arr.push('deeppink')) // 3
// arr.push('deeppinnk', 'linghtpink')
// console.log(arr)
// 开头追加
arr.unshift('red')
console.log(arr)
</script>
</body>
</html>②arr.unshift(新增的内容)
方法将一个或多个元素添加到数组的开头，并返回该数组的新长度
语法
③案例1：数组筛选
需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组
分析：
①：声明一个新的数组用于存放新数据newArr
②：遍历原来的旧数组， 找出大于等于 10 的元素
③：依次追加给新数组 newArr
<!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>Document</title>
</head>
<body>
<script>
// 重点案例
let arr = [2, 0, 6, 1, 77, 9, 54, 3, 78, 7]
// 1. 声明新的空的数组
let newArr = []
// 2. 遍历旧数组
for (let i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
// 3. 满足条件 追加给新的数组
newArr.push(arr[i])
}
}
// 4. 输出新的数组
console.log(newArr)
</script>
</body>
</html>④案例2：数组去0案例
需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后，形成一个不包含 0 的新数组
分析：
①：声明一个新的数组用于存放新数据newArr
②：遍历原来的旧数组， 找出不等于0的元素
③：依次追加给新数组 newArr
<!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>Document</title>
</head>
<body>
<script>
let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
// 1. 声明一个新的数组
let newArr = []
// 2. 遍历筛选
for (let i = 0; i < arr.length; i++) {
if (arr[i] !== 0) {
newArr.push(arr[i])
}
}
// 输出新数组
console.log(newArr)
</script>
</body>
</html>3.删除
①数组. pop()
方法从数组中删除最后一个元素，并返回该元素的值
语法：
②数组. shift()
方法从数组中删除第一个元素，并返回该元素的值
语法：
③数组. splice()
方法 删除指定元素
语法：
<!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>Document</title>
</head>
<body>
<script>
let arr = ['red', 'green', 'blue']
// console.log(arr.pop()) // blue
// 1.pop() 删除最后一个元素
// arr.pop()
// arr.pop()
// console.log(arr)
// 2. shift() 删除第一个元素
// arr.shift()
// console.log(arr)
// 3. splice 删除指定元素 splice(起始位置-索引号, 删除几个)
arr.splice(1, 1) // 是从索引号1的位置开始删， 只删除1个
// arr.splice(1) // 从green 删除到最后
console.log(arr)
</script>
</body>
</html>4.改
<!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>Document</title>
</head>
<body>
<script>
// let arr = []
// console.log(arr)
// // console.log(arr[0]) // undefined
// arr[0] = 1
// arr[1] = 5
// console.log(arr)
let arr = ['pink', 'red', 'green']
// 修改
// arr[0] = 'hotpink'
// console.log(arr)
// 给所有的数组元素后面加个老师 修改
for (let i = 0; i < arr.length; i++) {
// console.log(arr[i])
arr[i] = arr[i] + '老师'
}
console.log(arr)
</script>
</body>
</html>四、综合案例：根据数据生成柱形图
1.需求
用户输入四个季度的数据，可以生成柱形图
2.分析
①：需要输入4次，所以可以把4个数据放到一个数组里面
- 利用循环，弹出4次框，同时存到数组里面
②：遍历改数组，根据数据生成4个柱形图，渲染打印到页面中
- 柱形图就是div盒子，设置宽度固定，高度是用户输入的数据
- div里面包含显示的数字和 第n季度
<!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>Document</title>
</head>
<body>
<script>
// let arr = []
// console.log(arr)
// // console.log(arr[0]) // undefined
// arr[0] = 1
// arr[1] = 5
// console.log(arr)
let arr = ['pink', 'red', 'green']
// 修改
// arr[0] = 'hotpink'
// console.log(arr)
// 给所有的数组元素后面加个老师 修改
for (let i = 0; i < arr.length; i++) {
// console.log(arr[i])
arr[i] = arr[i] + '老师'
}
console.log(arr)
</script>
</body>
</html>五、冒泡排序
- 冒泡排序是一种简单的排序算法。
- 它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。
- 这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。
- 比如数组 [2,3,1,4,5] 经过排序成为了 [1,2,3,4,5] 或者 [5,4,3,2,1]
<!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>Document</title>
</head>
<body>
<script>
// let arr = [5, 4, 3, 2, 1]
let arr = [2, 4, 3, 5, 1]
// for (let i = 0; i < arr.length - 1; i++) {
// for (let j = 0; j < arr.length - i - 1; j++) {
// // 开始交换 但是前提 第一个数大于第二个数才交换
// if (arr[j] > arr[j + 1]) {
// // 交换2个变量
// let temp = arr[j]
// arr[j] = arr[j + 1]
// arr[j + 1] = temp
// }
// }
// }
// arr.sort() // 排序
// sort 升序排列
// arr.sort(function (a, b) {
// return a - b
// })
// sort() 降序
arr.sort(function (a, b) {
return b - a
})
console.log(arr)
// let num1 = 10
// let num2 = 20
// let temp = num1
// num1 = num2
// num2 = temp
</script>
</body>
</html>六、数组排序
更多推荐
27
0- 0
已为社区贡献4条内容
所有评论(0)