二、流程控制

目录

一、代码块

二、if语句 

三、if...else   

四、switch语句

五、循环

---

一、代码块

            使用{}来创建代码块，代码块可以用来对代码进行分组。

            let 和 var区别：

                ●在JS中，使用let声明的变量具有块作用域

                               在代码块中声明的变量无法在代码块的外部访问

                ●使用var声明的变量，不具有块作用域

二、if语句 

 语法：                 

 if(条件表达式){
          语句...
                }

  执行流程：

                   ●if语句在执行会先对if后的条件表达式进行求值判断，

                        如果结果为true，则执行if后的语句

                        如果为false则不执行

                    ●if语句只会控制紧随其后其后的那一行代码，如果希望可以控制多行代码，可以使用{}将语句扩起来

                        最佳实践：即使if后只有1行代码，我们也应该编写代码块，这样结构会更加的清晰

                    ●如果if后的添加表达式不是布尔值，会转换为布尔值然后再运算

三、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语句中只会有一个代码块被执行，

                    一旦有执行的代码块，下边的条件都不会在继续判断了

                    所以一定要注意，条件的编写顺序

例子：

    <script>
        var score = parseFloat(prompt("请输入成绩："));
        if (!isNaN(score)) {
            if (score >= 90) {
                alert("奖励100000");
            } else if (score >= 80) {
                alert("奖励10000");
            } else if (score >= 70) {
                alert("奖励1000");
            } else if (score >= 60) {
                alert("奖励100");
            } else {
                alert("惩罚1000");
            }
        } else {
            alert("请正确输入成绩");
        }
    </script>

四、switch语句

分支结构：switch...case...：根据条件的不同，选择一部分代码执行

语法：

switch(变量/表达式){

case 值1:

操作1;

break;

case 值2:

操作2;

break;

default:

默认操作;

}

特殊：1、case的比较不带隐式转换的

           2、问题：默认只要一个case满足后，会将后面所有的操作全部做完

解决：break;

建议：每一个case的操作后都跟上一个break;

有的地方也可以省略break：

        1、最后的一个操作default可以省略break

        2、如果中间多个条件，做的操作是一样的，也可以省略掉中间的操作

        3、default可以省略不写，如果条件都不满足的情况，则什么事都不会执行

面试题：if vs switch

1、switch：好处：执行效率相对较高

缺点：必须要知道最后的结果才能使用，case不能做范围判断

2、if 好处：可以做范围判断

缺点：执行效率相对较低

开发时：用哪个都无所谓

代码优化：尽量的将if换成switch

五、循环

反复执行相同或相似的操作

循环三要素：

（1）循环条件：开始 - 结束，循环的次数

（2）循环体：做的操作是什么

（3）循环变量：记录着我们当前在哪一次，而且他会不断的变化，往往都会向着不满足循环条件进行

for循环：

for(var 循环变量=几;循环条件;变量的变化){

循环体;

}

死循环：   for(;;){

循环体;

}

while循环：

var 循环变量=几;

while(循环条件){

循环体;

循环变量变化;        

特殊：

 1、有的时候真可能不知道从何开始，到何处结束，死循环：永远不会停下来的循环

何时使用：不确定循环次数的时候

while(true){

循环体;

}

2、退出循环语句：break - 只能在循环中使用，多半都是搭配死循环使用的

面试：while 和 for 的区别？

法上有区别，但两者都能做到相同的操作。

一般来说我们不确定循环次数的时候，会使用while循环 - 死循环

一般来说我们确定循环次数的时候，就用for循环 - 更漂亮更简洁，大部分情况都会使用它

do...whie循环：

var 循环变量=几;

do{

循环体;

循环变量的变化;

}while(循环条件)

面试：while和do...while的区别？

除了写法上有区别，还有一个点：只看第一次

如果第一次大家都满足，两者其实没区别

如果第一次大家都不满足。while一次都不会执行，而do...while至少会执行一次

终止语句：

break;——退出整个循环

continue;——退出本次循环，还会继续做下一次

猜数字案例：

 <button onclick="csz()">猜数字游戏</button>
    <script type="text/javascript">
        function csz() {
            var r = parseInt(Math.random() * (100) + 1);
            var hp;
            var user = prompt("请选择难度：1、简单 2、普通 3、困难");
            if (user == 1) {
                hp = 15;
            } else if (user == 2) {
                hp = 10;
            } else if (user == 3) {
                hp = 5;
            } else {
                alert("恭喜你，触发地狱难度")
                hp = 1;
            }
            while (true) {
                if (hp > 0) {
                    var user = parseInt(prompt("请输入一个数字，剩余生命为：" + hp));
                    if (!isNaN(user)) {
                        if (user > r) {
                            alert("大了");
                            hp--;
                        } else if (user < r) {
                            alert("小了");
                            hp--;
                        } else {
                            alert("对了");
                            break;
                        }
                    } else {
                        alert("恶意输入");
                        hp--;
                    }
                } else {
                    alert("菜鸡，你死了，正确答案为：" + r);
                    break;
                }
            }
        }
    </script>