JavaScript流程控制—循环

芭拉拉_POWER

已于 2024-02-02 12:33:01 修改

阅读量1.2k

点赞数 48

分类专栏： JavaScript 文章标签：算法

于 2024-02-02 11:48:22 首次发布

本文链接：https://blog.csdn.net/Renaissance_Y/article/details/135988102

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.了解循环

循环有很多种类，但本质上它们都做的是同一件事：它们把一个动作重复了很多次（实际上重复的次数有可能为 0）。各种循环机制提供了不同的方法去确定循环的开始和结束。不同情况下，某一种类型循环会比其他的循环用起来更简单。

2.几种循环语句

for()语句
while()语句
do...while()语句
break语句与continue语句
for...in语句

3.for语句

语法结构

for(初始化变量; 条件表达式; 操作表达式 ){

循环体；

}
1. 初始化变量：通常被用于初始化一个计数器，该表达式可以使用var 关键字声明新的变量，这个变量帮我们来记录次数。
2. 条件表达式：用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。
3. 操作表达式：每次循环的最后都要执行的表达式。通常被用于递增或递减计数器变量。
执行过程
1. 初始化变量，初始化操作在整个 for 循环只会执行一次。
2. 执行条件表达式，如果为true，则执行循环体语句，否则退出循环，循环结束。
3. 执行操作表达式，此时第一轮结束。
4. 第二轮开始，直接去执行条件表达式（不再初始化变量），如果为 true ，则去执行循环体语句，否则退出循环。
5. 继续执行操作表达式，第二轮结束。
6. 后续跟第二轮一致，直至条件表达式为假，结束整个 for 循环。
断点调试
1. 断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错语，停下。
2. 断点调试可以帮我们观察程序的运行过程
  
  debugger；
注意事项
1. 如果{}中只有一句代码，{}可以省略
2. （；；）中的三个条件都可以省略，但是‘ ；’分号不能省略
  1. 初始化变量省略：可以正常输出
  2. 条件表达式省略：相当于判断条件中永远是true，会陷入死循环
    解决办法：找到循环出口，让循环强制结束
  3. 操作表达式省略：可以写在循环体中

案例

//1.输出1-10之间所有奇数的和
var sum = 0;  // 注意： 一、sum  赋初值   二、sum不能放在循环内部
for (var i = 0; i <= 10; i++) {          
    if (i % 2 != 0) {
        sum += i;
    }
}
console.log('奇数的和' + sum);

//2.做一个小游戏，报7游戏的安全数(轮流报数，报到能被7整除或者尾数是7都要表演节目)，报出1-108之间的安全数
for (var i = 0; i <= 108; i++) {
    var a = parseInt(i / 100);//得到百位的数字
    var b = parseInt(i / 10 % 10);//得到十位的数字
    var c = i % 10;//得到个位的数字
    if (i % 7 == 0 || c == 7) {
         continue;//跳出本轮循环继续下一轮循环
    } else {
         console.log(i);
    }
}

4.双重和多重for循环

语法结构

for (外循环的初始; 外循环的条件; 外循环的操作表达式) {

        for (内循环的初始; 内循环的条件; 内循环的操作表达式) {

                需执行的代码;

        }

}
执行过程
1. 外层循环每循环一次，都会把“外层循环体里内层循环结构”执行一遍

典型例题——打印图形、九九乘法口诀

//                行号i      每行星数=2i-1
//    *             1           1
//    ***           2           3
//    *****         3           5
//    *******       4           7
//    *********     5           9  
var i,j;
for(i=1;i<=5;i++){//外层循环控制行
    for(j=1;j<=2*i-1;j++){
        document.write('*');//内层循环控制每行*的个数
    }
    document.write('<br>');
}

for (var i = 1; i <= 9; i++) {
    for (var j = 1; j <= i; j++) {
         document.write(`${j}x${i}=${j * i}&ensp;&nbsp;`);
    }
    document.write('<br>');
}

5.while语句

语法结构

while (条件表达式) {

循环体；

}
执行过程
1. 当循环条件为true时，则执行循环体，当循环条件为false时，结束整个循环
2. 注意，若循环条件永远为true时，则出现死循环，根据开发实际需要，在循环体中设置出口，即循环结束的条件

3.案例——卖西瓜问题

var num=1020,Count=0;
while(num>0){
    num=num/2-2;
    Count++;
}
console.log(Count+'天可以卖完');

6.do...while语句

语法结构

do{

循环体；

}while( 条件表达式 )

执行过程（与while语句的区别）

do-while循环和while循环相比，会在判断条件表达式之前无条件的先去执行一次循环体后再判断条件

do...while循环不一定比while循环多执行一次

var i=0;
while(i>1){
   document.write('hello');
   i++;
}//一次都不执行,没有输出

do{
   document.write('hello');
   i++;
}while(i>1)//hello  执行一次

var i=1;
while(i<=5){
    document.write(i+ 'hello world <br>');
    i++;
}//输出5个hello world

var i=1;
do{
   document.write(i+ 'hello world <br>');
   i++; 
}while(i<=5)//输出5个hello world

7.break语句与continue语句

7.1break语句

switch...case 语句中作为结束条件语句
循环语句中，用来结束当前循环体，循环中的其他代码不再执行，执行循环外的代码

给循环体加labelName：然后在想结束循环的地方加break llabelName；即可结束指定循环。

labelName:
        for(var i=1;i<=5;i++){
             for(var j=1;j<=3;j++){
                 if(j==2){
                    break labelName;
                 }
                 console.log('i='+i,'j='+j);//i=1 j=1
             }
        }

7.2continue语句

循环中使用，结束本轮循环，继续下次循环，循环迭代还在进行。
执行到continue，本次循环内continue后面的语句不再执行

给labelName：然后在想结束循环的地方加continue labelName；即可结束contilabelName；所在的循环体。（相当于break）

lablename:
        for(var i=1;i<=5;i++){
             for(var j=1;j<=3;j++){
                 if(j==2){
                    continue lablename;
                 }
                 console.log('i='+i,'j='+j);
             }
        }

8.典型案例——石头剪刀布问题

石头、剪刀、布小游戏，三局两胜制，有一方累计胜利两次，则游戏结束（每次开始，玩家和电脑都要出拳）
随机数 0 1 2 Math.floor( Math.random()*3) 电脑
0 代表石头
1代表剪刀
2代表布

while循环（推荐使用，判断条件更加简便）

        var playCon = 0, aiCon = 0, winner;
        while (true) {
            var player = prompt('请输入石头、剪刀或布');
            var ai = Math.floor(Math.random() * 3);//生成0，1，2随机数
            switch (ai) {
                case 0:
                    ai = '石头';
                    break;
                case 1:
                    ai = '剪刀';
                    break;
                case 2:
                    ai = '布';
                    break;
            }
            if (player == '石头' && ai == '剪刀' || player == '剪刀' && ai == '布' ||         
            player == '布' && ai == '石头') {
                playCon++;
                console.log(`玩家:${player},电脑:${ai},玩家胜${playCon}局`);
            } else if (player == ai) {
                console.log(`玩家:${player},电脑:${ai},平局`);
            } else {
                aiCon++;
                console.log(`玩家:${player},电脑:${ai},电脑胜${aiCon}局`);
            }
            if (playCon == 2) {
                winner = '玩家';
                break;
            } else if (aiCon == 2) {
                winner = '电脑';
                break;
            }
        }
        console.log(winner + '赢得最终胜利');

for循环

        var ai, aiCount = 0, player, playCount = 0;
        var playnum, aires;
        for (var i = 1; i <= 3; i++) {
            player = prompt('请输入剪刀、石头或布');
            switch (player) {
                case '石头':
                    playnum = 0;
                    break;
                case '剪刀':
                    playnum = 1;
                    break;
                case '布':
                    playnum = 2;
                    break;
            }
            ai = parseInt(Math.random() * 10) % 3;
            switch (ai) {
                case 0:
                    aires = '石头';
                    break;
                case 1:
                    aires = '剪刀';
                    break;
                case 2:
                    aires = '布';
                    break;
            }
            //这里利用了获胜时的固定差值作为判断条件
            if (playnum - ai == -1 || playnum - ai == 2) {
                console.log(`电脑：${aires}  玩家：${player}  玩家得一分`);
                playCount++;
            } else if (playnum == ai) {
                console.log(`电脑：${aires}  玩家：${player}  平局`);
            } else {
                console.log(`电脑：${aires}  玩家：${player}  电脑得一分`);
                aiCount++;
            }
            if (playCount == 2 || playCount > aiCount && i == 3) {
                console.log('玩家胜')
                break;
            } else if (aiCount == 2 || aiCount > playCount && i == 3) {
                console.log('电脑胜')
                break;
            } else if (i == 3 && aiCount == playCount) {
                console.log('平局,进入加时赛');
                i--;
            }
        }