08-JavaScript 流程控制-循环

最新推荐文章于 2023-06-12 15:16:32 发布

冬眠海带丝

最新推荐文章于 2023-06-12 15:16:32 发布

阅读量61

点赞数

分类专栏： JS基础文章标签： javascript

本文链接：https://blog.csdn.net/qq_45599475/article/details/124195737

版权

JS基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1. 循环

1.1.循环目的

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

1.2.JS 中的循环

for 循环
while 循环
do…while 循环

2. for 循环

在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体
及循环的终止条件组成的语句，被称之为循环语句。
for 循环主要用于把某些代码循环若干次，通常跟计数有关系。

2.1.语法结构

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

初始化变量：通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。
条件表达式：用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。
操作表达式：每次循环的最后都要执行的表达式。通常被用于更新或者递增计数器变量。当然，递减变量也是可以的。

2.2.代码体验

        for (var i = 1; i <= 100; i++) {
            console.log('你有事吗');
        }

2.3.执行过程

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

2.4.断点调试

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

2.5.for 循环重复相同的代码

        var num = prompt('请输入重复次数');
        for (i = 1; i <= num; i++) {
            console.log('好想你哦');
        }

2.6.for 循环重复不相同的代码

因为有计数器变量 i 的存在，i 每次循环，值都会变化。

        for (i = 1; i <= 10; i++) {
            console.log('想小弗的第' + i + '次');
        }

        var num = prompt('今天要想小弗多少次呢')
        for (i = 1; i <= num; i++) {
            if (i == 1) {
                console.log('这是第1次，期待');
            } else if (i == num) {
                console.log('这是第' + num + '次，等不到了');
            } else {
                console.log('这是第' + i + '次，好想好想');
            }
        }

2.7.循环重复某些相同操作

        // 求1 - 100之间的整数累加和
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            // sum = sum + i;
            sum += i;
        }
        console.log(sum);

2.8.练习

        // 练习
        // 求1-100之间所有数的平均数  需要和的变量sum  需要平均数的变量average
        var sum = 0;
        var average = 0;
        for (var i = 1; i <= 100; i++) {
            sum += i;
        }
        average = sum / 100
        console.log(average);

        // 求1 - 100之间所有偶数和奇数的和  需要一个偶数的和的变量even  还需要一个奇数的和的变量odd
        var even = 0;
        var odd = 0;
        for (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);

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

        // 案例：求学生成绩
        伪代码：
        ① 弹出输入框输入总的班级人数(num)
        ② 依次输入学生的成绩（保存起来 score），此时我们需要用到 for 循环，弹出的次数跟班级总人数有关系 条件表达式 i <= num
        ③ 进行业务处理: 计算成绩。 先求总成绩（sum），之后求平均（average）
        ④ 弹出结果

        var num = prompt('请输入班级总人数');
        var sum = 0;
        var average = 0;
        for (var i = 1; i <= num; i++) {
            var score = prompt('请输入学生' + i + '的成绩');
            sum = sum + score * 1; //将score转换为数字型
        }
        average = sum / num;
        alert('班级总成绩是' + sum);
        alert('班级总的平均成绩是' + average);

        // 案例：一行打印客户要求的星星数
        // 我们采取追加字符串的方式，这样可以打印到控制台上。
        var num = prompt('请输入星星个数');
        var str = '';
        for (var i = 1; i <= num; i++) {
            str = str + '⭐';
        }
        console.log(str);

3. 双重 for 循环

3.1.概述

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

3.2.语法结构

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

内层循环可以看做外层循环的语句
内层循环执行的顺序也要遵循 for 循环的执行顺序
外层循环执行一次，内层循环要执行全部次数

3.3.执行思路

3.4.打印五行五列星星

伪代码：

内层循环负责一行打印五个星星
外层循环负责打印五行

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

3.5.练习

        // 打印n行n列星星
        var num = prompt('请输入一个数字');
        var str = '';
        for (var i = 1; i <= num; i++) {
            for (var j = 1; j <= num; j++) {
                str = str + '⭐';
            }
            str = str + '\n';
        }
        console.log(str);

        // 打印倒三角星星
        var str = '';
        for (var i = 1; i <= 10; i++) {
            for (var j = i; j <= 10; j++) {
                str = str + '⭐';
            }
            str = str + '\n';
        }
        console.log(str);

        // 打印正三角形
        var str = '';
        for (var i = 1; i <= 10; i++) {
            for (var j = 11 - i; j <= 10; j++) {
                str = str + '⭐';
            }
            str = str + '\n';
        }
        console.log(str);

3.6. for 循环小结

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

4. while 循环

4.1.语法结构

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

4.2.执行思路

先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码。
while 语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。
注意：
① 使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环
② while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断，比如判断用户名和密码

4.3.练习

        // 课堂案例1：打印人的一生，从1岁到20岁。
        var i = 1;
        while (i <= 20) {
            console.log('这个人今年' + i + '岁了');
            i++;
        }

        // 课堂案例2：计算 1 ~ 100 之间所有整数的和
        var j = 1;
        var sum = 0;
        while (j <= 100) {
            sum += j;
            j++;
        }
        console.log(sum);

        // 课堂案例3：询问你想我吗
        /* 弹出一个提示框， 你爱我吗？ 如果输入我爱你，就提示结束，否则，一直询问。
        伪代码：
         ① 弹出输入框，要求用户输入。
         ② 判断条件比较复杂我们使用 while 循环。
         ③ while 循环语句中的条件表达式只要输入的不是 我爱你，就一直循环。 */
        var message = prompt('你想我吗^^');
        while (message !== '想') {
            message = prompt('你想我吗^^');
        }
        alert('我也好想你o，宝贝')

5. do while 循环

5.1.语法结构

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

5.2.执行思路

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

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

5.3.练习

        // 课堂案例1：打印人的一生，1 - 20岁。
        var i = 1;
        do {
            console.log('这个人今年' + i + '岁了');
            i++;
        } while (i <= 20);

        // 课堂案例2：计算1 - 1001之间所有整数的和。
        var j = 1;
        var sum = 0;
        do {
            sum += j;
            j++;
        } while (j <= 100);
        console.log(sum);

        // 课堂案例3：询问你想我吗
        do {
            var message = prompt('你想我吗宝贝');
        } while (message != '想');
        alert('我也好想你哦，宝贝^^');

6.循环总结

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

7. continue break

7.1.continue 关键字

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

        // 求1 - 100之间，除了能被7整除之外的证书和。
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            if (i % 7 == 0) {
                continue;
            }
            sum += i;
        }
        console.log(sum);

7.2.break 关键字

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

        // 今天打算想你100次，但刚想完第11次的时候，我出车祸，死了。
        for (var i = 1; i <= 100; i++) {
            if (i == 12) {
                break;
            }
            console.log('这是我想你的第' + i + '次');
        }

冬眠海带丝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
08-JavaScript 流程控制-循环

文章目录1. 循环1.1.循环目的1.2.JS 中的循环2. for 循环2.1.语法结构2.2.代码体验2.3.执行过程2.4.断点调试2.5.for 循环重复相同的代码2.6.for 循环重复不相同的代码2.7.循环重复某些相同操作2.8.练习3. 双重 for 循环3.1.概述3.2.语法结构3.3.执行思路3.4.打印五行五列星星3.5.练习3.6. for 循环小结4. while 循环4.1.语法结构4.2.执行思路4.3.练习5. do while 循环5.1.语法结构5.2.执行思路5.3.
复制链接

扫一扫