Javascript基础day04-day05
JS - 循环和数组
循环-for
• for循环基本使用
• 退出循环
• 循环嵌套
for循环语法
- 也是重复执行代码
- 好处：把声明起始值、循环条件、变化值写到一起，让人一目了然
<script>
// for (起始条件; 退出条件; 变化量) {
// 循环语句
// }
for (let i = 1; i <= 10; i++) {
document.write('月薪过万 <br>')
}
// 1. let i = 1 只会执行一次
// 2. 剩下的就是 三者循环
</script>
循环结束：
- continue：结束本次循环，继续下次循环
- break：跳出所在的循环
<script>
for (let i = 1; i < 6; i++) {
if (i === 2) {
// continue // 1345 继续 退出本次循环，继续下一次循环
break // 结束循环 退出整个循环
}
document.write(i)
}
</script>
for 循环嵌套
一个循环里再套一个循环，一般用在for循环里
<script>
// 循环嵌套
for (let i = 1; i < 6; i++) {
for (let j = 1; j < 6; j++) {
document.write('星')
}
}
// 外面循环执行一次，里面循环执行全部（5次）
</script>
for 循环嵌套-应用
计算： 假如每天记住5个单词，3天后一共能记住多少单词？ 拆解： 第一天 ： 5个单词 第二天： 5个单词 第三天： 5个单词
场景:
<script>
// 记忆单词案例
// 分析
// 1. 外面的循环 记录第n天
for (let i = 1; i < 4; i++) {
document.write(`第${i}天 <br>`)
// 2. 里层的循环记录 几个单词
for (let j = 1; j < 6; j++) {
document.write(`记住第${j}个单词<br>`)
}
}
</script>
<script>
let num1 = prompt('请输入行数')
let num2 = prompt('请输入列数')
// 外层行 里层每个的几个星星
for (let i = 1; i <= num1; i++) {
for (let j = 1; j <= num2; j++) {
document.write('★')
}
// 五个星星打完了，再换行
document.write('<br>')
}
</script>
<script>
// 外层打印几行
for (let i = 1; i <= 5; i++) {
// 里层打印几个星星
for (let j = 1; j <= i; j++) {
document.write('★')
}
document.write('<br>')
}
</script>
<script>
// 外层打印几行
for (let i = 1; i <= 9; i++) {
// 里层打印几个星星
for (let j = 1; j <= i; j++) {
// 只需要吧 ★ 换成 1 x 1 = 1
document.write(`
<div> ${j} x ${i} = ${j * i} </div>
`)
}
document.write('<br>')
}
</script>
数组
数组是什么
数组(Array)是一种可以按顺序保存数据的数据类型
为什么要数组？
-
思考：如果我想保存一个班里5个人的姓名怎么办？
-
如果有多个数据可以用数组保存起来
<script>
let arr = ['pink', 'hotpink', 'deeppink']
// 访问 / 查询
console.log(arr[0])
// 2. 改
arr[0] = 'lightpink'
// arr = '干嘛'
console.log(arr)
</script>
数组的基本使用
<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) {
// console.log(arr[i])
// 满足条件的，依次追加给新的数组
// 把 arr[i] 追加给 newArr
// newArr = arr[i] 不可以
newArr.push(arr[i])
}
}
console.log(newArr)
</script>
补充
<script>
// 指定哪个删除 可以 只是还没有讲到 splice
// 假如是删除了最后一个后，length的长度会从3个变成2吗？ 会
// 这种删除 和直接删了代码有什么区别
// 数组是我们自己手写的 自己手动删除 不就可以了吗 ！！
// shift和pop 在执行删除的时候 会返回被删除的元素 （理解成从一个鸡蛋篮子里面取鸡蛋）
// 1 篮子里面的鸡蛋个数减少
// 2 获取到那个取出来对应的鸡蛋
// 有默契， 我讲解知识，先讲解最基本使用 大家基本使用都没有问题，
// 愿意补充和拓展
// 这个数组 是动态生成的
// let arr = [];
// for (let index = 0; index < 4; index++) {
// arr.push(prompt('请输入你的分数'));
// }
// // 去掉第一0个分数
// arr.shift();
// // 去掉最后一个分数
// arr.pop();
// console.log(arr);
/*
4种方式 操作数组
2种增加
push 末位 增加
unshift 开头 增加
2种删除
pop 末位删除
shift 开头删除
*/
let arr = ['西瓜', '香蕉', '麻瓜'];
// let first = arr.shift(); // first = 西瓜 arr = 香蕉 麻瓜
// console.log(first);
// console.log(arr);
let last = arr.pop();
// last = 麻瓜
// arr = 西瓜 香蕉
console.log(last);
console.log(arr);
</script>
<script>
// 数组求和案例
let arr = [2, 6, 1, 7, 4]
// 求和变量
let sum = 0
// 求平均值变量
let average = 0
// 遍历数组
for (let i = 0; i < arr.length; i++) {
// console.log(arr[i])
// sum = sum + arr[i]
// arr[i] 就是数组里面的每个值 比如 2， 3
sum += arr[i]
}
average = sum / arr.length
document.write(`这个同学的总分是: ${sum}, 平均分是:${average}`)
</script>
操作数组
数组增加新的数据
<script>
let arr = ['black', 'red'];
// push 是把新的元素 设置到 数组的末位
// arr.push('yellow');
// unshift 是把新的元素 设置到数组的开头
arr.unshift("yellow");
console.log(arr);
/*
数组添加元素的总结
1 两种元素添加元素的方式
push 末位
unshift 开头添加元素
2 在开发中 push 用得最多 ， unshift 了解即可
*/
</script>
数组删除新的元素
<script>
// 数组 删除最后一个元素 pop
let arr = ['西瓜', '香蕉', '麻瓜'];
// 希望删除掉最后的一个元素 麻瓜 不要
// arr.pop();
// console.log(arr); // ['西瓜', '香蕉'
// 希望删除掉第一个元素
arr.shift();
console.log(arr);//
</script>
<script>
// let arr = ['red', 'green', 'blue']
// 删除最后一个元素
// arr.pop()
// 看我删了一个， 删的是 最后一个 blue
// console.log(arr.pop())
// 看我删了一个， 删的是 第一个 red
// console.log(arr.shift())
// shift是删除 unshift比shift 加了一个 un 表示加
// console.log(arr)
// 重点删除 arr.splice(从哪里开始删， 删几个)
let arr = ['red', 'green', 'blue']
// 我就想把green 删掉
// 第一个1 是从索引号是1的位置开始删
// 第二1 是删除几个
// arr.splice(1, 1)
// arr.splice(1)
console.log(arr)
</script>
冒泡排序
<script>
let arr = [2, 6, 4, 3, 5, 1]
// 1. 外层循环控制 趟数 循环 4次 arr.length - 1
for (let i = 0; i < arr.length - 1; i++) {
// 2. 里层的循环 控制 一趟交换几次 arr.length - i - 1 次序
for (let j = 0; j < arr.length - i - 1; j++) {
// 交换两个变量
// arr[j] arr[j + 1]
if (arr[j] > arr[j + 1]) {
let temp = arr[j]
arr[j] = arr[j + 1]
arr[j + 1] = temp
}
}
}
console.log(arr)
// 复习变量
// let num1 = 10
// let num2 = 20
// let temp = num1
// num1 = num2
// num2 = temp
</script>
综合案例-完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>24-动态生成柱状图-获取用户输入的高度</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;
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;
}
</style>
</head>
<body>
<script>
/*
动态获取用户输入的高度 ，然后把高度都设置到一个数组即可
1 弹出4个窗口，让用户输入数据
*/
let liHtml = `<ul>`;
let liHeight = [];
// for循环来弹出4个窗口 获取内容
for (let index = 0; index < 4; index++) {
// 弹窗获取用户的输入的高度
let height = +prompt(`请输入你想要的第${index + 1}个高度数据`);
// 把数据 添加到数组中
liHeight.push(height);
}
for (let index = 0; index < 4; index++) {
liHtml += `
<li style="height:${liHeight[index]}px;">
<span>${liHeight[index]}</span>
<div>第${index + 1}季度</div>
</li>`;
}
liHtml += `</ul>`;
document.write(liHtml);
</script>
</body>
</html>
