数组（Array）
数组：有序的 数据的集合
1、数组的基本使用
数组(Array)是一种可以按顺序保存数据的数据类型
2、声明语法
数组是按顺序保存，所以每个数据都有自己的编号
计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
在数组中，数据的编号也叫索引或下标
数组可以存储任意类型的数据
演示： 里面函数的声明了解即可 后面的内容会有讲到
<script>
// 1、字面量声明数组
// let arr = [1, 2, 'aqua', true]
// console.log(arr);
//2、使用 new Array 构造函数声明 了解即可
let arr = new Array(1, 2, 3, 4)
console.log(arr);
</script>
3、取值语法
例 ：
如果我想保存一个班里5个人的姓名怎么办？如果有多个数据可以用数组保存起来 然后放到一个变量中 管理非常方便
通过下标取数据 取出来是什么类型的，就根据这种类型特点来访问
这里的中括号表示一个空数组
我们可以把想要的数据直接写在里面就好了 不需要起名字
当你需要存储多个数据的时候 中间用逗号分隔就可以了
<script>
// 创建一个数组就是直接给变量赋值为一个中括号
let arr = [100, true, 'hello world']
// 索引（下标） 0 1 2
// 下标 ：从0开始 依次 + 1
console.log(arr);
</script>
输出后在控制台的显示 依次排列 从0开始
4、 一些术语：
元素：数组中保存的每个数据都叫数组元素
下标：数组中数据的编号
长度：数组中数据的个数，通过数组的 length 属性获得
<script>
// 声明数组（array）
let arr = ['冰冰', '铁甲宝宝', '西瓜', '榴莲', '雪梨']
// 获取这个数组中第0个元素
console.log(arr[0]);
// arr.length 表示该数组的长度
// 输出显示 数组的长度是多少
console.log(arr.length);
console.log(arr[100]); //不会有正常的结果（如果我们获取的元素的下标超出了数组的长度 显示的是undefined）
</script>
5、遍历数组（重点）
用循环把数组中每个元素都访问到,一般会用for循环遍历
语法：
<script>
let arr = [100, true, 'hello world']
for (let i = 0; i < arr.length; i++) {
// document.write(arr[i])
console.log(arr[i]);
}
</script>
案例 ：数组求和
<script>
let arr = [2, 6, 1, 7, 4]
// 设一个求和的变量
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);
</script>
案例 ：数组求最大值和最小值
需求：求数组 [数字自己编] 中的最大值 分析：
①：声明一个保存最大元素的变量 max。
②：默认最大值可以取数组中的第一个元素。
③：遍历这个数组，把里面每个数组元素和 max 相比较。
④：如果这个数组元素大于max 就把这个数组元素存到 max 里面，否则继续下一轮比较。
⑤：最后输出这个 max
拓展： 自己求一下最小值
<script>
// 要求 输出最大值和最小值
let arr = [2, 1, 4, 5, 66, 666, 88, 90]
// max 里面要存的是最大值
let max = arr[0]
// min 里面要存的是最小值
let min = arr[0]
// 遍历数组
for (let i = 0; i < arr.length; i++) {
// 如果max 比数组元素里面的值小 我们需要把这些元素赋值给max
if(max < arr[i]){
max = arr[i]
}
// 三元书写方式
max < arr[i] ? max = arr[i] : max
if (min > arr[i]) {
// 如果min 比 数组元素大 我们需要把数组元素给min
min = arr[i]
}
// 三元书写方式
min > arr[i] ? min = arr[i] : min
}
// 输出max的值
console.log(`最大的值:${max}`);
console.log(`最小的值:${min}`);
</script>
柱形图案例：结合css
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul{
margin: 100px auto;
list-style: none;
width: 1000px;
height: 600px;
display: flex;
border-left: 1px solid pink;
border-bottom: 1px solid pink;
justify-content: space-around;
align-items: flex-end;
}
li{
position: relative;
width: 80px;
background-color: pink;
}
span{
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
}
div{
position: absolute;
top: 100%;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<script>
// let liheight = [100, 200, 250, 300]
// let num = +prompt('请输入你想要生成的li标签的个数')
// 设置一个高度的空数组
let liheight = []
// ul在循环外面设置字符串拼接 把循环包裹起来
let lihtml = `<ul>`;
for (let index = 0; index < 4; index++) {
// 弹出获取用户的数据
let height = +prompt(`请输入你想要的第${index + 1}个高度数据`)
// 获取的数据添加进数组中
liheight.push(height);
}
for (let index = 0; index < 4; index++) {
// 存放li标签 通过循环增加li标签 在li标签中填写css的行内式
// 由用户输入的数据作为高度 liheight[index]替代
// index初始为0 div里加1 让0变1
lihtml += `<li style="height:${liheight[index]}px">
<span>${liheight[index]}</span>
<div>第${index + 1}季度</div>
<li/>`
}
lihtml += `</ul>`;
// 输出结果
document.write(lihtml)
</script>
2、数组的操作
数组本质是数据集合, 操作数据无非就是 增 删 改 查 语法：
增
数组添加新的数据
arr.push(在后面新增内容)
arr.unshift(在前面新增内容)
掌握利用push向数组添加元素(数据)
数组.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度 (重点)
语法：
<script>
// 原有数据两个 长度为2
let arr = ['pink', 'skyblue']
// 新增元素两个 排在后面 长度更新 此时length为4
arr.push('red', 'aqua')
// push 是在元素后面继续添加元素
// UNshift 是在元素的前面添加新的元素
// 可以单个使用也可以一起使用 看项目需要
arr.unshift('bule')
console.log(arr);
</script>
重点案例 ：数组筛选
需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组 分析：
①：声明一个新的数组用于存放新数据newArr
②：遍历原来的旧数组， 找出大于等于 10 的元素
③：依次追加给新数组 newArr
<script>
// 重点案例
let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
// 声明新的空数组
let newarr = []
// 遍历旧数组
for (let i = 0; i < arr.length; i++) {
if(arr[i] >= 10){
// 满足条件 用push 追加给新的数组
newarr.push(arr[i])
}
}
// 输新的数组 查看是否正确
console.log(newarr)
</script>
相似案例演示：数组去0案例
需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后，形成一个不包含 0 的新数组 分析：
①：声明一个新的数组用于存放新数据newArr
②：遍历原来的旧数组， 找出不等于0的元素
③：依次追加给新数组 newArr
<script>
// 去掉数字 0 其他加入新数据
let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
// 声明新的空数组
let newarr = []
// 遍历旧数组
for (let i = 0; i < arr.length; i++) {
if(arr[i] !== 0){
// 满足条件 用push 追加给新的数组
newarr.push(arr[i])
}
}
// 输新的数组 查看是否正确
console.log(newarr)
</script>
删
删除数组中数据
arr.pop()
arr.shift()
arr.splice(操作的下标,删除的个数)
数组. pop( ) 方法从数组中删除最后一个元素，并返回该元素的值
数组. shift( ) 方法从数组中删除第一个元素
演示：
<script>
// 原本5个数字
let arr = [2, 0, 6, 1, 77]
// arr.pop() :代表删除最后一个元素
arr.pop()
arr.pop()
// 输出最新的数组显示 77 和 1 已经没有了
console.log(arr);
// 输出你删掉了哪个元素
// console.log(arr.pop());
// shift : 代表删除第一个元素
arr.shift()
console.log(arr);
</script>
4️⃣种增删的综合方式
<script>
let arr = ['冰冰', '铁甲宝宝', '西瓜', '榴莲', '雪梨']
// 删除第一个元素 arr1 = 被删的那个元素 冰冰 arr = 铁甲宝宝 西瓜 榴莲 雪梨
let arr1 = arr.shift()
// 删除最后一个元素 arr2 = 被删的那个元素 雪梨 arr = 铁甲宝宝 西瓜 榴莲
let arr2 = arr.pop()
console.log(arr);
console.log(arr1);
console.log(arr2);
// 末位增加元素
arr.push('小白', '小红')
// 开头增加元素
arr.unshift('天线宝宝')
console.log(arr);
</script>
数组. splice() 方法 删除指定元素 工作常用
解释：
start 起始位置:
指定修改的开始位置（从0计数）
deleteCount:
表示要移除的数组元素的个数
可选的。 如果省略则默认从指定的起始位置删除到最后
<script>
let arr = [2, 0, 6, 1, 77]
// splice 删除指定元素 splice （start 起始位置 ，deleteCount: 表示删几个）
// start：起始位置 表示在那个位置开始删除 输入的是索引号
// 索引号2 表示从第二个开始删除 可以不写deleteCount 但会把后面的全删了 写1 那就删除1个 写2就删除2个
arr.splice(2, 1)
console.log(arr);
</script>
指定增加
<script>
let arr = ['冰冰', '铁甲宝宝', '西瓜', '榴莲', '雪梨']
// 指定删除也可以变成指定增加 不想删除就写0 在后面添加想要增加的元素
arr.splice(2, 0, '大白')
// 索引号2 是西瓜 添加就是把西瓜的2 占有 变成大白2 西瓜3
// 换个理解 西瓜是现任 大白是小三 小三上位 现任靠后
console.log(arr);
</script>
补充小知识
<script>
// 数组里面可以存放其他类型数据 但不建议这么做
let arr = ['冰冰', 100, null, NaN, undefined, true]
// 把数组清空 不想要里面的元素 arr = [] 或 arr.length = 0
// arr = []
// 保留三个元素其他不要
arr.length = 3
console.log(arr)
let arr1 = ['冰冰', '铁甲宝宝', '西瓜', '榴莲', '雪梨']
// 获取数组最后一个元素 arr1[arr.length - 1]
console.log(arr1[arr1.length - 1]) //常用的规则
// 直接修改元素 西瓜改傻瓜
arr1[2] = '傻瓜'
console.log(arr1)
// 新增 如果 10 这位置已经有元素那么就是修改
// 如果没有 添加就可以了 最终数组长度变成10 中间没有赋值的属性为空属性
arr1[10] = '海绵宝宝'
console.log(arr1)
</script>
改
重新赋值
数组[下标] = 新值
案例演示：
<script>
// let arr = []
// 输出显示为0 因为里面为空 没有数据
// console.log(arr)
// console.log(arr[0]); // 下标0 里面为空 显示undefined
// 给数组里的下标序号 0 赋值为1 下标序号1 赋值为5
// 相当原本的 arr[] 里面添加 1 和 5 即是 arr[1, 5]
// arr[0] = 1
// arr[1] = 5
// 输出显示结果
// console.log(arr)
// 或者
let arr = ['aqua', 'red', 'orange']
// 修改
arr[0] = 'hotpink'
console.log(arr)
</script>
演示：
<script>
let arr = ['aqua', 'red', 'orange']
// 修改
arr[0] = 'hotpink'
// 给所有的数组元素后面加个文字
for (let i = 0; i < arr.length; i++) {
arr[i] = arr[i] + '先生'
}
console.log(arr)
</script>
查
查询数组数据
数组[下标]
或者我们称为访问数组数据 就是我们平常的控制台查询等代码
