day04-javascript流程控制（if...else...，switch....）

目标:

• if...else...

• switch

流程控制的概念

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。

简单理解：流程控制就是来控制代码按照一定结构顺序来执行

流程控制主要有三种结构：顺序结构、分支结构、循环结构

 

为什么要有分支结构？

• 现实世界中，我们在做某些事情的时候是有前提条件的，例如：我明天去买一辆法拉利，前提是我今晚要中五百万

  • 也就是说：如果我今晚中了五百万，明天就去买法拉利，没中的话就不买

 

一、 If...Else 语句

条件语句用于基于不同条件执行不同的动作。

写代码时，经常会需要基于不同判断执行不同的动作。我们可以在代码中使用条件语句来实现这一点。

在 JavaScript 中，我们可使用如下条件语句：

• 使用 if 来规定要执行的代码块，如果指定条件为 true,才会执行{}中的代码

• 使用 else if 来规定要测试的新条件，如果第一个条件为 false

• 使用 else 来规定要执行的代码块，如果相同的条件为 false

1.1、if 语句

请使用 if 语句来规定假如条件为 true 时被执行的 JavaScript 代码块。

• 1.if结构语法：if(条件 true/false){ 条件成立时需要执行的代码 }

• 2.if结构补充说明：

  • 1.大括号中可以是任何代码，不限数量

  • 2.如果大括号中代码有且只有一行，则可以省略大括号。这种写法代码不规范，不是老司机的作风

• 3.注意点:小括号中的条件可以是哪些呢

  • (1)关系表达式：结果一定是布尔类型

  • (2)布尔类型的值：true和false

  • (3)其他表达式和值：都会先转换成布尔类型再判断真和假

if (条件) {
    //如果条件为 true 时执行的代码
} 

//1.默认情况下，代码是从上往下执行的（顺序结构）
    console.log ( "我今天考试了" );
    console.log ( "我回家了" );
    console.log ( "爸爸打了我一顿" );
    console.log ( "我睡觉了" );
​
    //需求：考试不及格爸爸才打我，及格了就不打

注意：if 使用小写字母。大学字母（IF 或 If）会产生 JavaScript 错误。

1.2、else 语句

使用 else 语句来规定假如条件为 false 时的代码块。

• 1.if-else结构语法:用于两种互斥的条件判断

  • 例如：如果(if)我的钱超过100块就点外卖(也就是说钱>=100)，否则(else)不点（也就是说钱<100）

• 2.if-else结构注意点

  if大括号中的代码与else大括号的代码一定会执行一个，不会同时执行

  if可以单独存在,else不能单独存在,必须和if同时存在

  if-else语句的作用主要就是为了提高代码的运行效率,虽然可以用两个if语句来代替if-else语句，但是两个if语句需要判断两次，而if-else只需要判断一次

if (条件) {
   // 条件为 true 时执行的代码块
} else { 
   // 条件为 false 时执行的代码块
}
 //需求：(1)如果不及格，爸爸就打我 (2)如果及格，爸爸给我买奥迪
//1.用if实现
//2.if-else结构：用于两个互斥的条件
    //优点：只需要一次判断
    /*语法

---

1.3、else if 语句

1.请使用 else if 来规定当首个条件为 false 时的新条件。

2.注意点：

• (1) 必须以if开头，中间的else if可以是多个，末尾的else可以省略（一般都不会省略）

• (2) 语句中所有的大括号中的代码只会执行其中一个，不会执行多个

if (条件 1) {
    //条件 1 为 true 时执行的代码块
} else if (条件 2) {
    //条件 1 为 false 而条件 2 为 true 时执行的代码块
 } else {
    //条件 1 和条件 2 同时为 false 时执行的代码块
}
​
 //需求：(1)如果不及格，爸爸就打我 (2)如果60-70，爸爸给我买奥迪 （3）如果70-80分，爸爸给我买保时捷
      //(4)如果超过80分，爸爸给我买法拉利

1.4、三元表达式

三元运算符语法

• 三元表达式：

  //表达式?代码1：代码2

  • 1.如果表达式成立则执行代码1，否则执行代码2

  • 2.如果代码1或者代码2有运算结果则三元运算式的结果就是他们其中的一个

• 三元运算符做的事和if-else类似，只是代码更简洁

//if-else语句
 if(num1 > 0){
        console.log ( "哈哈" );
     }else{
         console.log ( "呵呵" );
     }
//怎么改成三元不等式？
 if(num2 > 0){
         res2 = num2 + 1;
     }else{
         res2 = num2 - 1;
     }

 

二、Switch 语句

用于基于不同条件执行不同动作。

使用 switch 语句来选择多个需被执行的代码块之一。

2.1、语法：

switch(表达式){
    case 值1:
        //表达式的结果 === 值1，需要执行的代码
        break;
    case 值2:
        //表达式的结果 === 值2，需要执行的代码
        break;
    case 值3：
        //表达式的结果 === 值3，需要执行的代码
        break;
    .......
    default:
        表达式的结果和上面所有的case后面的值都不全等，则会执行这里的代码
        break;
} 

• 计算一次 switch 表达式

• 把表达式的值与每个 case 的值进行对比

• 如果存在匹配，则执行关联代码

注意事项

• 1.表达式的结果要和值一定是全等的关系=== (switch case使用的是严格比较)

• 2.break作用：结束该switch语句，所以一般情况下要加上，如果不加上则会发生穿透

  • 穿透：从上一个case代码快执行到下一个case代码快

  • break关键字的作用就是防止穿透

• 3.default语句可以写在任何地方，也可以省略，但是一般写在最后，这是一种代码规范

2.2、break 关键词

• 如果 JavaScript 遇到 break 关键词，它会跳出 switch 代码块。此举将停止代码块中更多代码的执行以及 case 测试。如果找到匹配，并完成任务，则随机中断执行（break）。无需更多测试。

• break 能够节省大量执行时间，因为它会“忽略” switch 代码块中的其他代码的执行。

• 不必中断 switch 代码块中的最后一个 case。代码块在此处会自然结束。

 

//示例：用户输入学科编号，告诉用户学习什么学科  1-前端  2-PHP  3-java  4-UI
  var subject= +prompt("请输入您要报名的学科编号，1-前端  2-PHP  3-java  4-UI");
switch (subject){
    case  1:
        alert("恭喜你选择了2020年最有钱途的学科！");
        break;
    case  2:
        alert("选择了PHP，臭流氓!");
        break;
    case  3:
        alert("选择了Java，请问植发多少钱一根？");
        break;
    case  4:
        alert("未来的UI视觉交互设计师");
        break;
    default :
        alert("脑子有包");
        break;
}

2.3、default 关键词

default 关键词规定不存在 case 匹配时所运行的代码：

switch (new Date().getDay()) {
    case 6:
        text = "今天是周六";
        break; 
    case 0:
        text = "今天是周日";
        break; 
    default: 
        text = "期待周末~";
} 

其他情况:不同的 case 来使用相同的代码。

switch (new Date().getDay()) {
    case 4:
    case 5:
        text = "周末快到了：）";
        break; 
    case 0:
    case 6:
        text = "今天是周末~";
         break;
    default: 
        text = "期待周末！";
} 

 

​
    /**合理穿透：当存在多种值需要执行相同代码时使用穿透可以节省代码
     * 用户输入某一个月份，告诉用户这个月份属于什么季节
     * 12，1，2 冬季
     * 3，4，5 春季
     * 6，7，8 夏季
     * 9，10，11 秋季
     */
    var month = prompt("请输入月份");
    switch (month){
        case 12:
        case 1:
        case 2:
            alert("冬季");
            break;
        case 3:
        case 4:
        case 5:
            alert("春季");
            break;
        case 6:
        case 7:
        case 8:
            alert("夏季");
            break;
        case 9:
        case 10:
        case 11:
            alert("秋季");
            break;
        default:
            alert("请输入阳间的月份？");
            break;
    }
​

 

三种分支结构语法总结

• 原则上，三种分支结构语句之间可以互转，只不过每一种分支结构语句适用场景不一样

• if分支结构：适合条件范围判断

  • 最常用：if-else 两种互斥条件判断

• switch-case 适合做固定值匹配

• switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多少次。

• 当分支比较少时，if… else语句的执行效率比 switch语句高。

• 当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

• 三元表达式： 比if-else代码更简洁，但是代码量较多时易读性变差

 

 

 

三、for循环

循环可多次执行代码块。

• for - 多次遍历代码块

• for/in - 遍历对象属性

• while - 当指定条件为 true 时循环一段代码块

• do/while - 当指定条件为 true 时循环一段代码块

3.1、for 循环

 

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

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

for 循环是在创建循环时经常使用的工具。

for (语句 1; 语句 2; 语句 3) {
     //要执行的代码块
}

       /*执行步骤
            1.执行代码1（声明循环变量）
            2.判断代码2 （循环条件）
                2.1 成立，执行循环体代码。
                    执行完毕之后会执行代码3（循环变量自增），重复步骤2
                2.2 不成立，结束循环，执行大括号后面的代码
         */

• 语句 1 在循环（代码块）开始之前执行。

• 语句 2 定义运行循环（代码块）的条件。

• 语句 3 会在循环（代码块）每次被执行后执行。

var text = "";
var i;
for (i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;

• 语句 1 在循环开始之前设置了一个变量（var i = 0）。

• 语句 2 定义运行循环的条件（i 必须小于 5）。

• 语句 3 会在代码块每次执行之后对值进行递增（i++）。

for循环好处及注意点

• 好处：循环变量的声明与循环变量自增在一个小括号中，可以更好的避免死循环

• 注意点：原则上语句1，语句2，语句3可以是任意代码，但是不建议乱写，因为会导致死循环

• 一定要加上循环迭代

• 语句1：通常是定义循环变量

• 语句2：条件表达式

• 语句3：通常都是循环变量自增/自减（视需求而定）

//求最大值与最小值
        //请用户输入5个数, 将最大的那个数打印出来

        /* 
        擂台思想 ： 三步法
    
        1.声明空擂主 : （第一次挑战者无条件坐擂主）
        2.遍历挑战者
        3.依次和擂主PK
         */

        //1.声明空擂主
        var max = -Infinity; //第一个挑战者一定要比默认擂主大，保证无条件坐擂主 Infinity 属性用于存放表示正无穷大的数值。
        //2.遍历挑战者
         for(var i = 1;i<=5;i++){
             var num = prompt('请输入第' + i + '个挑战者');
             //3.依次和擂主PK
             if(num > max){
                 max = num;
             };
         };

        // console.log(max);

 

3.2、for/in 循环

JavaScript for/in 语句遍历数组和对象的属性：

var txt = "";
var person = {name:"张三", age:"26"}; 
for (var x in person) {
  txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;

四、while循环

只要条件为 true，循环能够一直执行代码块。

4.1、While 循环

while 循环会一直循环代码块，只要指定的条件为 true。

while (条件 true/false) {
    //要执行的代码块
    i++
}

//* 执行步骤：
 // * 1.判断条件是否成立
   // * 1.1 如果成立，执行循环体代码，然后重复步骤1
   // * 1.2 如果不成立，结束循环，执行大括号后面的代码
//* 3.注意点
 // * （1）小括号中的语句，无论结果是什么都会转换成布尔类型来判断是否成立
 // * （2）避免写一个死循环
var text = "";
var i = 0;
while (i < 10) {
  text += "<br>数字是 " + i;
  i++;
}
document.getElementById("demo").innerHTML = text;

如果忘了对条件中使用的变量进行递增，那么循环永不会结束。这会导致浏览器崩溃。

4.2、Do/While 循环

do/while 循环是 while 循环的变体。在检查条件是否为真之前，这种循环会执行一次代码块，然后只要条件为真就会重复循环

do {
    //要执行的代码块
}
while (条件);

//* 2.执行过程
  //* 1.先执行循环体代码
  //* 2.执行条件语句
    //* 如果结果为true，执行循环体代码
    //* 如果为false，循环结束
  //* 3.重复步骤2
//* 3.do-while和while实现的循环其实是一样的，只有一个不同点：do-while循环不管怎样先执行一次循环体代码，然后再判断条件
  //* while循环：先奏后斩（先判断条件再执行循环体）
  //* do-while循环：先斩后奏（不管怎样先执行一次循环体代码，然后再判断条件）

 

//让用户输入账号和密码，如果输入正确就登陆成功，如果输入错误就让他一直输入

    //while循环实现
     var username = prompt('请输入账号');
     var password = prompt('请输入密码');
    
     while(username != 'admin' || password != '123456'){
         username = prompt('请输入账号');
         password = prompt('请输入密码');
     }

    //do-while实现
    do{
        var username = prompt('请输入账号');
        var password = prompt('请输入密码');
    }while(username != 'admin' || password != '123456')

 

三、比较 For 与 While

for:

var cars = ["BMW", "Volvo", "porsche", "Ford"];
for (var i = 0;i<cars.length;i++) {
  text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;

while:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var text = "";
while (cars[i]) {
    text += cars[i] + "<br>";
    i++;
} 

• 1.原则上，三种循环结构语句之间可以互转，只不过每一种语句的适用场景不一样

• 2.最常用：for循环：适合循环次数固定

• 3.while循环：适合循环次数不固定

• 4.do-while循环：适合循环次数不固定，但是循环体代码至少要执行一次

四、 Break 和 Continue

• break 语句“跳出”循环。

• continue 语句“跳过”循环中的一个迭代。

for (i = 0; i < 10; i++) {
    if (i === 3) { 
        break; 
    }
    text += "数字是 " + i + "<br>";
}

for (i = 0; i < 10; i++) {
    if (i === 3) { 
        continue; 
    }
    text += "数字是 " + i + "<br>";
}