数组
大约 11 分钟
JavaScript数组
以下为学习过程中的极简提炼笔记，以供重温巩固学习
准备工作
- 已完成JavaScript前面5节学习
学习目的
掌握JavaScript数组 知道什么是数组及其应用的场景，掌握数组声明及访问的语法
数组
数组：(Array)是一种可以按顺序保存数据的数据类型
**使用场景：**如果有多个数据可以用数组保存起来，然后放到一个变量中
- 定义数组和数组单元
- 访问数组和数组索引
- 数据单元值类型
- 数组属性
- 学会如何操作数组
定义数组和数组单元
通过 [] 定义数组，数据中可以存放真正的数据 我们这些数据称为数组单元 数组单元之间使用英文逗号分隔
数组的声明语法：
let 数组名称 = [数据a,数据b,数据c,...数据n]- 数组是按顺序保存，所以每个数据都有自己的索引值
- 计算机中的编号从
0开始，索引值实际是按着数据单元在数组中的位置依次排列的 - 索引值也叫下标
- 数组可以存储任意类型的数据
语法格式案例
数组定义
<body>
<script>
// 1. 语法，使用 [] 来定义一个空数组
// 定义一个空数组，然后赋值给变量 classes
let classes = [];
// 2. 定义非空数组
let classes2 = ['小明', '小刚', '小红', '小丽', '小米']
// 3. 字面量声明数组
let arr = [1, 2, 'pink', true]
// 4. 使用new Array 构造函数声明 了解
let arr2 = new Array(1, 2, 3, 4)
console.log(arr2)
</script>
</body>访问数组和数组索引
通过索引值可以访问数组中对应索引值的数据 索引值对应的数据，也叫单元值，也叫数组元素
- 通过数组中，数据的索引值/下标来获取数据
- 取出来是什么类型的，就根据这种类型特点来访问
数组的取值语法：
数组名[索引值]语法格式案例
通过索引访问数组
<body>
<script>
let classes = ['小明', '小刚', '小红', '小丽', '小米']
// 1. 访问数组，语法格式为：变量名[索引值]
document.write(classes[0]) // 结果为：小明
document.write(classes[1]) // 结果为：小刚
document.write(classes[4]) // 结果为：小米
// 2. 通过索引值还可以为数组单重新赋值
document.write(classes[3]) // 结果为：小丽
// 重新为索引值为 3 的单元赋值
classes[3] = '小小丽'
document.wirte(classes[3]); // 结果为： 小小丽
</script>
</body>数据单元值类型
- 数组做为数据的集合，它的单元值可以是任意数据类型
- 数组单元值类型可以混合
let mixin = [true, 1, false, 'hello']语法格式案例
数组单元值类型
<body>
<script>
// 数组单值类型可以是任意数据类型
// a) 数组单元值的类型为字符类型
let list = ['HTML', 'CSS', 'JavaScript']
// b) 数组单元值的类型为数值类型
let scores = [78, 84, 70, 62, 75]
// c) 混合多种类型
let mixin = [true, 1, false, 'hello']
</script>
</body>数组属性
数组在 JavaScript 中的数据类型，属于对象类型
数组中数据的个数/数组的长度，通过数组的length属性获得
语法格式案例
获取数组长度
<body>
<script>
// 定义一个数组
let arr = ['html', 'css', 'javascript']
// 数组对应着一个 length 属性，它的含义是获取数组的长度
console.log(arr.length) // 3
</script>
</body>用循环把数组中每个元素都访问到，一般会用for循环遍历
for(let i = 0; i < 数组名.length;i++){
数组名[i]
}语法格式案例
数组求和及平均值
<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>操作数组
数组本质是数据集合, 操作数据无非就是 查 改 增 删 语法：
//查：查询数组索引值数据
数组名[下标]
//改：重新赋值
数组[下标] = 新值
//增：数组添加新数据
数组.push(元素a,元素b,...元素n) 向数组尾部，动态添加一个或多个单元值
数组.unshit(元素a,元素b,...元素n) 向数组头部，动态添加一个或多个单元值
//删：删除索引值对应数据
数组.pop() 删除最后一个单元值
数组.shift() 删除第一个单元值
数组.splice(删除的起始位置号,删除多少个元素) 动态删除任意单元
//start 起始位置: 指定修改的开始位置（从0计数）
// deleteCount: 表示要移除的数组元素的个数，为可选项，如果省略则默认从指定的起始位置删除到最后
//排序：
数组.sort(函数) 数组排序
let arr = [4, 2, 5, 1, 3]
// 1.升序排列写法
arr.sort(function (a, b) {
return a - b
})
console.log(arr) // [1, 2, 3, 4, 5]
// 2.降序排列写法
arr.sort(function (a, b) {
return b - a
})
console.log(arr) // [5, 4, 3, 2, 1]使用以上4个方法时，都是直接在原数组上进行操作，并返回操作后的数组 成功调任何一个方法，原数组都跟着发生相应的改变，并返回该数组的新长度，动态操作 在添加或删除单元时 length 不会发生错乱
语法格式案例
查 改 增 删
<body>
<script>
// 定义一个数组
let arr = ['html', 'css', 'javascript']
// 1. push 动态向数组的尾部添加一个单元
arr.push('Nodejs')
console.log(arr)
arr.push('Vue')
// 2. unshit 动态向数组头部添加一个单元
arr.unshift('VS Code')
console.log(arr)
// 3. splice 动态删除任意单元
arr.splice(2, 1) // 从索引值为2的位置开始删除1个单元
console.log(arr)
// 4. pop 删除最后一个单元
arr.pop()
console.log(arr)
// 5. shift 删除第一个单元
arr.shift()
console.log(arr)
</script>
</body>语法格式案例
改
<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>语法格式案例
增
<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>语法格式案例
删
<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>语法格式案例
数组筛选
<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>语法格式案例
数组去0
<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>语法格式案例
综合案例-根据数据生成柱形图
<head>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
width: 700px;
height: 300px;
border-left: 1px solid pink;
border-bottom: 1px solid pink;
margin: 50px auto;
justify-content: space-around;
align-items: flex-end;
text-align: center;
}
.box>div {
display: flex;
width: 50px;
background-color: pink;
flex-direction: column;
justify-content: space-between;
}
.box div span {
margin-top: -20px;
}
.box div h4 {
margin-bottom: -35px;
width: 70px;
margin-left: -10px;
}
</style>
</head>
<body>
<script>
// 1. 四次弹框效果
// 声明一个新的数组
let arr = []
for (let i = 1; i <= 4; i++) {
// let num = prompt(`请输入第${i}季度的数据:`)
// arr.push(num)
arr.push(prompt(`请输入第${i}季度的数据:`))
// push记得加小括号，不是等号赋值的形式
}
// console.log(arr) ['123','135','345','234']
// 盒子开头
document.write(` <div class="box">`)
// 盒子中间 利用循环的形式 跟数组有关系
for (let i = 0; i < arr.length; i++) {
document.write(`
<div style="height: ${arr[i]}px;">
<span>${arr[i]}</span>
<h4>第${i + 1}季度</h4>
</div>
`)
}
// 盒子结尾
document.write(` </div>`)
</script>
</body>语法格式案例
冒泡排序
<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>语法格式案例
数组结合函数体验
<body>
<script>
// 练习1
// 找出数组中 元素为10的下标，有则打印该下标，没有则打印 -1
// let arr = [88, 20, 10, 100, 50]
// let result = -1
// for (let i = 0; i < arr.length; i++) {
// if (arr[i] === 10) {
// result = i
// }
// }
// 需求1：让用户输入五个有效年龄（0 - 100之间），放入数组中
// - 必须输入五个有效年龄年龄，如果是无效年龄，则不能放入数组中
// arr.length 动态的
let arr = []
while (arr.length < 5) {
let num = +prompt(`请输入第${arr.length + 1}个数据`)
arr.push(num)
}
// 练习2
// <head>
// <style>
// span {
// display: inline-block;
// width: 100px;
// padding: 5px 10px;
// border: 1px solid pink;
// margin: 2px;
// border-radius: 5px;
// box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);
// background-color: rgba(255, 192, 203, .1);
// text-align: center;
// color: hotpink;
// }
// </style>
// </head>
// // 1. 外层循环控制行数
// for (let i = 1; i <= 9; i++) {
// // 2. 里层循环控制列数
// for (let j = 1; j <= i; j++) {
// document.write(`<span>${j} X ${i} = ${i * j}</span>`)
// }
// // 换行
// document.write('<br>')
// }
// // 1. 外层循环控制行数
// for (let i = 1; i <= 9; i++) {
// // 2. 里层循环控制列数
// for (let j = 1; j <= i; j++) {
// document.write(`<span>${j} X ${i} = ${i * j}</span>`)
// }
// // 换行
// document.write('<br>')
// }
// // 1. 外层循环控制行数
// for (let i = 1; i <= 9; i++) {
// // 2. 里层循环控制列数
// for (let j = 1; j <= i; j++) {
// document.write(`<span>${j} X ${i} = ${i * j}</span>`)
// }
// // 换行
// document.write('<br>')
// }
// 声明
function sheet99() {
for (let i = 1; i <= 9; i++) {
// 2. 里层循环控制列数
for (let j = 1; j <= i; j++) {
document.write(`<span>${j} X ${i} = ${i * j}</span>`)
}
// 换行
document.write('<br>')
}
}
// 调用
sheet99()
sheet99()
sheet99()
sheet99()
</script>
</body>练习
语法格式案例
练习
<body>
<script>
// 找出数组中 元素为10的下标，有则打印该下标，没有则打印 -1
// let arr = [88, 20, 10, 100, 50]
// let result = -1
// for (let i = 0; i < arr.length; i++) {
// if (arr[i] === 10) {
// result = i
// }
// }
// 需求1：让用户输入五个有效年龄（0 - 100之间），放入数组中
// - 必须输入五个有效年龄年龄，如果是无效年龄，则不能放入数组中
// arr.length 动态的
let arr = []
while (arr.length < 5) {
let num = +prompt(`请输入第${arr.length + 1}个数据`)
arr.push(num)
}
</script>
</body>