循环for语句
for 是JavaScript提供的另一种循环控制的话句，它和 while只是语法上存在差异。
for循环基本使用
作用:重复执行代码
好处:把声明起始值、循环条件、变化值写到一起，让人一目了然，它是最常使用的循环形式
for(变量起始值;终止条件;变量变化量){//循环体}
循环遍历数组并且打印出来
退出循环
- continue 退出本次循环，一般用于排除或者跳过某一个选项的时候，可以使用continue
- break退出整个for循环一般用于结果已经得到,后续的循环不需要的时候可以使用
了解:
1.while(true)来构造“无限”循环，需要使用break退出循环。
2.for(;;)也可以来构造“无限”循环，同样需要使用break退出循环。
当如果明确了循环的次数的时候推荐使用for循环
当不明确循环的次数的时候推荐使用while循环
循环嵌套
一个循环里再套一个循环，一般用在for循环里
for(外部声明记录循环次数的变量;循环条件;变化值){
for(内部声明记录循环次数的变量;循环条件;变化值){
循环体
}
}
案例一：【打印i行j列的星星】
<body>
<script>
// // 外层循环打印行数
// for (let i = 1; i <= 5; i++) {
// // 里层循环打印几个星星
// for (let j = 1; j <= 5; j++) {
// document.write('☆')
// }
// // 进行换行显示
// document.write('<br>')
// }
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>
</body>案例二：打印倒三角的星星
<body>
<script>
// 1. 外层循环控制行数
for (let i = 1; i <= 5; i++) {
// 2. 里层循环控制列数（几个星星）
for (let j = 1; j <= i; j++) {
document.write('◆')
}
// 换行
document.write('<br>')
}
</script>
</body>案例三：打印99乘法表
<body>
<script>
// 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>')
}
</script>
</body>数组(Array)
是一种可以按顺序保存数据的数据类型
为什么要数组?
思考:如果我想保存一个班里所有同学的姓名怎么办?场景:如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便
声明语法：
取值语法：
需求:求数组[2,6,1,77,52,25,7]中的最大值
<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()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度
Array.prototype.push() - JavaScript | MDN (mozilla.org)
arr.unshift(新增的内容)方法将一个或多个元素添加到数组的开头，并返回该数组的新长度
数组筛选
数组去0案例
需求:将数组[2,0,6,1,77,0,52,0,25,7]中的0去掉后，形成一个不包含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>排序
数组.sort()方法可以排序
删除
数组.pop()方法从数组中删除最后一个元素，并返回该元素的值
语法:arr.pop()
数组.shift()方法从数组中删除第一个元素，并返回该元素的值
语法:arr.shift()
数组.splice()方法删除指定元素
arr.splice(start,deleteCount)
arr.splice(起始位置，删除几个元素
解释
start 起始位置:指定修改的开始位置(从0计数)
deletecount:表示要移除的数组元素的个数;可选的。如果省略则默认从指定的起始位置删除到最后
综合案例
根据数据生成柱形图
需求:用户输入四个季度的数据，可以生成柱形图
<!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 {
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>
</html>
