【学习笔记14】JavaScript的循坏语句

一、while循坏

1、解释说明

    while (循环结束条件) {  
        循环体
    }

        // 1. 初始化
        var num = 1;    

        // 2. 循环结束条件  num < 5
        while (num < 5) {  
            // 3. 循环体
            console.log(1);
            
            // 4. 改变自身, 不写还能执行, 但是是死循环, 电脑死机速度
            num++   
        }

2、课堂案例

2.1 计算1到100的累加和

案例分析

        /**
         *  第一次循环
         *      num == 1    sum == 0
         *          符合 num < 101
         *          执行循环体  sum = sum + num     sum = 0 + 1     ===> sum == 1
         *          num++
         * 
         *  第二次循环
         *      num == 2    sum == 1
         *          符合 num < 101
         *          执行循环体  sum = sum + num     sum = 1 + 2     ===> sum == 3
         *          num++
         * 
         *  第三次循环
         *      num == 3    sum == 3
         *          符合 num < 101
         *          执行循环体  sum = sum + num     sum = 3 + 3     ===> sum == 6
         *          num++
        */

        //  1 + 2 + 3 + 4 + 5 +.... + 99 + 100  ==> 5050

        var num = 1;   //定义开始变量
        var sum = 0;   //定义累加和的变量
        while (num < 101) {
            // 累加求和
            sum += num;
            num++;
        }
        console.log(sum);   // 5050

2.2 求 1~100 之间所有3的倍数的和

        var num = 1;   //定义开始变量
        var sum = 0;   //定义累加和的变量

        // 循坏遍历 求值
        while (num < 101) {

            // 判断三的倍数
            if (num % 3 == 0) {
                //累加求值
                sum += num;
            }
            num++;
        }
        console.log(sum);

二、do…while循坏

1、解释说明

      1. 初始化
        do {
             2. 循环体
             3. 改变自身
        } while (4. 结束条件)

        var num = 1;
        do {
            console.log(1);
            num++
        } while (num < 5);

2、do…while 和 while 的差异

1. do...while在首次执行的时候, 会先执行循环体, 然后判断
2. while在首次执行的时候, 会判断, 然后符合条件了在执行

        // do...while循环
        var num = 10;
        do {
            console.log('do...while循环执行')
            num++;

        } while (num < 5);

        // while循环
        var num1 = 10;
        while (num1 < 5) {

            console.log('while循环执行');
            num1++;
        }

3、do…while循环案例

案例要求

1. 首次加载页面的时候, 让用户输入密码
2. 如果密码正确, 在浏览器控制台打印 密码正确
3. 如果错误, 让用户重新输入密码

案例分析

1. prompt()浏览器提供的, 会在浏览器打开一个弹窗, 让用户输入内容
   • 点击确定, 返回用户输入的内容(字符串格式的)
   • 点击取消, 返回一个null
2. 第一个参数: 用户的提示信息
3. 第二个参数: 输入框默认文本

        var password;
        do {
            password = prompt('请输入密码') - 0;

        } while (password != 12345)
        
        console.log('密码正确')

三、for循坏

1、解释说明

语法:
    for (1. 初始化; 2. 结束条件; 3. 改变自身) {
         // 循环体
    }

        for (var i = 0; i < 3; i++) {
            console.log(1)
        }

2、求1到100的累加

        var sum = 0
        for (var i = 1, sum = 0; i < 101; i++) {
            sum += i
            // console.log(i)
        }
        console.log(sum)

四、for循环嵌套

1、解释说明

        // 外层 for 循环
        for (var i = 0; i < 3; i++) {   
            // 内层 for 循环
            console.log(i);
            for (var k = 0; k < 3; k++) {   
                console.log(k);
            }
        }

2、for循环嵌套案例

        // 外层循环, 控制有多少行
        for (var k = 0; k < 9; k++) {   

            // 内层循环, 控制一行有多少个(控制有多少列)
            for (var i = 0; i < 9; i++) { 

                document.write('*');
            }
            document.write('<br>');
        }

3、九九乘法表

        for (var j = 1; j <= 9; j++) {

            for (var i = 1; i <= j; i++) {

                document.write(`${i} * ${j} = ${i * j} `);
            }

            document.write('<br>');
        }

🤩 美化

    <style>
        span {
            display: inline-block;
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border: 1px solid #000;
            margin: 10px;
        }

        div>span:nth-child(odd) {
            background: skyblue;
        }

        div>span:nth-child(even) {
            background: pink;
        }
    </style>

        for (var j = 1; j <= 9; j++) {

            document.write('<div>');

            for (var i = 1; i <= j; i++) {
                document.write('<span>');
                document.write(`${i} * ${j} = ${i * j} `);
                document.write('</span>');
            }

            document.write('</div>');
        }

五、 break 和 continue 关键词

1、break 和 continue的区别

1. JavaScript中的while循环，不支持continue关键词
2. break 终止一切，即终止关键词
   • 😥 作用1：终止本次循环break关键词之后程序的执行
   • 😥 作用2：终止本次循环之后循环的执行
3. continue 跳出一次循环，即跳出关键词
   • 😥 作用1：终止本次循环continue关键词之后程序的执行
   • 😥 作用2：继续本次循环之后循环的执行
4. break关键词一般用于死循环程序的执行

2、求水仙花数三次自幂数

        // 将判断一个数值是不是水仙花数的程序 定义在循环中
        for( var i = 100 ; i <= 999 ; i++ ){

            // 获取每一位上的数值
            var a = parseInt(i / 100);
            var b = parseInt(i % 100 / 10);
            var c = i % 10;

            // 判断立方和是不是数值本身
            if (Math.pow(a, 3) + Math.pow(b, 3) + Math.pow(c, 3) === i) {
                // 如果 每位上的数值立方和 是 这个数值本身 判断 是 水仙花数
                console.log(`数值${i}是水仙花数`);
            }
        }