javascript循环(3)

头像
已注销
    阅读 11 分钟
    2

    js中的循环语句

    • for循环
    • while循环
    • do while循环

    何为循环？

    在程序中，反复被执行的语句叫做循环体，循环体是否能被重复执行，却决于循环的终止条件。由循环体及循环的终止条件等组成的语句叫做循环语句。

    循环的目的

    可以重复执行某些代码

    for循环

    目的：可以重复执行某些代码，通常跟计数有关.

    语法

        for(初始化变量；条件表达式；操作表达式) {
        //循环体
    }
    • 初始化变量：通常被用来计数，使用var来声明变量
    • 条件表达式：取决于循环体的终止条件
    • 操作表达式：用来更新初始化变量

    for循环的执行过程

        <script>
        for (var i = 1; i <= 100; i++) {
            //在控制台打印100遍的"hello 尧子陌"
            console.log("hello 尧子陌")
        }
    </script>

    image.png

    执行原理

     i = 1最终能被执行一次，初始化变量执行完毕后，执行i<=100,满足则进入循环体执行循环里的语句，不满足则跳出循环体，，最后再执行操作表达式使变量自增，满足执行循环体代码，不满足跳出循环。

    for循环的特殊用处

    断点调试

    断点调试：在程序的某一行设置断点，以便于观察程序是怎样的运行过程。

    步骤:

    • 按f12键进入sources(根源)，在需要设置断点的当前行设置断点操作，刷新浏览器
    • 按F11进行下一步操作

    通过watch可以更好的观察变量的值的变化

    image

    通过变量来控制循环的次数

    在js中，可以通过prompt输入的值保存成变量来控制循环的次数
        <script>
        /* 
                *1.弹出一个输入框，用户输入值，把这个数值保存成变量
                2.通过变量名来控制循环的次数
                
                 */

        var userName = parseInt(prompt("请输入任意正整数"));

        for (var i = 1; i <= userName; i++) {
            console.log('Hello')
        }
    </script>

    image

    通过for循环可执行不同的代码

    输入一个人的1岁~100岁，并提示出生及死亡。
    
    <script>
        for (var i = 1; i <= 100; i++) {
            if (i == 1) {
                console.log('今年一岁了，你出生了')
            } else if (i == 100) {
                console.log('今年100岁了，你已经死亡了')
            } else {
                console.log('今年' + i + '岁了')
            }
        }
    </script>

    image

    for循环可以执行某些相同的操作

    例如：求1~100累加的和
    
    <script>
        //求1~100之间累加的和

        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            sum += i;
        }
        console.log('sum最终的值', sum); //5050
    </script>

    image.png

    思路如下

    • 要循环100次，需要一个计数器i
    • 需要一个存储结果的值为sum
    • 公式sum= sum+i

    案例

    求1~100之间的平均数

    
    <script>
        //需要声明一个求和的变量及求平均数的变量
        var sum = 0,
            average = 0

        for (var i = 0; i <= 100; i++) {
            sum += i;
        }
        // 平均值为
        var average = sum / 100;
        console.log('1~100之间的平均数:' + average) //50.5
    </script>
</head>

    image.png

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

    思路如下

    如何判断一个数为偶数呢？

    答案：能被2整除且余数为0，则代表为偶数，反之则为奇数

    
    <script>
        //需要声明一个偶数及奇数的变量
        var even = 0,
            odd = 0;

        for (var i = 0; i <= 100; i++) {
            if (i % 2 == 0) {
                even += i;
            } else {
                odd += i;
            }
        }
        console.log('1~100之间所有偶数的和:', even)
        console.log('1~100之间所有奇数的和:', odd)
    </script>

    image.png

    求1~100之间能被3整除的和

    
    <script>
        //需要声明一个变量来保存能被3整出的和的结果
        var result = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 3 == 0) {
                result += i
            }
        }

        console.log('1~100之间能被3整除的和:', result)
    </script>
</head>

    image.png

    学生案例

    弹出输入框，输入班级总人数，求出总成绩及平均成绩sum

    分析

    1.弹出输入框，用户输入班级的总人数(userName)

    2.依次输入学生的成绩（保存起来为sorce）,，需要用到for循环，弹出的输入框的次数跟班级总人数有关.条件表达式i<=userName

    3.程序内部处理，计算总成绩(sum)，之后再计算平均值(average)

    
    <script>
        //要求：计算学生的总成绩及平均数
        var userName = Number(prompt("输入班级的总人数"));
        var sum = 0;
        var average = 0;
       、

        for (var i = 1; i <= userName; i++) {
            var sorce = Number(prompt('请输入第' + i + "个学生成绩"));

            sum += sorce;
        }

        //学生的总成绩
        console.log("班级的总成绩", sum);
        //学生的平均成绩
        var average = sum / userName;
        console.log('班级的平均成绩：', average)
    </script>

    image

    打印N行的星星案例

    注意事项

    • 通过prompt输入的值可控制打印星星的个数
    • 采用字符串追加的方式，在控制台打印星星。
    
    <script>
        var userName = prompt('请输入星星的个数');

        var str = "" //声明一个变量来存储空字符串
        for (var i = 1; i <= userName; i++) {
            str += "★";
         
        };
        console.log(str)
    </script>

    image.png

    双重for循环

    在for循环的基础上嵌套一个for循环，称为双重for循环

    语法

    for(外循环初始化变量；外循环条件表达式；外循环操作表达式) {
    for(内循环初始化变量；内循环条件表达式，内循环操作表达式) {
           //执行的语句
    }
    
}

    注意事项

    • 内循环可以看作外循环执行的语句
    • 外循环执行一次，内循环执行全部
    
    <script>
        //外层循环
        for (var i = 1; i <= 3; i++) {

            console.log('外层循环执行的:' + i + '次')
            for (var j = 1; j <= 3; j++) {
                console.log('内层循环执行的:' + j + '次')
            }
        }
    </script>

    image.png

    打印5行5列的星星

    
    <script>
        var str = "";
        for (var i = 1; i <= 5; i++) {
            for (var j = 1; j <= 5; j++) {
                str += "★"
            }
            str += "\n"
        }
        console.log(str)
    </script>

    image.png

    输入N行N列的♥

    
    <script>
        //用户输入的行数
        var rows = prompt("请输入行数");
        //用户输入的个数
        var cols = prompt('请输入个数');
        //声明一个空字符串
        var str = '';

        //进行for循环
        for (var i = 1; i <= rows; i++) {
            for (var j = 1; j < cols; j++) {
                str = str + "♥"
            }
            str = str + '\n'
        }
        console.log(str)
    </script>

    image

    打印倒三角形

    核心算法 j = i; j <= 10; j++
    
    <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>

    image.png

    打印正三角形

    核心思路：j = 1; j <= i; j++
    
    <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>

    image.png

    打印九九乘法表

        <script>
        var str = ""
        for (var i = 1; i <= 9; i++) {
            for (var j = 1; j <= i; j++) {

                str = str + j + "*" + i + "=" + i * j + "\t"
            }
            str = str + "\n"
        }
        console.log(str)
    </script>

    image.png

    for循环总结

    • for循环可以重复某些代码的操作
    • for循环可以重复执行某些不同的代码的操作，因为有计数器
    • for循环可以重复执行某些操作，比如算数运算符加法操作
    • 双重for循环，外循环执行一次，内循环全部执行

    while循环

    语法

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

    注意

    - 当while的参数的条件表达式为true的时侯，则执行循环体代码。当条件为false的时候,则退出循环体。
- 当执行完循环体代码之后，操作表达式会自增或自减操作。会继续判断条件表达式是否为真假，若为真，则继续执行循环体的代码，若为false，则退出循环体，重复执行
- while可以做更复杂的条件判断。

    案例

    控制台打印100遍hello word

    
    <script>
        var i = 1;
        while (i <= 100) {
            console.log('hello word');
            i++
        }
    </script>

    image.png

    打印人的一生 从1岁到100岁 并提示出生 死亡的信息。

    
    <script>
        var i = 1;
        while (i <= 100) {
            if (i == 1) {
                console.log('恭喜你，你出生了')
            } else if (i == 100) {
                console.log('恭喜你，你死亡了')
            } else {
                console.log('你今年' + i + '岁')

            }
            i++
        }
    </script>

    image

    计算1~100之间所有整数的和

    
    <script>
        //求和的变量
        var sum = 0;
        var i = 1;
        while (i <= 100) {
            sum = sum + i;
            i++
        }
        console.log(sum)
    </script>

    image.png

    '你爱我吗'之循环案例

    要求：弹出输入框，显示'你爱我吗'。用户输入我爱你，则提示询问，否则会一直询问下去。

    

    <script>
        var message = prompt('你爱我吗');

        while (message !== '我爱你') {
            message = prompt('你爱我吗')
        };
        alert('我也爱你 小颖')
    </script>

    image

    do while循环

    - do while循环可以看作while循环的变体，do while循环的代码至少会执行一次，再进行自增或自减操作去判断条件表达式是否为真，若为true,则执行循环体，若为false，则退出循环体
复制代码

    语法

    var i =1;
do {
    //循环体语句
    操作表达式
}while(条件表达式)
复制代码

    do while案例

    打印人的一声，从1岁到100岁，并提示出生 死亡的信息.

    
    <script>
        var i = 1;
        do {

            if (i == 1) {
                console.log('恭喜你，你出生了')
            } else if (i == 100) {
                console.log('很遗憾，你已经死亡了')
            } else {
                console.log('你已经' + i + '岁')
            }
            i++
        } while (i <= 100);
    </script>

    image

    打印1~100所有整数的和

    
    <script>
        //声明一个求和的变量
        var sum = 0,
            i = 1;
        do {
            sum = sum + i;
            i++
        } while (i <= 100);
        console.log(sum)
    </script>

    image.png

    "你爱我吗"之循环案例

    要求：弹出输入框，显示'你爱我吗'。用户输入我爱你，则提示询问，否则会一直询问下去。
    

    <script>
        do {
            var message = prompt('你爱我吗')
        } while (message !== '我爱你')

        alert("我也爱你")
    </script>

    image

    循环的总结

    • JS中的循环：for循环 while循环 di while循环
    • 在特殊情况下，三者可以相互替换
    • do while是while的变体，和while的区别是执行顺序不一样，while循环先判断后执行，do while循环至少执行一次
    • 重点放在for循环

    continue break的区别

    continue

    continue:跳出本次循环 继续执行下次循环

    求1~100能被7整除的和

    如何判断能被7整除，余数等于0即可
    
    <script>
        var sum = 0;
        for (var i = 0; i <= 100; i++) {
            if (i % 7== 0) {
                continue
            }
            sum = sum + i;
        }
        console.log(sum)
    </script>

    image.png

    break

    立刻跳出整个循环，不再执行后面的语句

    i等于3的时候，跳出整个循环

    
    <script>
        for (var i = 1; i <= 10; i++) {
            if (i == 3) {
                break
            }
            console.log(i)
        }
    </script>

    image.png

    简易ATM机

    要求

    image.png

    在这个案例中，我使用的是最简单的switch语句

    
    <script>
        //简易ATM机
        var corpus = 100; //本金

        var userName = Number(prompt('请输入你要的操作\n1.存钱\n2.取钱\n3.显示余额\n4.退出'))


        switch (userName) {
            case 1:
                var depvar = Number(prompt("请问需要存多少钱？"));
                corpus = corpus + depvar;
                alert('余额为' + corpus)
                break;
            case 2:
                var taken = Number(prompt("请问需要取多少钱？"));
                if (taken > corpus) {
                    alert('余额不足')
                } else if (taken < corpus) {
                    corpus = corpus - taken;
                    alert('余额为' + corpus)
                }
                break;
            case 3:
                alert(corpus);
                break
            case 4:
                if (userName == 4) {
                    alert('退出成功')
                }
                break
            default:
                alert("输入错误");
                break;


        }
    </script>

    image

    javascript
    已注销
    54 声望3 粉丝

    保持呼吸 坚持学习

    « 上一篇
    javascript之流程控制语句(2)
    下一篇 »
    javascript数组 (4)

    引用和评论

    推荐阅读
    头像
    Vue

    已注销阅读 1.2k

    头像
    Vue.js-Vue实例

    寒青赞 11阅读 6.7k

    头像
    2025年最新反编译微信小程序的教程及工具

    TANKING赞 7阅读 5.1k

    头像
    你可能不知道的图片加载相关知识

    夕水赞 5阅读 4k

    头像
    Base64编码的“暗坑”：解密失败？可能是这些原因！

    南玖赞 6阅读 3.5k评论 1

    头像
    手写一个动态海洋和天空效果的vue hooks

    夕水赞 4阅读 767

    头像
    原生electron起步-从零到一完成构建和打包

    兔子先森赞 2阅读 3k评论 1

    0 条评论
    得票最新