二十八、JavaScript——if-else语句

• if-else语句

            - 语法：

                if(条件表达式) {

                    语句

                }else{

                    语句。。。

                }

            - 执行流程

                if-else执行时，先对条件表达式进行判断

                    如果结果为true,则执行if后得而语句

                    如果结果为false，则执行else后的语句

•  if-else if-else语句：

              - 语法：

                  if(条件表达式){

                      语句。。

                  }else if(条件表达式){

                      语句。。

                  }else if(条件表达式){

                      语句。。

                  }else if(条件表达式){

                      语句。。

                  }else{

                      语句。。

                  }

• if-else语句

            - 语法：

                if(条件表达式) {

                    语句

                }else{

                    语句。。。

                }

            - 执行流程

                if-else执行时，先对条件表达式进行判断

                    如果结果为true,则执行if后得而语句

                    如果结果为false，则执行else后的语句

 

    <script>
        /*
            if-else语句
            - 语法：
                if(条件表达式) {
                    语句
                }else{
                    语句。。。
                }

            - 执行流程
                if-else执行时，先对条件表达式进行判断
                    如果结果为true,则执行if后得而语句
                    如果结果为false，则执行else后的语句

        */

        let age = 70

        if (age >= 60) {
            alert("退休")
        }else{
            alert("继续工作")
        }

        
    </script>

•   if-else if-else语句：

              - 语法：

                  if(条件表达式){

                      语句。。

                  }else if(条件表达式){

                      语句。。

                  }else if(条件表达式){

                      语句。。

                  }else if(条件表达式){

                      语句。。

                  }else{

                      语句。。

                  }

              - 执行流程：

                  if-else if-else语句，会自上而下一次执行对if后的条件表达式的判断

                      如果如果表达式结果为true,则执行当前if后的语句，执行完毕语句结束

                      如果条件表达式结果为false,则继续向下判断，直到找到true为止

                      如果所有的跳进表达式都是false，则执行else后的语句

• if-else if-else语句中只有一个代码块被执行，只要有一个代码块符合条件被执行，

                  下面的语句就不再被执行了

  <script>
        /*
            if-else语句
            - 语法：
                if(条件表达式) {
                    语句
                }else{
                    语句。。。
                }

            - 执行流程
                if-else执行时，先对条件表达式进行判断
                    如果结果为true,则执行if后得而语句
                    如果结果为false，则执行else后的语句

            
            if-else if-else语句：
            - 语法：
                if(条件表达式){
                    语句。。
                }else if(条件表达式){
                    语句。。
                }else if(条件表达式){
                    语句。。
                }else if(条件表达式){
                    语句。。
                }else{
                    语句。。
                }

            - 执行流程：
                if-else if-else语句，会自上而下一次执行对if后的条件表达式的判断
                    如果如果表达式结果为true,则执行当前if后的语句，执行完毕语句结束
                    如果条件表达式结果为false,则继续向下判断，直到找到true为止
                    如果所有的跳进表达式都是false，则执行else后的语句
            - if-else if-else语句中只有一个代码块被执行，只要有一个代码块符合条件被执行，
                下面的语句就不再被执行了


        */

        let age = 70

        // if (age >= 60) {
        //     alert("退休")
        // }else{
        //     alert("继续工作")
        // }

        if(age >= 100) {
            alert("长寿")
        }else if(age >= 60){
            alert("比上面年轻")
        }else if(age >= 50){
            alert("比上面年轻")
        }else if(age >= 40){
            alert("比上面年轻")
        }else if(age >= 30){
            alert("比上面年轻")
        }else{
            alert("未成年")
        }


    </script>

三十二、JavaScript——switch语句

例子：根据用户输入的数字显示中文

• 使用if-else解决

 <script>
        //根据用户输入的数字显示中文
        //+prompt带上正号使得括号内为数值

        let num = +prompt("请输入一个数字");


        /*
            1. 一
            2. 二
            3. 三

        */

       if( num === 1){
        alert("一")
       }else if(num === 2){
        alert("二")
       }else if(num === 3){
        alert("三")
       }

    </script>

 一、switch-case语句

•    switch语句

                - 语法：

                    switch（表达式）{

                        case 表达式；

                            代码。。。

                            break

                        case 表达式；

                            代码。。。

                            break

                        case 表达式；

                            代码。。。

                            break

                        case 表达式；

                            代码。。。

                            break

                        default:

                            代码。。。

                    }

                - 执行的流程

                    switch语句再执行时，会一次得到switch后的表达式和case后的表达式进行全等比较

                        如果比较结果为true,则自当前case处开始执行代码

                        如果比较结果为false,则继续比较其他case后的表达式，直到找到true为止

 

                - 注意：

                    当比较结果为true时，会从当前case执行代码

                        也就是说case是代码执行的起始位置

                        也就是当前代码后的代码都会执行

                        可以使用break来打断之后多余的代码执行

                        default:语句是没有任何辐条条件的case语句之后执行的

 

                - 总结：

                    switch 语句和if语句的功能是重复，switch能做的事if也能做，反之亦然

                        他们最大的不同在于，switch再多个全等判断时，结构较为清晰

  <script>
        //根据用户输入的数字显示中文
        //+prompt带上正号使得括号内为数值

        let num = +prompt("请输入一个数字");


        /*
            1. 一
            2. 二
            3. 三

        */

        /*
            switch语句
                - 语法：
                    switch（表达式）{
                        case 表达式；
                            代码。。。
                            break

                        case 表达式；
                            代码。。。
                            break

                        case 表达式；
                            代码。。。
                            break

                        case 表达式；
                            代码。。。
                            break

                        default:
                            代码。。。

                    }
                - 执行的流程
                    switch语句再执行时，会一次得到switch后的表达式和case后的表达式进行全等比较
                        如果比较结果为true,则自当前case处开始执行代码
                        如果比较结果为false,则继续比较其他case后的表达式，直到找到true为止


                - 注意：
                    当比较结果为true时，会从当前case执行代码
                        也就是说case是代码执行的起始位置
                        也就是当前代码后的代码都会执行
                        可以使用break来打断之后多余的代码执行
                        default:语句是没有任何辐条条件的case语句之后执行的


                - 总结：
                    switch 语句和if语句的功能是重复，switch能做的事if也能做，反之亦然
                        他们最大的不同在于，switch再多个全等判断时，结构较为清晰
        */

    
        switch(num){

            case 1:
                alert("一")

                break   //添加break打断后面的代码再继续执行

            case 2:
                alert("二")

                break   //添加break打断后面的代码再继续执行

            case 3:
                alert("三")

                break   //添加break打断后面的代码再继续执行

            default:
                alert("没有任何符合条件则输出default中的内容")

        }



        

    //    if( num === 1){
    //     alert("一")
    //    }else if(num === 2){
    //     alert("二")
    //    }else if(num === 3){
    //     alert("三")
    //    }

    </script>

三十三、JavaScript——while语句

一、循环语句定义

• 循环语句

                  - 通过循环语句可以使指定的代码反复执行

                  - JS中以共由三种循环语句

                      while语句

                      do-while语句

                      for语句

• 循环语句的三要素：

1. 初始化表达式（初始化变量）

2. 条件表达式 （设置循环运行的条件）

3. 更新表达式

 二、while循环

• while语句

                    - 语法：

                        while(条件表达式){

                            语句。。。

                        }

                    - 执行流程：

                        while语句在执行时，会先对条件表达式进行判断

                            如果结果为true,则执行循环体，执行完毕，继续判断

                            如果为true，则再次执行，执行完毕，继续判断，如此重复

                            如果条件表达式结果为false,循环结束

   <script>
        /*
            循环语句
                - 通过循环语句可以使指定的代码反复执行
                - JS中以共由三种循环语句
                    while语句
                    do-while语句
                    for语句


                - while语句
                    - 语法：
                        while(条件表达式){
                            语句。。。
                        }

                    - 执行流程：
                        while语句在执行时，会先对条件表达式进行判断
                            如果结果为true,则执行循环体，执行完毕，继续判断
                            如果为true，则再次执行，执行完毕，继续判断，如此重复
                            如果条件表达式结果为false,循环结束


        */

        /*
                通常编写一个循环，需要有三个条件
                        1. 初始化表达式（初始化变量）
                        2. 条件表达式 （设置循环运行的条件）
                        3. 更新表达式
        */

        let a = 0 

        while(a < 5){

            //条件表达式
            alert(a)

            //更新表达式
            a++

        }

    </script>

三十五、JavaScript——do-while循环

一、do-while语句

• do-while循环

                - 语法：

                    do{

                        语句。。。

                    }while(条件表达式)

                - 执行顺序：

                    do-while语句在执行时，会先执行do后面的循环体

                        执行完毕后，会对while中的条件表达式进行判断

                        如果为false，则循环终止

                        如果为true,则继续执行循环体，以此类推

•  和while语句的区别：

                    while语句先判断，再执行

                    do-while语句先执行，再判断

• 实质的区别：

                    do-while可以保证循环至少执行一次

 <script>
        /*
            do-while循环
                - 语法：
                    do{
                        语句。。。
                    }while(条件表达式)

                - 执行顺序：
                    do-while语句在执行时，会先执行do后面的循环体
                        执行完毕后，会对while中的条件表达式进行判断
                        如果为false，则循环终止
                        如果为true,则继续执行循环体，以此类推

                和while语句的区别：
                    while语句先判断，再执行
                    do-while语句先执行，再判断

                实质的区别：
                    do-while可以保证循环至少执行一次
        */


        let i = 0


        //while循环

        while(i < 5){
            console.log(i)

            i++
        }


        //改写成do-while循环

        do{
            console.log(i)

            i++
        }while(i < 5)


    </script>

 三十六、JavaScript——for循环

一、for循环

• for循环

                - for循环和while循环没有本质区别，都是用来反复执行代码

                - 不同的点是语法结构，for循环歌更加清晰

                - 语法：

                    for(初始化表达式； 条件表达式； 更新表达式){

                        语句

                    }

               

                - 执行流程

                    1. 执行初始化表达式，初始化变量

                    2. 执行条件表达式，判断是否执行（true执行，false停止）

                    3. 判断结果为true,则执行循环体

                    4. 执行更新表达式，对初始化变量进行修改

                    5. 重复2，知道判断为false为止

                - 初始化表达式，在循环体的整个生命周期中止执行一次

                - for循环中的三个表达式都可以省略

                - 使用let在for循环的（）中声明的变量是局部变量，只能在for循环内部使用

                    使用var在for循环的（）中声明的变量可以在for循环的外部使用

               

                - 创建死循环的方式

                    while(1) { }

                    for(;;) {}

    <script>
        /*
            for循环
                - for循环和while循环没有本质区别，都是用来反复执行代码
                - 不同的点是语法结构，for循环歌更加清晰
                - 语法：
                    for(初始化表达式； 条件表达式； 更新表达式){
                        语句
                    }
                
                - 执行流程
                    1. 执行初始化表达式，初始化变量
                    2. 执行条件表达式，判断是否执行（true执行，false停止）
                    3. 判断结果为true,则执行循环体
                    4. 执行更新表达式，对初始化变量进行修改
                    5. 重复2，知道判断为false为止

                - 初始化表达式，在循环体的整个生命周期中止执行一次
                - for循环中的三个表达式都可以省略
                - 使用let在for循环的（）中声明的变量是局部变量，只能在for循环内部使用
                    使用var在for循环的（）中声明的变量可以在for循环的外部使用
                

                - 创建死循环的方式
                    while(1) { }
                    for(;;) {}


        */

        // while循环

        let i = 0 

        while(i < 5){

            console.log(i)

            i++
        }

        //对比for循环

        for(let a = 0; a < 5; a++){

            console.log(a)
        }

    </script>

 

四十、JavaScript——循环的嵌套

一、循环的嵌套

定义：在循环中也可以嵌套其他的循环

例题：

        

        希望在网页中打印出如下图形

            *****

            *****

            *****

            *****

            *****

• 利用普通的for循环加换行标签<br>实现打印 

 

• 当循环发送嵌套时，外层循环每执行一次，内层循环就会执行一个完整的周期
• 外层循环控制高，内层循环控制宽

 

 <script>
        /*
            在循环中也可以嵌套其他的循环



        */

        /*希望在网页中打印出如下图形

            *****
            *****
            *****
            *****
            *****
        */

        // 这个for循环，可以用来控制图形的高度
            // for (let i = 0; i < 5; i++) {

            //     document.write("*****<br>")
            // }


            //当循环发送嵌套时，外层循环每执行一次，内层循环就会执行一个完整的周期
            //外层循环控制高，内层循环控制宽

            //这个for循环，可以用来控制图像的高度
            for (let i = 0; i < 6; i++) {

                // 创建一个内层循环来控制图形的宽度
                for(let j=0; j<5; j++){
                    document.write("*&nbsp")
                }

                document.write("<br>")
            }


            document.write("<hr>")

            /*

                    打印以下图形
                    *
                    * *
                    * * *
                    * * * *
                    * * * * *
            */
           //外层循环
           for(let i = 0; i < 6; i++){

            //内层循环
            for(let j = 0; j < i+1; j++){
                document.write("*&nbsp")
            }

            document.write("<br>")

           }
    </script>

 四十三、JavaScript——break和continue

一、break终止内层循环

• break

                    - break用来终止switch和循环语句

                    - break执行后，当前的switch或循环会立刻终止

                    - break会终止离他最近的循环

 

 

 <script>

        /*
            break和continue
                - break
                    - break用来终止switch和循环语句
                    - break执行后，当前的switch或循环会立刻终止
                    - break会终止离他最近的循环
        */

        //外层循环
        for (let i = 0; i < 5; i++){

            //内层循环
            for(let j = 0; j < 5;j++){


                if (j === 2){
                break
            }

            console.log("内层循环--->" , j)
            }

        }

    </script>

二、continue跳过循环

• continue

                    - continue 用于跳过当前循环

                    - continue 只影响一次

                    - continue 跳过离最近的循环

 <script>

        /*
            break和continue
                - break
                    - break用来终止switch和循环语句
                    - break执行后，当前的switch或循环会立刻终止
                    - break会终止离他最近的循环

                - continue
                    - continue 用于跳过当前循环
                    - continue 只影响一次
                    - continue 跳过离最近的循环
                    
        */

        // //外层循环
        // for (let i = 0; i < 5; i++){

        //     //内层循环
        //     for(let j = 0; j < 5;j++){


        //         if (j === 2){
        //         break
        //     }

        //     console.log("内层循环--->" , j)
        //     }

        // }



            //
            for(let j = 0; j < 5;j++){


                if (j === 2){
                //continue跳过当前循环
                continue
            }

            console.log("内层循环--->" , j)
            }


    </script>