十天学前端之JS篇(六)

前言: JS的流程控制分为顺序结构，分支结构和循环结构

1.JS的循环

循环的目的:

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

在js中，主要有三种类型的循环语句:

for循环

while循环

do…while循环

1.1 for循环

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

语法结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sO78OyPL-1662956105149)(Typora_image/120.png)]

新建.html文件，执行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
        1.for 重复执行某些代码，通常跟计数有关系
        2.for 语法结构
        for  (初始化变量;条件表达式;操作表达式) {
            循环体
        }

        初始化变量: 就是用var 声明的一个普通变量，通常用于作为计数器使用
        条件表达式: 就是用来决定每一次循环是否继续执行，就是终止的条件
        操作表达式：就是每次循环最后执行的代码，经常用于我们计数器变量进行更新(递增或者递减)
             
        */
        // 重复打印一百句 hello
        for (var i = 1;i <= 100;i++) {
            console.log('hello');
        }
        /* 
        for循环执行过程:
        1.首先执行里面的计数器变量  var i = 1  但是这句话在for里面只执行一次，这里的字母i是index的缩写
        2.去 i < = 100 来判断是否满足条件，如果满足条件，就去执行循环体，不满足条件退出循环
        3.最后去执行i++ i++是单独写的代码 递增  第一轮结束。
        4.接着去执行 i <= 100, 如果满足条件 就去执行 循环体， 不满足条件退出循环  第二轮
        
        
        */
    </script>
</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VYP8BooA-1662956105152)(Typora_image/121.png)]

断点调试

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LZpzug6F-1662956105155)(Typora_image/122.png)]

1.1.1 for循环重复执行相同代码

新建.html文件，执行效果如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // for 循环可以执行相同的代码
        for (var i = 1; i <= 10; i++) {
            console.log('这是一段循环');
        }

        // 可以让用户控制输出的次数
        var num = prompt('请您输入次数');
        for (var i = 1; i <= num; i++) {
            console.log('hello world');
        }
    </script>
</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PcsJNdOe-1662956105158)(Typora_image/123.png)]

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

新建.html文件，执行代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // for 循环可以重复执行不同的代码，因为有计数器变量  i 的存在  i每次循环值都会变化
        // 输入一个人的 1- 100 岁
        // 引引加加
        for (var i = 1; i <= 100; i++) {
            if (i == 1) {
                console.log('这个人今年1岁了，hello');
            } else if ( i == 18) {
                console.log('这个人今年18岁了，他成年了');
            } else {
                console.log('这个人今年' + i + '岁了');
            }
        }
    </script>
</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FMbWw7KJ-1662956105159)(Typora_image/124.png)]

1.1.3 for 循环可以重复某些相同操作

for循环因为有了计数器的存在，我们还可以重复的执行某些操作，比如做一些算术运算。

1.1.3.1 案例：求1-10之间所有整数的累加和

分析:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jDVVU4kp-1662956105165)(Typora_image/125.png)]

新建.html文件，执行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var sum = 0;    // 求和  的变量
        for (var i = 1; i <= 100; i++) {
            sum += i
            // 或 sum = sum + i
        }
        console.log(sum);
    </script>
</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sey3sVeT-1662956105170)(Typora_image/126.png)]

1.1.3.2 案例三小则

新建.html文件，执行代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.求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);

        // 2.求1-100之间所有偶数和奇数的和   需要一个偶数的和的变量 even   还需要一个奇数和的变量 odd
        var even = 0;
        var odd = 0;
        for (var i = 1; i <= 100;i++) {
            if (i % 2 ==0) {
                even += i;    // even = even + i
            } else {
                odd += i;     // odd = odd + i
            }
        }
         console.log('1-100之间所有的偶数和是' + even);
         console.log('1-100之间所有的奇数和是' + odd);

        // 3.求1-100之间所有能被3整除的数字的和    
        var result = 0;
        for (var i = 1; i <=100; i++) {
            if (i % 3 == 0) {
                result += i      // result = result + i 
            }
        } 
        console.log('1~100之间能被3整除的数字的和是:' + result);
    </script>
</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0RflLhVi-1662956105171)(Typora_image/127.png)]

1.1.3.3 案例：求学生成绩

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

分析：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rPqn8yI4-1662956105173)(Typora_image/128.png)]

新建.html文件，执行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var num = prompt('请输入班级的总人数:');     // num 是总的单击人数
        var sum = 0;  // 求和变量
        var average = 0;  // 求平均值的变量
        for (var i = 1; i <= num; i++) {
            var score = prompt('请您输入第' + i + '个学生成绩'); 
            // prompt取的数字是字符串，如果之间和数字加，都会变成字符串，故需要把字符串转换成数字
            sum += parseFloat(score);
        }
        average = sum / num;
        alert('班级总的成绩是:' + sum);
        alert('班级平均分是:' + average);
    </script>
</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fpKC7ja4-1662956105177)(Typora_image/129.png)]

1.1.3.4 案例：一行打印五个星星

新建.html文件，执行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // var str = '';
        // for (var i = 1;i<= 5;i++) {
        //     str += '★';
        // }
        // console.log(str);
        //  拓展：
        var num = prompt('请输入星星的个数:');
        var str = '';
        for (var i = 1; i <= num; i++) {
            str += '★';
        }
        alert(str);
    </script>
</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1rWYXW28-1662956105178)(Typora_image/130.png)]

2.双重for循环

很多情况下，单层for循环并不能满足我们的需求，比如我们要打印一个5行5列的图形、打印一个倒直角三角形等，此时就可以通过循环嵌套来实现。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yNDZgyty-1662956105182)(Typora_image/131.png)]

新建.html文件，执行代码如下：

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-obYWvUEC-1662956105185)(Typora_image/132.png)]

2.1 案例：五行五列星星案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DpiUWdvB-1662956105187)(Typora_image/133.png)]

新建.html文件，执行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 打印五行五列星星
        var str = '';
        for (var i = 1;i <= 5; i++) {    // 外层循环负责打印五行
            for (j = 1; j <= 5; j++) {   // 里层循环负责一行打印五个星星
                str += '★';   
            }
            // 如果一行打印完毕5个星星就要另起一行 加 \n
            str += '\n';
        }
        console.log(str);
    </script>
</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xcOrQCog-1662956105189)(Typora_image/134.png)]

2.2 案例：打印n行n列的星星

要求：用户输入行数和列数，之后在控制台打印出用户输入行数和列数的星星。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 打印n行n列的星星
        var rows = prompt('请您输入行数:');
        var cols = prompt('请您输入列数:');
        var str = '';
        for (var i =1; i<= rows;i++) {
            for (var j= 1; j <= cols;j++) {
                str += '★';
            }
            str += '\n';
        }
        console.log(str);
    </script>
</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZWd7v8fh-1662956105192)(Typora_image/135.png)]

2.3 案例: 打印倒(正)三角形

新建.html文件，执行如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 打印倒三角形案例
        var str = '';
        for (var i = 1; i <= 10; i++) {           // 外层循环控制行数
            for (var j = i; j <= 10; j++) {       // 里层循环打印的个数不一样  j =i
                str += '★';
            }
            str += '\n';
        }
        console.log(str);

        // 打印正三角形案例
        var num = '';
        for (var i = 1; i <= 10;i++) {
            for (var j = 1;j <= i; j++) {        // j <= i
                num += '★';
            }
            num += '\n';
        }
        console.log(num);
    </script>
</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u3Pxxszl-1662956105194)(Typora_image/136.png)]

2.4 案例：打印九九乘法表

案例分析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3FgP5CjT-1662956105195)(Typora_image/137.png)]

新建.html文件，执行代码如下：

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lMi6d2PP-1662956105197)(Typora_image/138.png)]

2.5 for 循环小结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EmUgO4Yh-1662956105199)(Typora_image/139.png)]

3.while 循环

3.1 while案例

新建.html文件，执行代码如下：

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4L1AzZWG-1662956105200)(Typora_image/140.png)]

4. do while 循环

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aOpZD2uA-1662956105202)(Typora_image/141.png)]

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-734gcb96-1662956105203)(Typora_image/142.png)]

4.1 do while 案例

新建.html文件，执行代码如下：

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TNLZp1th-1662956105205)(Typora_image/143.png)]

5.循环小结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZnuSqDv0-1662956105206)(Typora_image/144.png)]

6. continue break

6.1 continue

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

新建.html文件，执行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // continue 关键字     退出本次(当前次的循环)  继续执行剩余次数循环
        // 案例：1. 吃五个包子，第三个包子没熟，放下，继续吃第四个、第五个包子
        for (var i = 1; i <= 5; i++) {
            if (i == 3) {
                continue;
            }
            console.log('我正在吃第'+i+'个包子');
        }
        // 案例：2.求1~100之间，除了能被7整除之外的整数和
        var sum = 0;
        for (var i= 1;i <= 100; i++) {
            if (i % 7 == 0) {
                continue;
            }
            sum += i;
        }
        console.log(sum);
    </script>
</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZaRJK0Gi-1662956105209)(Typora_image/145.png)]

6.2 break

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

新建.html文件，执行代码如下：

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E87W1NMe-1662956105210)(Typora_image/146.png)]

7.JS命令规范以及语法格式

7.1 标识符命名规范

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5lSJr5Yj-1662956105211)(Typora_image/147.png)]

8. 循环案例(简易ATM)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iJvrfLyx-1662956105212)(Typora_image/148.png)]

新建.html文件，执行代码如下：

方法二：

新建.html文件，执行代码如下

效果如下
在这里插入图片描述

相关阅读:
DIN EN ISO 4589-2塑料用氧指数法测定燃烧行为第2 部分：室温试验
 随手记录: Macbook/MacOS 快速安装brew
vue封装自己的组件库 01.封装button组件
 首发：鸿蒙面试真题分享【独此一份】
动态规划--01背包问题详解
 我赌你不懂系列：啥是序列化
 学习总结 | 下一代人工智能
 mirror算法 O(1)空间复杂度实现二叉树遍历
 《Flink学习笔记》——第十二章 Flink CEP
【探花交友】用户登录、代码优化
原文地址：https://blog.csdn.net/m0_57021623/article/details/126815655

十天学前端之JS篇(六)

1.JS的循环

1.1 for循环

1.1.1 for循环重复执行相同代码

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

1.1.3 for 循环可以重复某些相同操作

1.1.3.1 案例 ：求1-10之间所有整数的累加和

1.1.3.2 案例三小则

1.1.3.3 案例：求学生成绩

1.1.3.4 案例：一行打印五个星星

2.双重for循环

2.1 案例：五行五列星星案例

2.2 案例：打印n行n列的星星

2.3 案例: 打印倒(正)三角形

2.4 案例：打印九九乘法表

2.5 for 循环小结

3.while 循环

3.1 while案例

4. do while 循环

4.1 do while 案例

5.循环小结

6. continue break

6.1 continue

6.2 break

7.JS命令规范以及语法格式

7.1 标识符命名规范

8. 循环案例(简易ATM)

1.1.3.1 案例：求1-10之间所有整数的累加和