虽迟但到了的JavaScript循环

循环分类

for循环

语法结构：

// for循环语句 重复执行代码 跟计数有关
   for (初始化变量; 条件表达式; 操作表达式) {
	// 循环体;
   // 初始化变量:声明变量;条件表达式:决定循环是否继续执行;
   //操作表达式:每次循环最后执行的代码 计数变量进行更新(递增或递减)
        }

执行过程：

1. 初始化变量，初始化操作在整个 for 循环只会执行一次。

• 执行条件表达式，如果为true，则执行循环体语句，否则退出循环，循环结束。

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

案例展示

求1~100的所有偶数和奇数的和

    <script>
        //  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);
    </script>

运行结果如下：

双重for循环

👉 循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for 循环，这样的 for 循环语句我们称之为双重for循环。

语法结构：

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

案例展示

控制台输出7X8的矩形

    <script>
        var str = '';
        for (var i = 1; i <= 7; i++) {
            for (var j = 1; j <= 8; j++) {
                str = str + '⭐';
            }
            str = str + '\n';
        }
        console.log(str);
    </script>

运行结果如下：

正三角形

  <script>
        var str = '';
        for (var i = 1; i <= 10; i++) {
            for (var j = 1; j <= i; j++) {
                str = str + '⭐';
            }
            str = str + '\n';
        }
        console.log(str);
    </script>

运行结果如下：

倒三角形

  <script>
        var str = '';
        for (var i = 1; i <= 10; i++) {
            for (var j = i; j <= 10; j++) {
                str = str + '⭐';
            }
            str = str + '\n';
        }
        console.log(str);
    </script>

while循环

语法结构：

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

执行过程：

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

注意：
使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环

案例展示

用户登录验证
接收用户输入的用户名和密码，若用户名为 “admin” ,且密码为 “123456” ,则提示用户登录成功! 否则，让用户一直输入。

  <script>
        var entry = prompt('请输入用户名：');
        var password = prompt('请输入密码：');
        while (entry !== 'admin' && password !== 123456) {
            entry = prompt('请输入用户名：');
            password = prompt('请输入密码：');
        }
        alert('用户登录成功')
    </script>
</head>

代码实现如下：

do-while循环

语法结构：

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

执行过程:

• 1 先执行一次循环体代码
• 2 再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码

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

案例展示

模仿ATM进行存钱，取钱等

    <script>
        var money = 100;
        do {
            var caozuo = parseInt(prompt('请输入您要的操作: \n 1、存钱 \n 2、取钱 \n3、显示余额 \n4、退出'));
            switch (caozuo) {
                case 1:
                    var cunru = parseInt(prompt('请输入你要存入的金额:'));
                    money = money + cunru
                    alert('当前余额为' + money);
                    break;
                case 2:
                    var quchu = parseInt(prompt('请输入你要取出的金额'));
                    money = money - quchu
                    alert('当前余额为' + money);
                    break;
                case 3:
                    alert('你当前的余额为' + money);
                    break;
                default:
                    alert('无此操作，请重新选择');
            }

        } while (caozuo !== 4);
        alert('你已退出');
    </script>

continue、break

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

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

  for (var i = 1; i <= 5; i++) {
     if (i == 3) {
         break; // 直接退出整个for 循环，跳到整个for下面的语句
     }
     console.log('我正在吃第' + i + '个包子呢');
   }

运行结构如下：

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

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

 for (var i = 1; i <= 5; i++) {
     if (i == 3) {
         break; // 直接退出整个for 循环，跳到整个for下面的语句
     }
     console.log('我正在吃第' + i + '个包子呢');
   }

运行结果：