【前端学习笔记】06-流程控制之循环

最新推荐文章于 2024-06-15 11:46:27 发布

SevgiliD

最新推荐文章于 2024-06-15 11:46:27 发布

阅读量205

点赞数

分类专栏： JavaScript初级文章标签：前端学习 javascript

本文链接：https://blog.csdn.net/SevgiliD/article/details/125741256

版权

JavaScript初级专栏收录该内容

30 篇文章 0 订阅

订阅专栏

循环

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

JS中，主要有三种类型的循环语句：

for循环
while循环
do while循环

for循环

语法结构

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

执行过程

在这里插入图片描述

断点调试

概念：断点调试是通过自己在程序的某一行设置一个断点；调试时，程序运行到这一行就会停住；然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值；出错的话，调试到出错的代码显示即显示错误，停下。

在这里插入图片描述

for循环案例

课堂案例：1.实现1-100的累加；2.求1-100的平均值；3.求1-100所有奇数偶数的和；4.求1-100之间能被3整除数字的和；5.求学生成绩案例打；6.一行打印五颗星星案例；
案例代码：

        // 1.实现1-100的累加
        var sum = 0;
        for(var i = 1; i <= 100;i++){
            
            sum = sum + i;
        }
        console.log(sum);

        // 2.1-100所有数的平均值
        var sum = 0;
        for(var i = 1; i <= 100;i++){
            
            sum = sum + i;
        }
        var avg = sum/100;
        console.log(avg);

        // 3.1-100所有奇数偶数的和
        var sum = 0, sum1 = 0;
        for(i=1;i<=100;i++){
            if(i % 2 == 0 ){
                sum = sum + i;
            }else{
                sum1 = sum1 + i;
            }
        }
        console.log(sum,sum1);

        // 4.1-100之间能被3整除数字的和
        var sum = 0;
        for(i = 0; i <= 100; i++){
            if (i%3 ==0) {
                sum += i;
            }
        }
        console.log(sum);

        // 5.课堂案例二：求学生成绩：
        // 要求用户输入班级人数，依次输入每个学生的成绩，
        //最后打印出该班级的总成绩及平均成绩
        var num = prompt('请输入班级人数');
        var sum = 0;
        for(i=1;i<=num;i++){
              var score = prompt('请输入第'+i+'个学生成绩');
              sum = sum + parseFloat(score);
        }
       
        alert('班级的总成绩是'+sum);
        alert('班级的平均成绩是'+ sum/num);
        
        // ctrl+shift+z快捷打开字符
        // 6.一行打印5颗星星案例:追加字符串方式
        var str = '';
        for(i = 1; i<= 5; i++){
            str = str + '☆';
        }
        console.log(str);

双重for循环

很多时候，当单层for循环无法满足需求，就需要通过循环嵌套来实现更复杂的结构；
循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构；
例如在for循环中再嵌套一个for循环，这样的for循环语句成为双重for循环

语法结构

for(外层的初始化变量;外层的条件表达式;外层的操作表达式){
     for(里层的初始化变量;里层的条件表达式;里层的操作表达式){
         // 执行语句;
         }
      }

执行过程

可以把里层的循环看作是外层循环的语句
外层循环一次，里面的循环执行全部
代码示例：

在这里插入图片描述

双重for循环案例

课堂案例：打印五行五列星星；打印n行n列星星；打印倒三角形；打印99乘法表
案例代码：

        // 1.打印五行五列的星星
        var str = '';
        for(i=1;i<=5;i++){
            for(j=1;j<=5;j++){
                str = str + '★';
                
            }
            
            str = str + '\n';
        }
        console.log(str);

        // 2.打印n行n列的星星
        var str = '';
        var rows = prompt('请输入行数');
        var col = prompt('请输入列数');
        for(i=1;i<=rows;i++){
            for(j=1;j<=col;j++){
                 str = str +'★';
            }
            str = str +'\n'; 
        }
        console.log(str);

        // 3.打印倒三角形
            var str = '';
            for(i=10;i>=1;i--){
                for(j=i;j>=1;j--){
                    str = str + '★';
                }
                str = str +'\n';
            }
            console.log(str);
        
        // 4.打印99乘法表
        var str = '';
        for(i=1;i<=9;i++){
            for(j=1;j<=i;j++){
              str += i+'x'+j+'='+ i*j +'\t';  
            }
            str = str + '\n';
        }
        console.log(str);

for循环小结

在这里插入图片描述

while循环

概念：while循环可以在条件为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环

语法结构

在这里插入图片描述

执行思路

在这里插入图片描述

while循环案例

课堂案例：100次你好吗；打印从1岁到100岁；计算1-100之间所有整数的和；反复询问你爱我吗直到输入我爱你为止；
案例代码：

 // 1.100次你好吗
        var i = 1;
        while (i<=100) {
            console.log('雷猴么');
            i++;
        }

        // 2.打印人的一生从1岁到100岁
            var age =1;
            while(age<=100){
                console.log('这个人今年'+ age +'岁');
                age++;
            }

        // 3.计算1-100之间所有整数的和
                var num = 1,sum=0;
                while(num<=100){
                    sum += num;
                    num++;
                }
                console.log(sum);
        
        // 4.弹出提示框：你爱我吗？ 如果输入我爱你，就提示结束，否则一直询问
          
                var love = prompt('你爱我吗？');  
                while(love !== '我爱你'){
                    love = prompt('你爱我吗？');
                }
                alert('我也爱你');