数组
1.初识数组
-
数组是什么?
数组(Array)是一种可以按顺序保存数据的数据类型
-
数组的作用?
可以将多个数据储存到数组中
-
如何筛选出数组内的其他元素?
使用下标,数组内的元素依次从0开始计算下标,选中相应的下标就会输出相应的元素
2.数组的基本使用
1.数组的声明及了解
-
声明语法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ApHaf7LO-1648710320835)(05-数组.assets/1648608362168.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9VC20IYc-1648710320836)(05-数组.assets/1648608416906.png)]
-
解释说明
- 数组是按顺序保存,所以每个数据都有自己的编号
- 计算机中的编号从0开始,所以小明的编号为0,小刚编号为1,以此类推
- 在数组中,数据的编号也叫索引或下标
- 数组可以存储任意类型的数据
-
选择数组元素的方法:下标
取值语法:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-orl1XXcR-1648710320836)(05-数组.assets/1648608489064.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WjyS7g5y-1648710320836)(05-数组.assets/1648608501327.png)]
代码块
<script> // 命名数组 let fruit = ['苹果', '香蕉', '菠萝', '橘子', '草莓'] //如何获取数组中的元素呢,用下标的 方式获取 document.write(fruit[0]) </script>
-
检测数组长度:数组中数据的个数,通过数组的length属性获得
语法:数组名.length
代码块:
<script> // 命名数组 let fruit = ['苹果', '香蕉', '菠萝', '橘子', '草莓'] //如何获取数组中的元素呢,用下标的 方式获取 document.write(fruit[0]) //获取数组的长度 数组名.length console.log(fruit.length); //当输出的数组下标超过数组的长度是,会显示未定义undefined console.log(fruit[7]); </script>
注意:如果在使用数组下标的方式输出数组元素时,当下标超过数组长度,会输出undefined
2.数组的使用
1.遍历数组
用循环把数组中每个元素都访问到,一般会用for循环遍历
-
语法:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hz9z2xYH-1648710320837)(05-数组.assets/1648610810926.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uUIK626p-1648710320837)(05-数组.assets/1648610824850.png)]
-
代码块
<script> // 遍历循环 let str = ['关羽', '张飞', '马超', '赵云', '黄忠', '刘备', '姜维', '诸葛亮'] for (let index = 0; index < str.length; index++) { document.write(str[index]); document.write(`<br/>`) } </script>
2.求数组和及平均数
-
分析:
- 声明一个求和变量 sum。
- 遍历这个数组,把里面每个数组元素加到 sum 里面。
- 用求和变量 sum 除以数组的长度就可以得到数组的平均值。
-
代码块:
<script> //求和 let sum = 0 let num = [1, 23, 4, 5, 6, 7, 3,] for (let index = 0; index < num.length; index++) { sum += num[index]; } </script>
<script> //求数组平均数 let sum = 0 let num = [1, 23, 4, 5, 6, 7, 3,] for (let index = 0; index < num.length; index++) { sum += num[index]; } console.log(sum); sum = (sum / num.length) console.log(sum); </script>
3.筛选数组的最值
-
分析:
- 声明一个保存最大元素的变量 max。
- 默认最大值可以取数组中的第一个元素。
- 遍历这个数组,把里面每个数组元素和 max 相比较。
- 如果这个数组元素大于max 就把这个数组元素存到 max 里面,否则继续下一轮比较。
- 最后输出这个 max
-
代码块
<script> let num = [12, 23, 45, 9, 24, 6, 7, 4, 56, 99, 0] /* 求数组的最大值思路 1,首先要声明一个变量max,表示最大值 2.将这个变量与数组中的其他元素进行比较 */ let max = num[0] for (let index = 0; index < num.length; index++) { if (num[index] > max) { max = num[index] } } console.log(max); // 扩展:求数组的最小值 let min = num[0] for (let i = 0; i < num.length; i++) { if (num[i] < min) { min = num[i] } } console.log(min); </script>
3.操作数组
数组本质是数据集合, 操作数据无非就是 增 删 改 查 语法
- 查询数组数据:数组[下标],或者我们称为访问数组数据
- 重新赋值:数组[下标] = 新值
- 数组添加新的数据:以下的两种方式返回的是数组长度(会动态检测更新数组的长度)
- arr.push(新增的内容)
- arr.unshift(新增的内容)
- 删除数组中数据:
- arr.pop()
- arr.shift()
- arr.splice(操作的下标,删除的个数)
1.数组增加新的数据
1.添加元素到末尾
-
数组.push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度 (重点)
-
语法:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-edVX3zRv-1648710320837)(05-数组.assets/1648612932326.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oQWa0qsC-1648710320838)(05-数组.assets/1648612947082.png)]
-
代码块
<script> // 使用push的方式增加数组元素:数组名.(新元素) let num = [1, 2, 4, 5, 7, 5] num.push('阿良') console.log(num); </script>
-
案例
练习1:保存用户输入的四名同学的姓名
<script> // 练习:让用户输入的方式增加新数组 // 输入四个同学的姓名 let userName = [] for (let i = 1; i <= 4; i++) { let Name = prompt('请输入同学的姓名:') userName.push(Name) } console.log(userName); </script>
练习2:通过筛选的方式,将数组中大于等于10的元素添加到新数组中
<script> // 筛选数组元素,将数组中大于10的元素添加到第二个数组中 let num1 = [1, 4, 42, 78, 9, 46, 32, 12] // 建立一个新的空数组 let num2 = [] for (let index = 0; index < num1.length; index++) { // 判断当num1数组中的元素大于等于10的时候,进行下一轮循环判断 if (num1[index] >= 10) { // num1数组中的元素>=10,将这些元素添加到新数组中 num2.push(num1[index]) } } console.log(num2); </script>
2.添加元素到开头
-
arr.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度
-
语法:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DgVOEy7L-1648710320838)(05-数组.assets/1648614473445.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BFHG67aD-1648710320838)(05-数组.assets/1648614499366.png)]
-
代码展示
<script> // 使用unshift的方式将元素添加到数组的开头 let num = [1, 2, 3, 4, 5, 6] num.unshift('阿良') console.log(num);//将元素添加到数组的开头 </script>
-
案例
需求:将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后,形成一个不包含 0 的新数组
分析:
- 声明一个新的数组用于存放新数据newArr
- 遍历原来的旧数组, 找出不等于0的元素
- 依次追加给新数组 newArr
<script> let num = [0, 1, 2, 3, 4, 5, 6, 7,] // 去除掉数组中的0 let num1 = [] for (let i = 0; i < num.length; i++) { if (num[i] !== 0) { num1.push(num[i]) } } console.log(num1); </script>
3.任意位置插入新元素
-
借用splice的特性插入新元素
注意:splice更多是用来删除指定位置的元素
-
语法:
数组名.splice(想要插入元素的下标,删除数为0,新元素)
-
代码展示
<script> let num = ['苹果', '香蕉', '西瓜', '榴莲', '芒果'] // 在香蕉的后面插入'草莓' num.splice(2, 0, '草莓') console.log(num);// ['苹果', '香蕉', '草莓', '西瓜', '榴莲', '芒果'] // 数组i名.splice(插入新元素的位置,删除0个元素,新元素) </script>
2.数组删除元素
1.删除最后一个元素
-
数组. pop() 方法从数组中删除最后一个元素,并返回该元素的值
-
语法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Od47c9fz-1648710320838)(05-数组.assets/1648623798935.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fib1BhLI-1648710320838)(05-数组.assets/1648623765547.png)]
-
代码块
<script> // 从数组尾部删除数组元素 let num = [0, 1, 2, 3, 4, 5, 6, 7, 8] num.pop() console.log(num); //输出为:[0, 1, 2, 3, 4, 5, 6, 7] </script>
2.删除第一个元素
-
数组. shift() 方法从数组中删除第一个元素,并返回该元素的值
-
语法:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eKVKctL9-1648710320839)(05-数组.assets/1648623838987.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MVxI9Ed4-1648710320839)(05-数组.assets/1648623853702.png)]
-
代码块
<script> // 从数组尾部删除数组元素 let num = [0, 1, 2, 3, 4, 5, 6, 7, 8] num.pop() console.log(num); //输出为:[0, 1, 2, 3, 4, 5, 6, 7] num.shift() // 从数组头部删除数组元素 console.log(num); //输出为:[1, 2, 3, 4, 5, 6, 7] </script>
3.删除指定元素
-
数组. splice() 方法 删除指定元素
-
语法:变量名.splice(删除元素的下标,删除的个数)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kgWWXaSm-1648710320839)(05-数组.assets/1648624398158.png)]
-
解析:
- start 起始位置: 指定修改的开始位置(从0计数)
- deleteCount:
- 表示要移除的数组元素的个数
- 可选的。 如果省略则默认从指定的起始位置删除到最后
-
删除元素的使用场景:
- 随机抽奖,中奖的用户就需要从数组里面删除,不允许重复抽奖
- 点击删除按钮,相关的数据会从商品数据中删除,后期课程我们会用到删除操作,特别是splice
-
代码
<script> // 使用splice 删除指定位置的数组元素 let num = ['苹果', '香蕉', '西瓜', '榴莲', '芒果'] // 删除西瓜 num.splice(2, 1)//变量名.splice(下标,删除的数量) console.log(num); </script>
4.拓展
1.获取数组的最后一个元素
语法:数组名.length-1
输出时的语法:console.log(数组名[数组名.length-1])
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KYbyXDwq-1648710320839)(05-数组.assets/1648634953048.png)]
2.新增或者修改数组元素
本质:以下标为依据,如果该下标没有赋值,则可以输入新的值进行添加新元素;如果该下标已有元素,可以通过重新赋值的方式修改元素。
修改元素
语法:数组名[下标]=新赋值
本质就是先用下标定位元素,再通过重新赋值的方式修改元素
新增元素
本质:当下标超过数组的长度时,给该下标赋值即可添加新元素。
方法
1.改变数组的长度,胡自动添加空的元素,为未定义
2.使用索引号的方式,追加数组元素
代码块
<script>
/* 新增数组元素的方式有两种
1.改变数组的长度,胡自动添加空的元素,为未定义
*/
let num = ['程序员', '你好', '快乐', '向北']
num.length = 5
console.log(num);
console.log(num[4]);//新增的元素为undefined
// 2.使用索引号的方式,追加数组元素
let num1 = ['程序员', '你好', '快乐', '向北']
num1[4] = '休息'
console.log(num1);// ['程序员', '你好', '快乐', '向北', '休息'],添加成功
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sIqCU5pC-1648710320840)(05-数组.assets/1648635242193.png)]
3.将数组清空或者保留数组的指定长度
清空数组
数组名[]
代码展示
<script>
let num = [1, 2, 3, 4, 5, 6, 7, 8, 9]
// 清空数组
num = []
console.log(num); //输出为 []
</script>
保留数组指定长度
数组名.length = 长度
代码展示
<script>
let num = [1, 2, 3, 4, 5, 6, 7, 8, 9]
// 要保留前面五位数,其他的数值清空
num.length = 5;
console.log(num); //输出为 [1, 2, 3, 4, 5]
</script>
5.综合训练
制作柱状图
需求:打开页面让用户选择要制作几个柱子,输入之后弹出对应数量的对话框输入柱子的高度,输入完之后页面会显示出对应高度的柱子·。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zh5XNhsd-1648710320840)(05-数组.assets/1648642520121.png)]
思路分析:
- 首先先写好样式
- 在js中生成ul跟多个li标签(li需要使用for循环的方式)
- 自己先创建一个数组,将数组中的值带入到li当中
- 再将数组中的值清空,循环4次来获取用户的输入,使用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>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
width: 1000px;
height: 600px;
margin: 100px auto;
display: flex;
justify-content: space-around;
/* background-color: aqua; */
border: 1px solid black;
border-top: none;
border-right: none;
/* 设置侧轴的对齐方式 下对齐 */
align-items: flex-end;
}
li {
width: 100px;
background-color: pink;
position: relative;
}
span {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
}
div {
position: absolute;
width: 100%;
text-align: center;
/* 相对于父元素的高 */
top: 100%;
/* background-color: red; */
}
/* li:nth-child(1) {
height: 400px;
}
li:nth-child(2) {
height: 500px;
}
li:nth-child(3) {
height: 300px;
}
li:nth-child(4) {
height: 400px;
} */
</style>
</head>
<body>
<script>
/*
1.首先将样式写好
2.将ul跟li标签生成,li要循环
3. 创建数组,在收集用户输入的数组高度引入
*/
let liHtml = `<ul>`
let height = []
let num = prompt(`请输入您要创建的数量:`)
for (let i = 0; i < num; i++) {
let h = prompt(`请输入第${i + 1}个柱子的高度`)
height.push(h)
}
for (let index = 0; index < num; index++) {
liHtml += `<li style="height:${height[index]}px"><span>${index + 1}</span><div>第${index + 1}个季度</div></li>`;
}
liHtml += `</ul>`
document.write(liHtml)
</script>
</body>
</html>
-
1.首先将样式写好 2.将ul跟li标签生成,li要循环 3. 创建数组,在收集用户输入的数组高度引入 */ let liHtml = `<ul>` let height = [] let num = prompt(`请输入您要创建的数量:`) for (let i = 0; i < num; i++) { let h = prompt(`请输入第${i + 1}个柱子的高度`) height.push(h) } for (let index = 0; index < num; index++) { liHtml += `<li style="height:${height[index]}px"><span>${index + 1}</span><div>第${index + 1}个季度</div></li>`; } liHtml += `</ul>` document.write(liHtml)