持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情
本章内容
1.for语句
2.嵌套循环
3.数组
4.操作数组
5.生成柱状图案例
for 语句
for 是 JavaScript 提供的另一种循环控制的话句，它和 while 只是语法上存在差异。
for语句的基本使用
1.实现循环的 3 要素
<script>
// 1. 语法格式
// for(起始值; 终止条件; 变化量) {
// // 要重复执行的代码
// }
// 2. 示例：在网页中输入标题标签
// 起始值为 1
// 变化量 i++
// 终止条件 i <= 6
for(let i = 1; i <= 6; i++) {
document.write(`<h${i}>循环控制，即重复执行<h${i}>`)
}
</script>
- 变化量和死循环，
for循环和while一样，如果不合理设置增量和终止条件，便会产生死循环。
- 跳出和终止循环
<script>
// 1. continue
for (let i = 1; i <= 5; i++) {
if (i === 3) {
continue // 结束本次循环，继续下一次循环
}
console.log(i)
}
// 2. break
for (let i = 1; i <= 5; i++) {
if (i === 3) {
break // 退出结束整个循环
}
console.log(i)
}
</script>
结论：
JavaScript提供了多种语句来实现循环控制，但无论使用哪种语句都离不开循环的3个特征，即起始值、变化量、终止条件，做为初学者应着重体会这3个特征，不必过多纠结三种语句的区别。- 起始值、变化量、终止条件，由开发者根据逻辑需要进行设计，规避死循环的发生。
- 当如果明确了循环的次数的时候推荐使用
for循环,当不明确循环的次数的时候推荐使用while循环
注意：
for的语法结构更简洁，故for循环的使用频次会更多。
循环嵌套
<script>
for (let i = 1; i <= 3; i++) {
console.log(`输入i的值是:${i}`)
for (let j = 1; j <= 3; j++) {
console.log(`输入j的值是:${j}`)
}
}
</script>
嵌套案例
<script>
let row = +prompt('请输入行数')
let col = +prompt('请输入列数')
for (let i = 1; i <= row; i++) {
for (let j = 1; j <= col; 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>
乘法口诀表
<style>
div {
display: inline-block;
width: 100px;
margin: 3px;
padding: 8px 9px;
text-align: center;
color: rgb(58, 132, 237);
border-radius: 5px;
background-color: rgb(98, 234, 116);
}
</style>
<script>
for (let i = 1; i <= 9; i++) {
for (let j = 1; j <= i; j++) {
document.write(`<div>${j}x${i}=${i * j}</div>`)
}
document.write('<br>')
}
</script>
数组
数组： (Array)是一种可以按顺序保存数据的数据类型
使用场景： 如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便
数组的基本使用
定义数组和数组单元
<script>
// 1. 语法，使用 [] 来定义一个空数组
// 定义一个空数组，然后赋值给变量 classes
// let classes = [];
// 2. 定义非空数组
let classes = ['小明', '小刚', '小红', '小丽', '小米']
</script>
通过 [] 定义数组，数据中可以存放真正的数据，如小明、小刚、小红等这些都是数组中的数据，我们这些数据称为数组单元，数组单元之间使用英文逗号分隔。
访问数组和数组索引
使用数组存放数据并不是最终目的，关键是能够随时的访问到数组中的数据（单元）。其实 JavaScript 为数组中的每一个数据单元都编了号，通过数据单元在数组中的编号便可以轻松访问到数组中的数据单元了。
我们将数据单元在数组中的编号称为索引值，也有人称其为下标。
索引值实际是按着数据单元在数组中的位置依次排列的，注意是从0 开始的
数据单元值类型
<script>
// 6. 数组单值类型可以是任意数据类型
// a) 数组单元值的类型为字符类型
let list = ['HTML', 'CSS', 'JavaScript']
// b) 数组单元值的类型为数值类型
let scores = [78, 84, 70, 62, 75]
// c) 混合多种类型
let mixin = [true, 1, false, 'hello']
</script>
数组长度属性
数组在 JavaScript 中并不是新的数据类型，它属于对象类型。
<script>
// 定义一个数组
let arr = ['html', 'css', 'javascript']
// 数组对应着一个 length 属性，它的含义是获取数组的长度
console.log(arr.length) // 3
</script>
数组求和及平均值
<script>
let arr = [3, 4, 5, 6, 7, 8, 9, 10]
let sum = 0
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
//sum=sum+arr[i] 同下
sum += arr[i]
}
console.log(`求和结果是:${sum}`)
console.log(`平均值是:${sum / arr.length}`)
</script>
求数组中的最大值
<script>
let arr = [88, 66, 4, 9999, 155, 3544]
let max = arr[0]
let min = arr[0]
for (let i = 1; i < arr[i]; i++) {
if (max < arr[i]) {
max = arr[i]
}
//三元max=max<arr[i]?arr[i]:max
if (min > arr[i]) {
min = arr[i]
}
//三元min=min>arr[i]?arr[i]:min
}
console.log(`最大值是${max}`)
console.log(`最小值是${min}`)
</script>
操作数组
数组做为对象数据类型，不但有 length 属性可以使用，还提供了许多方法：
- push 动态向数组的尾部添加一个单元
- unshift 动态向数组头部添加一个单元
- pop 删除最后一个单元
- shift 删除第一个单元
- splice 动态删除任意单元
使用以上4个方法时，都是直接在原数组上进行操作，即成功调任何一个方法，原数组都跟着发生相应的改变。并且在添加或删除单元时 length 并不会发生错乱。
数组的增删改
<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>
开心宝贝案例(作战时一般只有超人们和大大怪,小小怪)
<script>
let arr = ['博士', '花心超人', '小心超人', '甜心超人', '粗心超人', '迪迦']
//博士改成开心超人
arr[0] = '开心超人'
//添加大大怪,小小怪和美少女
arr.push('大大怪', '小小怪', '桃子姐')
//添加博士到第一个
arr.unshift('博士')
//从第6个开始删除,删除一个 迪迦被删了
arr.splice(6, 1)
//删掉第一个 博士又没了
arr.shift()
//删掉最后一个 桃子姐陪博士去了
arr.pop()
for (let i = 0; i < arr.length; i++) {
arr[i] = '开心宝贝' + arr[i]
}
console.log(arr)
</script>
数组的筛选
<script>
//原数组
let arr = [20, 61, 77, 0, 5, 2, 10, 14]
//声明新的空数组
let newarr = []
//遍历原数组
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
//满足条件 大于等于10
if (arr[i] >= 10) {
//给新数组
newarr.push(arr[i])
}
}
//输出新数组
console.log(newarr)
</script>
生成柱状图
css部分
<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>
js部分
<script>
let arr = []
for (let i = 1; i <= 4; i++) {
/* let num=prompt(`请输入查询第${i}季度:`)
arr.push(num) 同下*/
arr.push(prompt(`请输入查询第${i}季度:`))
}
console.log(arr)
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>
输入10 20 30 70的效果图:
最后是原图(●ˇ∀ˇ●)
