循环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}// 输出 maxconsole.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>
