循环结构
在JavaScript中，循环语句指的是在满足某个条件下重复执行 指定的一段代码。若条件结果为true,则重复执行，则进入循环，否则结束循环。
在JavaScript中，循环语句如下：
- while语句
- do…while语句
- for语句
while语句
JavaScript中while语句创建一个循环，只要条件返回结果为true，该循环就会执行循环体
语法：
while (条件表达式) {// 当条件为true时，则执行循环体statements;
}
怎么运行的？
- 如果条件返回结果为true，则会执行大括号里的循环体statements
- 当执行完大括号里的循环体statement后，会再次判断条件。如果条件返回结果仍然是true，则会继续执行大括号里的循环体，直到条件返回结果为false，则结束整个循环，然后再执行while语句后面的程序
while循环结构工作原理
示例：计算1+2+3+…+100的值
<script>var num=1;var sum=0;while(num<=100){sum+=num;++num;}console.log("1+2+3...+100="+sum);
</script>
运行结果
1+2+3...+100=5050
怎么实现？
- 初始化两个变量：num赋值为1，用于遍历1到100的整数，sum赋值为0，用于存储累加的结果
- 使用while循环语句，条件是num<=100，只要num的值小于或等于100，循环就会继续执行下去
- 在循环体中，将当前数值num累加到sum上，即sum+=num
- 通过自增运算符，将num的值加一
- 当num值大于100时，循环结束
- 最后，用console.log()函数打印出计算结果
do…while语句
do…while循环语句创建一个循环，该循环执行循环体，直到条件计算结果为false
语法：
do{//如果条件结果返回true,则执行该循环体statements;
}while(条件);
- 与while循环语句不同，do…while语句首先会无条件执行循环体statements一次，然后再判断是否符合条件。
- 如果符合条件，则重复执行循环体；如果不符合条件，则退出循环，执行循环后面的语句
- do…while语句跟while语句非常相似，并且任何一个都可以转换成等价的另外一个
- do…while语句结尾处括号后后有一个分号（;）,该分号不能省略
注意：从后面ES6+版本开始，while(条件)后面的分号（;）是可选的
do…whileu循环语句工作原理
do…while在实践中，当您希望在检查条件之前至少执行一次循环体时，通常会使用该语句。
示例
<script>var num=0;do{console.log(num);num++;}while(num<5)</script>
运行结果
0
1
2
3
4
- 初始化一个变量num并赋值为0，用于记录循环计数
- 使用do…while循环。首先执行一次循环体statements内的代码，然后再检查是否满足继续循环
- 在循环体内，通过console.log()函数打印出当前num的值
- 然后使用后置自增运算符将num的值加1，继续循环
- 循环的条件是num<5，只要num的值小于5，就会继续执行循环体内的代码
- 每次循环都会使num的值加1，并分别输出当前num的值
while语句
- 先判断、后循环
do…while
- 先循环、后判断
for 语句
for 是 JavaScript 提供的另一种循环控制的话句，它和 while 只是语法上存在差异。
for循环语句创建一个具有三个可选表达式的循环
语法：
for(初始化表达式;条件表达式;循环后操作){//循环体statements;}
- 初始化表达式：这是用于初始化一个计数器。该表达式可以使用var或let关键字声明新的变量，使用var声明的变量不是该循环的局部变量，而是与for循环处在同样的作用域中。用let声明的变量是语句的局部变量
- 条件表达式：一个条件表达式被用于确定每一次循环是否被执行。如果表达式的结果为true，则循环体statements将被执行。这个表达式是可选的。如果被忽略，则被认为永远为真。如果计算结果为false，那么执行流程将跳出循环
- 循环后操作：每次循环体执行后都要执行的表达式。通常被用于更新或者自增计数器变量
上述循环控制参数之间使用分号;间隔开。
for循环语句工作原理
示例：
<script>for(var i=1;i<5;i++){console.log(i);}
</script>
运行结果
1
2
3
4
怎么运行的？
- 首先，声明一个变量i并赋值为1
- 其次，如果i的值小于5，则执行循环体输出i值
- 每次循环i的值都会增加1
在for循环中，三个表达式是可选的
for( ; ; ){statements；}
使用for语句在没有初始化表达式的循环
var j=1;for( ;j<10;j+=2){console.log(j);}
输出
1
3
5
7
9
for语句不使用条件的循环
条件表达式是可选的，如果省略条件表达式，则需要break语句来终止循环
for(var x=1; ;x+=2){console.log(x);if(x>10){break;}}
输出
1
3
5
7
9
11
中止循环
break语句提前终止整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用（提高效率）
continue语句会终止当前本次循环，并立即继续下一次迭代。一般用于排除或者跳过某一个选项的时候
示例：break中止
<script>var i=1;while(i<=5){console.log(i);if(i === 3){break;}i++;}</script>
输出：
1
2
3
示例：continue中止
<script>var i=1;while(i<=5){console.log(i);if(i === 3){continue}i++;}
</script>
输出
1
2
4
5
循环实战
倒三角
// 外层打印几行
for (let i = 1; i <= 5; i++) {// 里层打印几个星星for (let j = 1; j <= i; j++) {document.write('★')}document.write('<br>')
}
九九乘法表
样式css
div {display: inline-block;width: 100px;padding: 5px 10px;border: 1px solid pink;margin: 2px;border-radius: 5px;box-shadow: 2px 2px 2px rgba(255, 192, 203, 0.4);background-color: rgba(255, 192, 203, 0.1);text-align: center;color: hotpink;
}
js文件
// 外层打印几行
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>')
}
