​🌈个人主页：前端青山
🔥系列专栏：JavaScript篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来JavaScript篇专栏内容:JavaScript-for循环

目录

循环结构

循环思想（三要素）

实现循环的语句

当型循环

直到型循环

多功能循环

案例

输出10个HelloWorld

输出1~100的奇数

输出m~n的整数

i. 求5！(阶乘：从1 乘到它本身)

解决猴子吃桃的问题（有一只猴子，还有一堆桃子，第一天的时候，吃了一堆桃子中的一半，没忍住，又多吃了一个；第二天的时候，又吃了剩下桃子中的一半，没忍住，又多吃了一个，以后每天如此，直到第10天的时候，只剩下了一个桃子，问第一天的时候有多少个桃子）

求1+2+3+……+100的和

输出1-100中(7的倍数和带7的数除外）的数。

输出m至n的自然数中的偶数和与奇数和并统计偶数与奇数的个数分别是多少？

入职薪水10K，每年涨幅5%，50年后工资多少？

流程控制关键字

循环的区别

      while:

   do while:

    for

循环结构

循环结构 ： 满足一定条件，重复执行一个动作或一段代码。

循环思想（三要素）

1. 从哪里开始

2. 到哪里结束

3. 步长（步进）

实现循环的语句

1. while

2. do while

3. for

当型循环

循环初值;
while(循环条件){
    语句组;
    步长;
}

直到型循环

循环初值;
do{
    语句组;
    步长;
}while(循环条件);

多功能循环

for(循环初值;循环条件;步长){
    语句组;
}

案例

• 输出10个HelloWorld

<script>
        输出10个HelloWorld
        输出:  alert()  document.write()  console.log()
        10个：重复 循环  三要素：i = 1;  i < 11   i ++
        循环语法：
            while
            do while
            for
        //while
        //循环初值
        var i = 1;
        while(i < 11){
            console.log('HelloWorld');
            i ++;
            // i += 2;
        }
        //do while
        var j = 1;
        do{
            console.log('HelloWorld');
            j ++;
        }while(j < 11);
        //for
        for(var k = 1;k < 11;k ++){
            console.log('HelloWorld');
        }
    </script>

• 输出1~100的奇数

 <script>
        输出1~100的奇数
        输出: alert() document.write() console.log()
        1~100 : 重复  循环  三要素： i = 1   i < 101   i ++   (i += 2)
        奇数: 不能被2整除  一个条件  一个结果  单分支 if(){}
    
        while
         var i = 1;
         //准备一个变量，存放结果
         var str = '';
         while(i < 101){
             if(i % 2){
                 // document.write(i + ' ');  //满足一次条件，就和页面交互一次
                 //优化后的语句
                 str += i + ' ';  //'' + 1  str = '1' + 3
            }
             i ++;
         }
        将str 一次性添加到页面中
        document.write(str);
         console.log(str);
         alert(str);

         var i = 1,str = '';
         do{
             str += i + ' ';
             i += 2;
         }while(i < 101);
        document.write(str);
        
        var i = 1,str = '';
        do{
            if(i % 2){
                str += i + ' ';
            }
            i ++;
        }while(i < 101);
        document.write(str);

        document.write('<br>');
        for(var i = 1,str = '';i < 101;i += 2){
            str += i + ',';
        }
        document.write(str);
    </script>

• 输出m~n的整数

 <script>
        输出m~n的整数
        输出
        m~n  prompt() parseInt()
        if(m < n){
            如果m = 1,n = 5   重复-循环-三要素  i = m; i <= n;i ++
        }else{
            如果m = 5,n = 1   重复-循环-三要素  i = m; i >= n;i --
        }

       //1. 准备两个变量
       var m = parseInt(prompt('请输入一个整数：'));
       var n = parseInt(prompt('请输入一个整数：'));
       //2. 判断谁大谁小
       if(m < n){
            for(var i = m,str = '';i <= n;i ++){
                str += i + ' ';
            }
            //输出结果
            document.write(str);
       }else{
            for(var i = m,str = '';i >= n;i --){
                str += i + ' ';
            }
            //输出结果
            document.write(str);
       }
    </script>

• i. 求5！(阶乘：从1 乘到它本身)

   <script>
求5！(阶乘：从1 乘到它本身)  1 * 2 * 3 * 4 * 5
1. 重复乘法的操作，所以使用循环   三要素 ： i = 1   i < 6   i ++
        for(var i = 1,fac = 1;i < 6;i ++){
            fac *= i; //fac = 1 * 1 * 2 * 3 * 4 * 5
        }
        alert(fac);
    </script>

• 解决猴子吃桃的问题（有一只猴子，还有一堆桃子，第一天的时候，吃了一堆桃子中的一半，没忍住，又多吃了一个；第二天的时候，又吃了剩下桃子中的一半，没忍住，又多吃了一个，以后每天如此，直到第10天的时候，只剩下了一个桃子，问第一天的时候有多少个桃子）

    <script>
        解决猴子吃桃的问题（有一只猴子，还有一堆桃子，第一天的时候，吃了一堆桃子中的一半，没忍住，又多吃了一个；第二天的时候，又吃了剩下桃子中的一半，没忍住，又多吃了一个，以后每天如此，直到第10天的时候，只剩下了一个桃子，问第一天的时候有多少个桃子）
        1. 第10天： 1     sum = 1
        2. 每天是怎么吃的？  第9天：  (sum + 1) * 2   4
        3.                    8      (4 + 1) * 2   10
                              7  6  5 4 3 2 1 天

        重复天数， 循环   i = 9  i > 0  i --
        for(var day = 9,sum = 1;day > 0;day --){
            sum = (sum + 1) * 2
        }
        alert(sum);
    </script>

• 求1+2+3+……+100的和

    <script>
        求1+2+3+……+100的和
        重复 +  循环  三要素  i = 1  i < 101  i ++

        for(var i = 1,sum = 0;i < 5;i ++){
            sum += i;
        }
        alert(sum);
    </script>

• 输出1-100中(7的倍数和带7的数除外）的数。

    <script>
        输出1-100中(7的倍数和带7的数除外）的数。
        1-100 : 循环   i = 1; i < 101  i ++

        7的倍数和带7的数除外:
        !(i % 7 === 0 || parseInt(i / 10) === 7 || i % 10 === 7)
        i % 7 && parseInt(i / 10) !== 7 && i % 10 !== 7
       //result : 结果
        for(var i = 1,result = '';i < 101;i ++){
            if(!(i % 7 === 0 || parseInt(i / 10) === 7 || i % 10 === 7)){
                result += i + ' ';
            }
        }
        document.write(result);
    </script>

• 输出m至n的自然数中的偶数和与奇数和并统计偶数与奇数的个数分别是多少？

  <script>
        输出m至n的自然数中的偶数和与奇数和并统计偶数与奇数的个数分别是多少？
        1. m 至 n  用户输入两个数

        2. 确保 m < n
        if(m > n){
            交换两个值
        }
        3. 实现循环
        三要素： i = m; i <= n; i ++
        4. 是否能被2整除  奇数   偶数   双分支
        偶数和
        奇数和
        偶数的数量
        奇数的数量
        //1. 准备两个变量
        var m = parseInt(prompt('请输入一个整数：'));
        var n = parseInt(prompt('请输入一个整数：'));
        //1.1 准备放置结果的变量
        // even : 偶数
        // sum : 和
        // odd : 奇数
        //count: 统计
        var even_sum = 0;
        var odd_sum = 0;
        var even_count = 0;
        var odd_count = 0;
        //2. 确保m < n
        if(m > n){
            var t = m;
            m = n;
            n = t;
        }
        //3. 实现循环
        for(var i = m;i <= n;i ++){
            //4. 判断奇偶
            if(i % 2){
                //true : 奇数
                odd_sum += i;
                odd_count ++;
            }else{
                //false : 偶数
                even_sum += i;
                even_count ++;
            }
        }
        //5. 输出结果
        console.log('偶数和：' + even_sum + '\n奇数和：' + odd_sum + '\n偶数数量：' + even_count + '\n奇数数量：' + odd_count);
    </script>

• 入职薪水10K，每年涨幅5%，50年后工资多少？

    <script>
        入职薪水10K，每年涨幅5%，50年后工资多少？
        初值： sum = 10
        i = 2     i < 51  i ++
        sum = sum + sum * 0.05   sum += sum * 0.05
        for(var sum = 10,i  = 2;i < 51;i ++){
            sum += sum * 0.05;
        }
        alert(sum);
    </script>

流程控制关键字

1. continue : 跳出本次循环，直接进入一下次循环。

2. break : 跳出循环。

  <script>
        for(var i = 1;i < 6;i ++){
            // if(i == 2 || i == 4){
            //     continue;  //当i = 2 或 i = 4 的时候，直接跑到下一次循环
            // }
            if(i !== 2 && i !== 4){
                //console.log() : 每输出一次，自动换一行
                console.log(i); //  1  3  5
            }
        }


        //break : 退出循环
        for(var i = 1;i < 6;i ++){
            if(i === 3){
                break;
            } 
        }
        //上面的循环结束后，才能执行到下面的语句，那么 什么时候结束的？3
         console.log(i); //3
    </script>

循环的区别

      while:

•   1. 当型循环，先判断条件，后执行语句
•   2. 当条件第一次为假时，一次也不执行。
•   3. 常用于循环次数不确定时

   do while:

•   1. 直到型循环，先执行语句，后判断条件
•   2. 当 条件第一次为假时，至少执行一次循环
•   3. 常用于循环次数不确定时

    for

•   1. 多功能循环（当型循环），先判断条件，后执行语句
•   2. 当条件第一次为假时，一次也不执行
•   3. 常用于循环次数确定时