JavaScript 07- 流程控制 - 循环

最新推荐文章于 2024-11-02 12:42:04 发布

柑橘味柚芽

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量310

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_41700993/article/details/106333025

版权

本文详细讲解了JavaScript中的循环控制，包括for、while和do...while循环的用法、执行过程以及各种循环在实际编程中的应用，如求学生成绩案例、打印星星的图案等，同时涉及了continue和break的使用，帮助开发者更好地理解和运用循环结构。

摘要由CSDN通过智能技术生成

昨日复习

前置自增是先自增后返回值
后置自增是先返回值后自增
“===” 如果要相等必须值和数据类型相等
switch的结束每一项的结束关键字是 break
三元表达式的格式为：条件判断表达式 ? 表达式1 : 表达式2
switch的默认项的关键词是 default

01 - 循环的目的

1. 循环

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

JS中有三种类型的循环：

for 循环
while 循环
do…while 循环

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01-循环的目的</title>
    <script>
        // 循环的目的：可以重复执行某些代码
        console.log('媳妇我错了');
        console.log('媳妇我错了');
        console.log('媳妇我错了');
        console.log('---------------------');
        for (var i = 1; i <= 1000; i++) {
    
            console.log('媳妇我错了');
        }
    </script>
</head>
<body>

</body>
</html>

02 - for循环

2. for循环

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

2.1 语法结构

for 循环主要用于把某些代码循环若干次，通常跟计数有关系

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

知识总结

for循环

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>02-for循环</title>
    <script>
        // 1. for 重复执行某些代码， 通常跟计数有关系
        // 2. for 语法结构
        // for (初始化变量; 条件表达式; 操作表达式) {
    
        //     // 循环体
        // }
        // 3. 初始化变量 就是用var 声明的一个普通变量， 通常用于作为计数器使用 
        // 4. 条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件
        // 5. 操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或者递减）
        // 6. 代码体验 我们重复打印100局 你好
        for (var i = 1; i <= 100; i++) {
    
            console.log('你好吗');
        }
    </script>
</head>
<body>

</body>
</html>

03 - for循环执行过程

知识总结

执行过程：

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>03-for循环执行过程</title>
    <script>
        // for 循环的执行过程
        for (var i = 1; i <= 100; i++) {
    
            console.log('你好吗');
        }
        // 1. 首先执行里面的计数器变量  var i = 1 .但是这句话在for 里面只执行一次  index
        // 2. 去 i <= 100 来判断是否满足条件， 如果满足条件  就去执行 循环体  不满足条件退出循环 
        // 3. 最后去执行 i++   i++是单独写的代码 递增  第一轮结束 
        // 4. 接着去执行 i <= 100 如果满足条件  就去执行 循环体  不满足条件退出循环   第二轮
    </script>
</head>
<body>

</body>
</html>

04 - for循环重复相同代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>04-for循环重复相同代码</title>
    <script>
        // for 循环可以执行相同的代码
        for (var i = 1; i <= 10; i++) {
    
            console.log('媳妇我错了');

        }
        // 我们可以让用户控制输出的次数
        var num = prompt('请您输入次数');
        for (var i = 1; i <= num; i++) {
    
            console.log('媳妇我错了');

        }
    </script>
</head>
<body>

</body>
</html>

05 - for循环重复不同的代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>05-for循环重复不同的代码</title>
    <script>
        // for 循环可以重复执行不同的代码  因为我们有计数器变量 i 的存在 i每次循环值都会变化
        // 我们想要输出1个人 1~100岁
        for (var i = 1; i <= 100; i++) {
    
            console.log('这个人今年' + i + '岁了');
        }
        for (var i = 1; i <= 100; i++) {
    
            if (i == 1) {
    
                console.log('这个人今年1岁了，他出生了');
            } else if (i == 100) {
    
                console.log('这个人今年100岁了，他死了');
            } else {
    
                console.log('这个人今年' + i + '岁了');
            }
        }
    </script>
</head>
<body>

</body>
</html>

06 - for循环重复某些操作

2.4 for 循环重复某些相同的操作

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

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

案例分析：

需要循环100次，我们需要一个计数器 i
我们需要一个存储结果的变量 sum，但是初始值一定是0
核心算法：1 + 2 + 3 + 4 … ， sum = sum + i

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>06-for循环重复某些操作</title>
    <script>
        // for 循环重复执行某些操作 比如说我们做了100次加法运算
        var sum = 0; // 求和 的变量
        for (var i = 1; i <= 100; i++) {
    
            // sum = sum + i;
            sum += i;
        }
        console.log(sum); // 5050
    </script>
</head>
<body>

</body>
</html>

07 - for循环案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>07-for循环案例</title>
    <script>
        // 1. 求1-100之间所有数的平均值   需要一个 sum 和的变量 还需要一个平均值 average 变量
        var sum = 0;