Javascript基础（五）之循环结构

2、循环结构-1
1、问题
1、控制台中输出一句Hello World
2、控制台中输出10句Hello World
3、控制台中输出1000句Hello World
4、将 1000 句 Hello World 改成 “你好世界!”
5、在 1000 句你好世界基础上 增加
第 1 句 你好世界!
…
第1000句 你好世界!
2、什么是循环
循环：一遍又一遍的重复的执行相同或者相似的代码
生活中的循环：
1、上学
2、运动员跑圈
3、活着
4、地球公转和自转
循环的特点：
1、循环条件
指定循环的次数，或者继续执行循环的条件
2、循环体：也成为循环操作，重复做的事情是什么
3、while 循环
语义：当 条件 满足的时候，去做某些事情
1、语法
while(条件){
循环体(循环操作)
}

        执行流程：
            1、判断条件,如果条件为真，则执行循环体中的内容，如果条件为假，则跳出循环结构
            2、执行完循环体，再一次判断条件，
    2、练习
        1、打印输出 1 - 100 之间所有的数字
        2、打印输出 1 - 100之间所有的偶数
        3、计算1 - 100 之间所有的奇数和

<script>
            /*打印输出 1句 Hello World*/
            function fun1(){
                console.log("Hello World");
            }

            /*打印输出 10句 Hello World*/
            function fun2(){
                //1、条件：10遍 ，从第1遍开始，到第10遍结束
                var i=1;//循环次数
                //2、操作：console.log("Hello World");
                while(i<=1000){
                    console.log("第"+i+"遍你好 世界！");
                    //循环次数进行增加(自增)
                    i++;//更新循环条件
                }

            }
            /*打印1 - 100 之间所有的数字*/
            function fun3(){
                //循环条件：从第1遍开始，到第100遍结束
                var i=1;
                while(i <= 100){
                    //循环操作：将循环条件打印输出
                    console.log(i);
                    i++;
                }
            }

            /*打印 1- 100之间所有的偶数*/
            function fun4(){
                //循环条件：从第1遍开始，到第100遍结束
                var i = 1;
                while(i<=100){
                    /*循环操作：
                        1、判断 循环条件值 是否为 偶数
                        2、如果是偶数的话打印输出
                        3、循环条件的自增
                    */
                    if(i % 2 == 0){
                        console.log(i);
                    }
                    i++;
                }
            }

            /*计算 1- 100之间所有奇数的和*/
            function fun5(){
                //循环条件：从1开始到100结束
                var sum = 0;//用于累加 i 的值
                var i = 1;
                while(i<=100){
                    /*循环操作：
                        1、判断是否为奇数
                        2、如果是奇数的话，将循环条件值累加
                        3、更新循环变量
                    */
                    if(i % 2 == 1){
                        sum += i;
                    }
                    i++;
                }
                console.log("和为:"+sum);
            }

            /*打印 1- 100之间所有非3倍数的数字(continue)*/
            function fun6(){
                //条件：1-100
                var i = 1;
                while(i <= 100){
                    //操作：碰见3的倍数时，终止打印
                    if(i % 3 == 0){
                        i++;
                        continue;
                    }
                    console.log(i);
                    i++;
                }

            }

            /*打印 1 - 100之间非3倍数的数字(非continue)*/
            function fun7(){
                var i = 1;
                while(i <= 100){
                    if(i % 3 != 0){
                        console.log(i);
                    }
                    i++;
                }
            }

            /*要求用户一直不停的录入数据，并且将录入的数据打印在控制台上，直到输入 exit 为止*/
            function fun8(){
                //循环条件：输入 exit 为止，次数：无限次
                while(true){
                    /*循环操作：
                        1、用户录入数据
                        2、判断，如果用户录入的是 exit，则 退出循环
                        3、将录入的数据打印在控制台上
                    */
                    var msg = prompt("请输入一句话：");
                    if(msg == "exit"){
                        alert("Good Bye!");
                        break;//结束循环的条件
                    }
                    console.log(msg);
                }

            }
        </script>

    3、循环中的流程控制
        1、continue
            终止本次循环的执行，继续开始下次循环
            ex:
                打印 1 - 100之间所有非3的倍数的数字
        2、break
            结束整个循环的运行
            可以用在：不确定循环次数的时候去结束循环
            ex:
                要求用户 从弹框中 录入数据，录入完直接打印在控制台上，直到输入 exit 位置
4、do...while 循环
    1、特点
        先执行循环操作，再判断循环条件
    2、语法
        do{
            循环操作
        }while(条件);
    3、while 与 do...while 之间的区别 
        1、while
            先判断条件，再执行循环体
            最少执行 0 次循环
        2、do...while
            先执行循环体，再判断循环条件
            最少执行 1 次循环
    4、练习
        1、改写日期计算器为循环版本
        2、猴子吃桃
            猴子第一天摘了若干个桃子，当即吃了一半，还不过瘾，又多吃一个。第二天早上，将剩下的桃子吃掉一半，又多吃一个。以后每天早上都吃前一天的一半零一个。到第10天早上，发现只剩一个桃子。求：第一天摘了多少个桃子

<script>
            function calDate(){
                var year = prompt("Input a year:");
                var month = prompt("Input a month:");
                var day = Number(prompt("Input a day:"));
                var totalDays = 0;
                //统计 month 之前所有月的 天数
                var i = month - 1;//从 month前一个月开始计算
                //条件：到1月为止
                while(i>=1){
                    switch(i){
                        case 11:
                        case 9:
                        case 6:
                        case 4:
                            totalDays +=30;
                            break;
                        case 10:
                        case 8:
                        case 7:
                        case 5:
                        case 3:
                        case 1:
                            totalDays += 31;
                            break;
                        case 2:
                            totalDays += 28;
                            if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
                                totalDays += 1;
                            }
                            break;
                    }
                    i--;
                }
                totalDays += day;
                console.log("是第"+totalDays+"天");
            }

            /*猴子摘桃*/
            function calNumber(){
                var day = 10;//已知第10天
                var left = 1;//已知最后剩一个
                var total;//前一天的剩余量
                //循环条件：从第10天 算到第 2天为止
                while(day >= 2){
                    //循环操作：
                        //1、计算 total 是多少
                        //2、将total 赋值给 left 继续计算下一次的total
                    total = (left + 1) * 2;
                    left = total;
                    console.log("第"+(day-1)+"天，摘了"+total+"个桃子");
                    day--; //天数递减
                }
                console.log("第一天，猴子摘了"+total+"个桃子!");
            }
        </script>

循环结构-2
1、for 循环
1、while
打印 1 - 10 之间所有的数字
var i = 1; //1、声明循环条件变量
while(i <= 10){ //2、循环条件判断
console.log(i);//3、循环操作
i++;//4、更新循环变量
}
2、for 循环
目的：为了简化 while 循环的开发
for(表达式1;表达式2;表达式3){
循环操作
}
表达式1：声明循环条件变量
表达式2：循环条件判断
表达式3：更新循环变量

        流程：
            1、计算表达式1的值 即声明循环条件(只执行1次)
            2、计算表达式2的值 即计算循环条件时否满足，如果条件为真，则继续向下执行，否则退出循环
            3、条件为真时，执行循环体
            4、计算表达式3的值 即更新循环变量
            5、计算表达式2的值 即继续判断循环条件，回到第2步
        练习
            1、打印 1 - 100 之间所有的数字
            2、打印 1 - 100 之间所有的偶数
            3、计算 1 - 100 之间所有奇数的和
            4、定义一个函数，打印乘法口诀中的任意一行
                1*1=1
                1*2=2 2*2=4
                1*3=3 2*3=6 3*3=9
                1*4=4 2*4=8 3*4=12 4*4=16
            5、定义一个函数，计算 1+1/3+1/5+...+1/999的和
                1   : 1/1
                1/3 : 1/3
                1/5 : 1/5
            6、兔子问题：有1对兔子，从出生后的第3个月起每个月都生1对兔子，小兔子长到第3个月后每个月又生一对兔子。加入兔子都不死，问某个月的兔子总数是多少？

            菲波那切数列
            n1  n2
            1 , 1 , 2 , 3 , 5 , 8 , 13 , 21 , 34 , 55

            求第n个月的兔子的总量
            function f(n){
                如果 n==1 或 n == 2 ,直接返回1
                否则 就返回 上个月 和 上上个月 的量的和
                返回 f(n-1) + f(n-2)
            }
            求第5个月的兔子总量：f(5)
             f(5) = f(4) + f(3)
              f(4) = f(3) + f(2)
                    f(3) = f(2) + f(1)
                f(3) = f(2) + f(1)

<script>
            /*打印 1-100 之间所有的数字*/
            function fun1(){
                //表达式1：声明循环变量 var i=1
                //表达式2：循环条件判断 i<=100
                //表达式3：更新循环变量 i++
                //循环操作 打印循环条件 i 的值
                for(var i=1;i<=100;i++){
                    console.log(i);
                }
            }

            function fun2(){
                //表达式1：声明循环变量 var i=1
                //表达式2：循环条件判断 i<=100
                //表达式3：更新循环变量 i++
                //循环操作 判断 循环变量是否为偶数，偶数则打印
                /*for(var i=1;i<=100;i++){
                    if(i % 2 == 0){
                        console.log(i);
                    }
                }*/

                //表达式1：从 2 开始
                //表达式2：到 100 结束
                //表达式3：更新时 +2
                for(var i=2;i<=100;i+=2){
                    console.log(i);
                }
            }
            /*累加 1-100 之间所有奇数的和*/
            function fun3(){
                //循环为：声明累加和的变量
                var sum = 0;
                //表达式1：从1开始
                //表达式2：到 100 结束
                //表达式3：更新变量 i+=2
                for(var i=1;i<=100;i+=2){
                    sum += i;
                }
                console.log(sum);
            }

            /*猴子吃桃问题*/
            function fun4(){
                var left = 1;//第10天的剩余
                var total; // 前一天桃子总数
                for(var day=10;day>1;day--){
                    total = (left + 1) * 2;
                    left = total;
                }
                console.log(total);
            }

            function fun5(){
                var line = prompt("请输入要打印的行数:");
                var str = "";//用于 追加 每次计算出的 乘法口诀的数据
                //条件：从 1 开始， 到line结束
                for(var i=1;i<=line;i++){
                    //操作：打印 循环变量 * line = (变量*line)
                    var s = i+"*"+line+"="+(i*line);
                    str += s + "\t";
                }
                console.log(str);
            }

            function fun6(){
                var sum = 0;
                for(var i=1;i<=1000;i+=2){
                    sum += (1/i);
                }
                console.log(sum);
            }

            // 计算第 n 个月的兔子总量(递归)
            /*
                递归：在函数内，又调用了自己
                递归调用的内层函数，是在外层函数还未结束时就已经开始了，外层函数的调用，就会被阻塞
                缺点：算法复杂度太高，浪费内存
                解决：大部分递归，可以被循环所替代
            */
            /*
                 如果 n==1 或 n == 2 ,直接返回1
                 否则 就返回 上个月 和 上上个月 的量的和
                 返回 f(n-1) + f(n-2)
                */
            function f(n){
                if(n == 1 || n == 2){
                    return 1;
                }
                return f(n-1) + f(n-2);
            }
            /*通过 循环 解决递归的问题*/
            function f1(n){
                if(n == 1 || n == 2){
                    return 1;
                }
                var f1 = 1 , f2 = 1 , fn;
                for(var i=1;i<=n-2;i++){
                    fn = f1 + f2;
                    f1 = f2;
                    f2 = fn;
                }
                return fn;
            }
            /*兔子问题：菲波那切数列*/
            function fun7(){
                var n1 = 1;
                var n2 = 1;
                for(var i=1;i<=10;i++){
                    console.log(n1);
                    console.log(n2);
                    n1=n1 + n2;
                    n2=n1 + n2;
                }
            }

            function testF(){
                var result = f1(100);
                console.log("共有兔子："+result+"只");
            }
        </script>

    3、for 循环表达式的特殊用法
        1、表达式1 允许为空
            可以省略表达式1，但;不能省
            for(;条件;自增){

            }
            ex:
            var i=1;
            for(;i<=10;i++){
                console.log(i);
            }
        2、表达式2 允许为空
            可以省略表达式2，但;不能省
            如果省略表达式2，那么就是 "死循环"
        3、表达式3 允许为空
            死循环
        4、三个表达式都可以省略，但;不能省
            for(;;){
                if(条件)
                    break;
                i++;
            }
        5、表达式1 和 表达式3 的多样化
            表达式1：允许声明多个变量，用,隔开
            表达式3：允许更新多个变量，用,隔开
    4、循环嵌套
        for,while,do...while都可以实现嵌套操作
        ex:
            for(var i=1;i<=9;i++){  //外层循环
                for(var j=1;j<=9;j++){ //内层循环

                }
            }
        练习：
            1、在控制台上打印输出 "*"
            2、在控制台上打印输出 "*****"
            3、在控制台上打印输出 
                *****
                *****
                *****
                *****
                *****
            4、在控制台上打印输出
                *
                **
                ***
                ****
                *****
            5、在控制台上打印输出
                         *  4个空格1个* (5-行数)
                        **  3个空格2个*
                       ***  2个空格3个*
                      ****  1个空格4个*
                     *****  0个空格5个*

<script>
        /*左对齐打印星星*/
            function printStar(){
                for(var j=1;j<=9;j++){//控制的是 行数
                    for(var i=1,str="";i<=j;i++){ //星星数量(列数 )
                        str += "*";
                    }
                    console.log(str);
                }
            }

            /*打印 99 乘法表*/
            function print(){
                for(var i=1;i<=9;i++){
                    var str="";
                    for(var j=1;j<=i;j++){
                        var result = j+"*"+i+"="+(j*i)+"\t";
                        str += result;
                    }
                    console.log(str);
                }
            }
      /*右对齐打印星星*/
            function printStar1(){
                for(var i=1;i<=5;i++){
                    var str="";
                    //输出空格
                    for(var j=1;j<=5-i;j++){
                        str +=" ";
                    }
                    //输出 *
                    for(var k=1;k<=i;k++){
                        str +="*";
                    }
                    console.log(str);
                }
            }
        </script>