【前端-初阶】JS循环

我自闭了？

已于 2023-03-22 21:49:38 修改

阅读量473

点赞数

分类专栏： JavaScript 前端学习日记文章标签： javascript 前端开发语言

于 2023-03-19 10:44:58 首次发布

本文链接：https://blog.csdn.net/qq_48234463/article/details/129647470

版权

前端学习日记同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

JavaScript

19 篇文章 0 订阅

订阅专栏

1.循环

1.1 循环的目的：

重复执行某些语句

1.2 JS中的循环

for循环
while循环
do...while循环

在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句

2.for循环

2.1 语法结构：

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

//循环体

}

重复执行某些代码，通常跟计数有关系
初始化变量-就是用var声明的一个普通变量，通常用于作为计数器使用
条件表达式-就是用来决定每一次循环是否继续执行，就是终止的条件
操作表达式-是每次循环最后执行的代码经常用于我们计数器变量进行更新（递增或者递减）

重复100次"你好"：

 <script>
     for (var num = 0; num < 100; num++) {
         console.log('你好'); //循环体
     }//0-99次
     for (var num = 1; num <= 100; num++) {
         alert('你好');
     }//1-100次
 </script>

代码执行顺序：var num=1（只执行1次）——>num<=100——>alert('你好')——>num++（第一轮结束）——>num<=100——>循环

2.2 chrome断点调试：

断点调试可以帮我们观察程序的运行过程，帮助找bug

浏览器按F12——>sources——>找到需要调试的文件——>在程序的某一行设置断点
Watch：监视，通过watch可以监视变量的值的变化，非常常用
F11：程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化

 var num=prompt('请输入次数：')
 for(i=1;i<=num;i++){
     console.log('我错了');
 }
 //可以让用户控制次数
 <script>
     var num = prompt('请输入次数：')
     for (i = 1; i <= num; i++) {
         console.log('我错了');
     }
 </script>

2.3 for循环重复不相同的代码

for循环还可以重复不同的代码，这主要是因为使用了计数器，计数器在每次循环过程中都会有变化。

输出一个人1~100岁：

<script>
for(var i=1;i<=100;i++){
 console.log('这个人今年'+i+'岁了');
 }

 //for嵌套if else
     for (var i = 0; i <= 100; i++) {
         if (i == 0) {
             console.log('你出生了');
         } else if (i == 99) {
             console.log('99祝99');
         } else {
             console.log('你今年' + i + '岁了');
         }
     }
 </script>

课堂案例1：求1~100之间所有整数的累加和

 <script>
     var sum = 0;
     for (var i = 1; i <= 100; i++) {
         sum += i;
     } console.log(sum);
 </script>

课堂案例2：求学生成绩

要求用户输入班级人数，之后依次输入每个学生的成绩，最后打印出该班级总的成绩以及平均成绩。

 <script>
     var sum = 0;
     var average=0;
     var num = prompt('请输入班级人数：');
     for (var i = 1; i <= num; i++) {
         var score = prompt('请输入第' + i + '学生成绩：');
         sum = sum + parseFloat(score);
     }
     average=sum / num;
     alert('总成绩:' + sum);
     alert('平均分:' + average);
 </script>

2.4 练习题：

1、求1-100之间所有数的平均值

 <script>
     // 1、求1-100之间所有数的平均值
     var sum = 0;
     for (var i = 1; i <= 100; i++) {
         sum += i;
     } console.log(sum / 100);//50.5
 </script>

2、求1-100之间所有偶数的和，奇数的和

 <script>
     //偶数even、奇数odd
     var even = 0;
     var odd = 0;
     for (var i = 1; i <= 100; i++) {
         if (i % 2 == 0) {
             even += i;
         } else {
             odd += i;
         }
     } console.log('1-100之间所有偶数和为' + even);//2550
     console.log('1-100之间所有奇数和为' + odd);//2500
 </script>

3、求1-100之间所有能被3整除的数字的和

<script>
    var sum = 0;
    for (var i = 1; i <= 100; i++) {
        if (i % 3 == 0) {
            sum += i;
        }
    }
    console.log('1-100之间所有能被3整除的数字的和为' + sum);//1683
</script>

4、一行打印五个星星

//一行打印五个星星
<script>
    var sum = '';
    var star = '★';
    for (var i = 1; i <= 5; i++) {
        sum += star;
    }
    console.log(sum);
</script>

//打印输入的星星个数
<script>
    var sum = '';
    var star = '★';
    var num=prompt('请输入星星的个数：')
    for (var i = 1; i <= num; i++) {
        sum += star;
    }
    alert(sum);
</script>

3.双层for循环

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

3.1 语法结构：

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

我们可以把里面的循环看做外层循环的语句
外层循环循环一次，里面的循环执行全部，代码验证：

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

3.2 打五行星星：

/*
★★★★★ 

★★★★★ 

★★★★★ 

★★★★★ 

★★★★★
*/
<script>
var star = '';
    for (var i = 1; i <= 5; i++) {

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

打印输出n行n列的星星：

<script>
    var row = prompt('请输入打印星星的行数：')
    var column = prompt('请输入打印星星的列数：')
    var star = '';
    for (var i = 1; i <= row; i++) {
        for (var j = 1; j <= column; j++) {
            star += '★';
        }
        star = star + '\n';
    }
    alert(star);
</script>

3.3 打印倒三角星星：

<script>
    var star = '';
    for (var i = 1; i <= 5; i++) {//外层循环5次

        for (var j = i; j <= 5; j++) {//内层第一次打5个，第二次打4个，以此类推

            star = star + '★';
        }
        star += '\n';
    } 
    console.log(star);
    
//打印正三角星星
    var star = '';
    for (var i = 1; i <=5; i++) {
        for (var j = 1; j <= i; j++) {
            star = star + '★';
        }
        star = star + '\n';
    }
    console.log(star);
</script>

3.4 课堂案例3：打印九九乘法表

<script>
    var result = '';
    //i代表行数，j代表每行的列数，j<=i的
    for (var i = 1; i <= 9; i++) {
        for (var j = 1; j <= i; j++) {
            result += j + '×' + i + '=' + i * j
        }
        result = result + '\n';
    } console.log(result);
</script>

3.5 for循环总结：

for循环可以重复执行某些相同的代码
for循环可以重复执行些许不同的代码，因为我们有计数器
for循环可以重复执行某些操作，比如算数运算符加法操作
随着需求增加，双重for循环可以做更多、更好看的效果
双重for循环，外层循环一次，内层for循环全部执行
for循环是循环条件和数字直接相关的循环
分析要比写代码更重要
一些核心算法想不到，但是要学会，分析它的执行过程
举一反三，自己经常总结，做一些相似的案例

4.while循环

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

while语句的语法结构如下：

while(条件表达式){

//循环体代码

}

执行思路：

1、先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码

2、执行循环体代码

3、循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为false时，整个循环过程才会结束

4、while循环的语法结构：

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

5、执行思路：

当条件表达式结果为true 则执行循环体否则退出循环

<script>
    var num = 1;
    while (num <= 100) {
        num++;
        console.log('how are you?');
    }
    //里面有计数器 初始化变量
    //里面应该也有操作表达式 完成计数器的更新防止死循环
</script>

课堂案例1：

①打印人的一生，从1到100岁

<script>
    var num = 1;
    while (num <= 100) {
        console.log('你' + num + '岁了');
        num++;
    }
</script>

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

<script>
    var num = 1;
    var sum = 0;
    while (num <= 100) {
        sum += num;
        num++;
    } console.log(sum);
</script>

③你爱我吗？除非回答“我爱你”，否则一直弹出。

<script>
    while (num !== '我爱你') {
        var num = prompt('你爱我吗？');
    } alert('回答正确~');
</script>

5.do while循环

do...while其实是while语句的一个变体。该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。

语法结构：

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

执行思路跟while不同的地方在于do while先执行一次循环体再判断条件，如果条件表达式结果为真，则继续执行循环体，否则退出循环

代码验证：

<script>
    var i = 1;
    do {
        console.log('how are you?');
        i++;
    } while (i <= 100);
</script>

执行思路：

①先执行一次循环体代码

②再执行条件表达式，如果结果为true，则继续执行循环体代码，如果为false，则退出循环，继续执行后面代码

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

课堂案例：

①打印人的一生，从1到100岁

<script>
    var i = 1;
    do {
        console.log('你今年' + i + '岁了')
        i++;
    } while (i <= 100);
</script>

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

<script>
    var num = 1;
    var sum = 0;
    do {
        sum += num;
        num++;
    } while (num <= 100);
    console.log(sum);
</script>

③你爱我吗？除非回答“我爱你”，否则一直弹出。

<script>
    do {
        var num = prompt('你爱我吗？');
    } while (num !== '我爱你');
    alert('回答正确~');
</script>

循环小结：

JS中循环有for、while、do while
三个循环很多情况下都可以相互替代使用
如果是用来计次数的，跟数字相关的，三者使用基本相同，但是我们更喜欢用for
while和do...while可以做更加复杂的判断条件，比for循环灵活一些
while和do...while执行顺序不一样，while先判断后执行，do...while先执行一次，再判断执行
while和do...while执行次数不一样，do...while至少会执行一次，而while可能一次也不执行
实际工作里，我们更常用for循环语句，它写法更简洁直观，所以这个要重点学习

6.continue break

6.1 continue关键字

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

例如，吃5个包子，第3个有虫子，就扔掉第三个，继续吃第4个第5个，其代码实现如下：

<script>
    //continue关键字 退出本次循环（当前次循环）继续执行剩余次数循环
    for (var i = 1; i <= 5; i++) {
        if (i == 3) {
            continue;//只要遇到continue就退出本次循环 直接跳到
        }
        console.log('我正在吃第' + i + '个包子');
    }
</script>

求1~100之间，除了能被7整除之外的整数和

<script>
    var sum = 0;
    for (var i = 1; i <= 100; i++) {
        if (i % 7 == 0) {
            continue;
        }
        sum += i;
    } console.log(sum);//4315
</script>

6.2 break关键字

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

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

<script>
    var num = 1;
    for (var num = 1; num <= 5; num++) {
        if (num == 3) {
            console.log('有虫！！');
            break;
        }
        console.log('我吃第' + num + '个包子');
    }
</script>

作业：

1、求1~100之间所有数的总和与平均值

<script>
    var sum = 0;
    for (var i = 1; i <= 100; i++) {
        sum += i;
    } console.log(sum);//5050
    console.log(sum / 100);//50.5
</script>

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

<script>
    var sum = 0;
    for (var i = 1; i <= 100; i++) {
        if (i % 2 == 0) {
            sum += i;
        }
    } console.log(sum);//2550
</script>

3、求100以内7的倍数的和

<script>
    var sum = 0;
    for (var i = 1; i <= 100; i++) {
        if (i % 7 == 0) {
            sum += i;
        }
    } console.log(sum);//735
</script>

4、使用for循环打印5行5列的星星

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

5、使用for循环打印正三角排列的星星

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

6、使用for循环打印99乘法表

<script>
    var formula = '';
    for (var i = 1; i <= 9; i++) {
        for (var j = 1; j <= i; j++) {
            formula += j + '×' + i + '=' + i * j;
        }
        formula += '\n';
    } console.log(formula);
</script>

7、接收用户输入的用户名和密码，若用户名为“admin”，密码为“123456”，则提示用户登陆成功，否则让用户一直输入

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

8、求整数1~100的累加值，但要求跳过所有个位为3的数【用continue实现】

<script>
    var sum = 0;
    for (var i = 1; i <= 100; i++) {
        if (i % 10 == 3) {
            continue;
        }
        sum += i;
    } console.log(sum);//4570
</script>

小项目：

1、存钱

2、取钱

3、显示余额

4、退出

输入框：

里面现存100元
如果存钱，就用输入钱数加上先前存的钱数，之后弹出显示余额提示框
如果取钱，就减去取的钱数，之后弹出显示余额提示框
如果显示余额，就输出余额
如果退出，弹出退出信息提示框

<script>   
    //         2.1 简易ATM
    //  shuru = prompt("请输入操作:\n 1.存钱\n2.取钱\n3.显示余额\n4.退出");
    //  qian = 100;
    // while(qian>=10){
    //     if(shuru == '1'){
    //         var msg = prompt("请输入存钱金额");
    //     msg = parseInt(msg);
    //     qian = qian + msg;
    //     alert('余额为'+qian);
    //     shuru = prompt("请输入操作:\n 1.存钱\n2.取钱\n3.显示余额\n4.退出");
    //     }
    //     if(shuru == '2'){
    //     var msg = prompt("请输入取钱金额");
    //     msg = parseInt(msg);
    //     qian = qian - msg;
    //     alert('余额为'+qian);
    //      shuru = prompt("请输入操作:\n 1.存钱\n2.取钱\n3.显示余额\n4.退出");
    //     }
    //     if(shuru == '3'){
    //     alert('余额为'+qian);
    //     shuru = prompt("请输入操作:\n 1.存钱\n2.取钱\n3.显示余额\n4.退出");
    //     }
    //     if(shuru == '4'){
    //         shuru = false;
    //         break;
    //     }
    // }
    //简易ATM机
    var sum = 100;
    var sever = prompt('1、存钱\n2、取钱\n3、显示余额\n4、退出');
    do {
        if (sever == '1') {
            var money = prompt('请输入存款金额：');
            sum += parseInt(money);
            alert('您的余额为：' + sum + '元');
            var sever = prompt('1、存钱\n2、取钱\n3、显示余额\n4、退出');
        }
        if (sever == '2') {
            var money = prompt('请输入取款金额：');
            sum -= parseInt(money);
            alert('您的余额为：' + sum + '元');
            var sever = prompt('1、存钱\n2、取钱\n3、显示余额\n4、退出');
        }
        if (sever == '3') {
            alert('您的余额为：' + sum + '元');
            var sever = prompt('1、存钱\n2、取钱\n3、显示余额\n4、退出');
        }
        if (sever == '4') {
            sever = false;
            break;
        }
    } while (money >= 10);
</script>

求从1 开始第35个能被7和3整除的整数数

<script>
    var i = 0;
    for (var j = 1; j <= 5000; j++) {
        if (j % 3 == 0 && j % 7 == 0) {
            i++;
            if (i == 35) {
                alert(j);
                break;
            }
        }
    }
    console.log('您一共的数字是' + i);
    // var i = 1;
    // var jishu = 0;
    // //第 35 个数字不可能特别大
    // while (i <= 5000) {
    //     if (i % 3 == 0 && i % 7 == 0) {
    //         // console.dir(i);
    //         jishu = jishu + 1;
    //         if (jishu == 35) {
    //             alert(i);
    //             break;
    //         }
    //     }
    //     i++;
    // }
    // console.log('您一共的数字是：' + jishu);
</script>