【JavaScript】超详细的流程控制——循环篇

🚀 循环

在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句

JS 中的循环

➢ 在Js 中，主要有三种类型的循环语句：

for 循环
while 循环
do…while 循环

🚀 for 循环

➢ 在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句

1、语法结构

➢ for 循环主要用于把某些代码循环若干次，通常跟计数有关系。其语法结构如下：

for(初始化变量; 条件表达式; 操作表达式 ){//循环体语句}

初始化变量：通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。
条件表达式：用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。
操作表达式：每次循环的最后都要执行的表达式。通常被用于更新或者递增计数器变量。当然，递减变量也是可以的。

例子：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>for(var i =0; i <100; i++){
            console.log('你好呀~');}</script></head><body></body></html>

结果展示：
for循环

2、执行过程：

（1）初始化变量，初始化操作在整个 for 循环只会执行一次。
（2）执行条件表达式，如果为true，则执行循环体语句，否则退出循环，循环结束。
（3）执行操作表达式，此时第一轮结束。
（4）第二轮开始，直接去执行条件表达式（不再初始化变量），如果为 true ，则去执行循环体语句，否则退出循环。
（5）继续执行操作表达式，第二轮结束。
（6）后续跟第二轮一致，直至条件表达式为假，结束整个 for 循环。

3、断点调试：

➢ 断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。
➢ 断点调试可以帮我们观察程序的运行过程
浏览器中按 F12 → 源代码(或者sources) → 找到需要调试的文件 → 在程序的某一行设置断点
监视(或者Watch)，可以监视变量的值的变化。
F11: 程序单步执行，让程序一行一行的执行，这个时候，观察监视(或者watch)中变量的值的变化。
代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。

演示：
断点调试

4、for 循环重复执行相同的代码

➢ for循环可以重复执行相同的代码，比如输出10句“宝贝我错了”

例子：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>for(var i=1;i<=10;i++){
            console.log('宝贝我错了 ┭┮﹏┭┮');}</script></head><body></body></html>

结果展示：
for循环执行相同代码1
➢ 用户输入循环次数，并弹窗显示：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 用户输入循环次数，并弹窗显示var num =prompt('请输入循环次数：');for(var i =1;i <= num;i++){alert('宝贝我错了 ┭┮﹏┭┮');}</script></head><body></body></html>

结果展示：
for循环执行相同代码2

5、for 循环重复执行不相同的代码

➢ for 循环还可以重复不同的代码，这主要是因为使用了计数器，计数器在每次循环过程中都会有变化。

例如，求输出一个人1到100岁：

例子1：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>for(var i=1;i<=100;i++){
            console.log('(⊙o⊙)哇奥~Ta今年'+i+'岁了哎~');}</script></head><body></body></html>

结果展示：
for循环执行不同代码

例子2：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>for(var i=1;i<=100;i++){if(i==1){
                console.log('哇哇哇~一个可爱的小宝宝降临啦~普天同庆！');}elseif(i==100){
                console.log('Ta去了另一个世界...');}else{
                console.log('祝你'+i+'岁生日快乐！');}}</script></head><body></body></html>

结果展示：
for循环执行不同代码例子2

6、for 循环重复执行某些相同操作

➢ for 循环因为有了计数器的存在，我们还可以重复的执行某些操作，比如做一些算术运算。

例如：计算1~100的整数累加和

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>var sum =0;for(var i=1;i<=100;i++){//sum += i
            sum = sum + i;}
        console.log(sum);</script></head><body></body></html>

结果展示：
1~100的和

7、for循环案例

求和

（1）求1100之间的所有数的平均值
（2）求1100之间的所有偶数和奇数的和
（3）求1~100之间的所有能被3整除的数字的和

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 求1~100之间的所有数的平均值var sum =0;for(var i =1;i <=100;i++){
            sum = sum + i;}
        console.log('1~100中整数和的平均值是：'+ sum/100);// 求1~100之间的所有偶数even和奇数odd的和var even =0;var odd =0;for(var i=1;i<=100;i++){if(i %2==0){
                even = even + i;}else{
                odd = odd + i;}}
        console.log('1~100中偶数和是：'+ even);
        console.log('1~100中奇数和是：'+ odd);// 求1~100之间的所有能被3整除的数字的和var sum3 =0;for(var i=1;i<=100;i++){if(i%3==0){
                sum3 = sum3 +i;}}
        console.log('1~100中能被3整除的数字的和是：'+sum3);</script></head><body></body></html>

结果展示：
for循环案例

打印星星⭐

➢ 根据用户输入个数，打印相应的星星⭐个数

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 定义一个空字符串var str ='';var num =prompt('请问您想打印几颗星星呢？');for(var i =1;i <= num;i++){
            str = str +'⭐';}alert(str);
        console.log(str);</script></head><body></body></html>

结果展示：
打印星星

统计班级成绩

➢ 要求用户输入班级人数，之后依次输入每个学生的成绩，最后打印出该班级总的成绩以及平均成绩。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>var sum =0;var num =prompt('请输入班级总人数：');for(var i=1;i<=num;i++){var score =prompt('请输入'+i+'号同学的成绩：');// 因为输入框prompt取过来的值是字符串型的，需要进行数据类型转换
            sum = sum +parseFloat(score);}alert('班级总成绩为：'+ sum);alert('班级平均成绩为：'+ sum/num);</script></head><body></body></html>

结果展示：
班级成绩

🚀 双重 for 循环

1、双重 for 循环概述

➢ 很多情况下，单层 for 循环并不能满足我们的需求，此时就可以通过循环嵌套来实现。
➢ 循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for 循环，这样的 for 循环语句我们称之为双重for循环。

2、双重 for 循环语法

for(外循环的初始; 外循环的条件; 外循环的操作表达式){for(内循环的初始; 内循环的条件; 内循环的操作表达式){ 
        需执行的代码;}}

内层循环可以看做外层循环的语句
内层循环执行的顺序也要遵循 for 循环的执行顺序
外层循环执行一次，内层循环要执行全部次数

例子：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>for(var i =1;i <=3;i++){
            console.log('⭐这是外层for循环第'+ i +'次⭐');// 加了⭐容易辨认for(var j=1;j <=3;j++){
                console.log('这是内层for循环第'+ j +'次');}}</script></head><body></body></html>

结果展示：
双重for循环

3、案例

（1）打印五行星星⭐

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>var str ='';for(var i=1;i<=5;i++){for(var j=1;j<=5;j++){
                str = str +'⭐';}
            str = str +'\n'// 换行}
        console.log(str);</script></head><body></body></html>

结果展示：
打印五行星星

（2）打印 n 行 m 列的星星⭐

➢ 要求用户输入行数和列数，之后弹窗显示用户所输入的行数和列数的星星。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>var rows =prompt('请问您想打印多少行星星呀？');var cols =prompt('请问您想打印多少列星星呀？');var str ='';for(var i =1;i <= row;i++){for(var j =1;j <= column;j++){
                str = str +'⭐';}
            str = str +'\n';}alert(str);</script></head><body></body></html>

结果展示：
打印n行n列星星

（3）打印倒三角形

方法一：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>var rows =prompt('请问您想打印多少行倒三角星星呀？');var str ='';for(var i=1;i<=rows;i++){for(var j=i;j<=rows;j++){
                str = str +'⭐';}
            str = str +'\n';}alert(str);</script></head><body></body></html>

方法二：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>var rows =prompt('请问您想打印多少行倒三角星星呀？');var cols = rows;var str ='';for(var i=1;i<=rows;i++){for(var j=1;j<=cols;j++){
                str = str +'⭐';}
            str = str +'\n'; 
            cols--;}alert(str);</script></head><body></body></html>

结果展示：
打印倒三角

（4）打印正三角形

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>var rows =prompt('请问您想打印多少行正三角星星呢？');var str ='';for(var i=1;i<=rows;i++){for(var j=1;j<=i;j++){
                str = str +'⭐';}
            str = str +'\n';}alert(str);</script></head><body></body></html>

结果展示：
打印正三角

（5）打印九九乘法表

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>var str ='';for(var i=1;i<=9;i++){for(var j=1;j<=i;j++){
               str = str + j +'x'+ i +'='+ i*j +'\t';}
            str = str +'\n';}
        console.log(str);</script></head><body></body></html>

结果展示：
九九乘法表

4、for 循环小结

for 循环可以重复执行某些相同代码
for 循环可以重复执行某些不同的代码，因为有计数器
for 循环可以重复执行某些操作，比如算术运算符加法操作
随着需求增加，双重for循环可以做更多、更好看的效果
双重 for 循环，外层循环一次，内层 for 循环全部执行
for 循环是循环条件和数字直接相关的循环
分析要比写代码更重要

🚀 while 循环

➢ while 语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。
➢ while语句的语法结构如下：

while(条件表达式){// 循环体代码}

➢ 执行思路：
① 先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码
② 执行循环体代码
③ 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束

➢ 注意：
① 使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环
② while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断，比如判断用户名和密码

例子：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>var num =1;while(num<=99){
            console.log('哗啦啦~');
            num++;}</script></head><body></body></html>

结果展示：
while循环例子

while案例

（1）1~100岁生日快乐

➢ 打印祝你多少岁生日快乐

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>// while 循环打印祝你多少岁生日快乐，从1~100岁var age =1;while(age<=100){
            console.log('祝你'+age+'岁生日快乐哦~');
            age++;}</script></head><body></body></html>

效果展示：
while循环打印生日快乐

（2）计算n~m的整数和

➢ 弹窗让用户输入计算整数和的起始数和结束数，最后弹出显示结果

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 注意：从prompt输入框中取到的值的数据类型是字符串型的，需要进行数据类型转换var startNum =parseFloat(prompt('请输入您想计算整数和的起始数：'));var stopNum =parseFloat(prompt('请输入您想计算整数和的结束数：'));var sum =0;while(startNum<=stopNum){
            sum = sum + startNum;
            startNum++;}alert(sum)</script></head><body></body></html>

结果展示：
while循环计算整数和

（3）案例三

➢ 弹窗显示“你爱我吗？”如果输入“我爱你”，弹窗显示“别爱我，没结果 ”，否则将一直弹窗显示“你爱我吗？”

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>// var str = prompt('你爱我吗？')while(str!='我爱你'){var str =prompt('你爱我吗？')}alert('别爱我，没结果');</script></head><body></body></html>

while你爱我吗例子

🚀 do while 循环

➢ do… while 语句其实是 while 语句的一个变体。该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。
➢ do… while 语句的语法结构如下：

do{// 循环体代码 - 条件表达式为 true 时重复执行循环体代码}while(条件表达式);

➢ 执行思路：
① 先执行一次循环体代码
② 再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码

➢ 注意：先再执行循环体，再判断，我们会发现 do…while 循环语句至少会执行一次循环体代码

例子：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>var num =1;do{
            console.log('加油呀(ง •_•)ง');
            num++;}while(num <=100);</script></head><body></body></html>

效果展示：
dowhile循环例子

1、案例

（1）打印1~100岁生日快乐

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>var age =1;do{
            console.log('祝你'+age+'岁生日快乐🎂');
            age++;}while(age<=100);</script></head><body></body></html>

结果展示：
dowhile打印生日快乐

（2）计算整数和

➢ 弹出输入框让用户输入计算整数和的起始数和结束数，最后弹窗显示结果

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>// prompt输入框中得到的数的数据类型是字符串型的，需转换为数字型var startNum =parseFloat(prompt('请输入计算整数和的起始数：'));var stopNum =parseFloat(prompt('请输入计算整数和的结束数：'));var sum =0;do{
            sum = sum + startNum;
            startNum++;}while(startNum<=stopNum);alert(sum)</script></head><body></body></html>

结果展示：
dowhlie计算整数和

（3）案例三

➢ 弹窗显示“你爱我吗？”如果输入“我爱你”，弹窗显示“你确定这就是爱吗？真的爱我吗？”，否则将一直弹窗显示“你爱我吗？”

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>do{var str =prompt('你爱我吗？');}while(str !='我爱你');alert('你确定这就是爱吗？真的爱我吗？')</script></head><body></body></html>

结果展示：
dowhile你爱我吗

循环小结

JS 中循环有 for 、while 、 do while
三个循环很多情况下都可以相互替代使用
如果是用来计次数，跟数字相关的，三者使用基本相同，但是小编更喜欢用 for
while 和 do…while 可以做更复杂的判断条件，比 for 循环灵活一些
while 和 do…while 执行顺序不一样，while 先判断后执行，do…while 先执行一次，再判断执行
while 和 do…while 执行次数不一样，do…while 至少会执行一次循环体，而 while 可能一次也不执行

🚀 continue break

continue 关键字

➢ continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。

例如，吃5个苹果，第3个有虫子，就扔掉第3个，继续吃第4个第5个苹果，其代码实现如下：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>for(var i=1;i<=5;i++){if(i==3){continue;// 只要遇到continue就退出本次循环，直接跳到i++}
            console.log('我正在吃第'+i+'个🍎');}</script></head><body></body></html>

结果展示：
continue关键字

案例

求1~100之间，除了能被7整除之外的整数和

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>var sum =0;for(var i=1;i<=100;i++){if(i%7==0){continue;}
            sum = sum + i;}
        console.log(sum);</script></head><body></body></html>

结果展示：
continue例子

break 关键字

➢ break 关键字用于立即跳出整个循环（循环结束）。

例如，吃5个苹果，吃到第3个发现里面有半个虫子，其余的不吃了，其代码实现如下：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>for(var i=1;i<=5;i++){if(i==3){break;}
            console.log('我正在吃第'+i+'个🍎');}</script></head><body></body></html>

结果展示：
break关键字

标签： javascript 前端

本文转载自: https://blog.csdn.net/weixin_48650082/article/details/124650185
版权归原作者 香蕉卟NaNa 所有，如有侵权，请联系我们删除。

【JavaScript】超详细的流程控制&mdash;&mdash;循环篇

目录

🚀 循环

JS 中的循环

🚀 for 循环

1、语法结构

2、执行过程：

3、断点调试：

4、for 循环重复执行相同的代码

5、for 循环重复执行不相同的代码

6、for 循环重复执行某些相同操作

7、for循环案例

求和

打印星星⭐

统计班级成绩

🚀 双重 for 循环

1、双重 for 循环概述

2、双重 for 循环语法

3、案例

（1）打印五行星星⭐

（2）打印 n 行 m 列的星星⭐

（3）打印倒三角形

（4）打印正三角形

（5）打印九九乘法表

4、for 循环小结

🚀 while 循环

while案例

（1）1~100岁生日快乐

（2）计算n~m的整数和

（3）案例三

🚀 do while 循环

1、案例

（1）打印1~100岁生日快乐

（2）计算整数和

（3）案例三

循环小结

🚀 continue break

continue 关键字

案例

break 关键字

发表评论

“【JavaScript】超详细的流程控制&mdash;&mdash;循环篇”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航

【JavaScript】超详细的流程控制——循环篇

“【JavaScript】超详细的流程控制——循环篇”的评论: