【68】JS(4)——表达式和语句②流程控制语句(1)条件分支语句

★文章内容学习来源：拉勾教育大前端就业集训营

---

本篇学习目标：
1.掌握各个条件分支语句的用法；
2.理解常见案例实现思路。

---

---

一、if 语句

1. 介绍

• if 语句是最常用的条件分支语句；
• 作用：通过某个指定的判断条件，决定走哪个分支的代码。

---

2. 语法

<script>
      if (condition expression) {
      
          statement1;
      } else {
      
          statement2;
      }
script>

• condition expression：条件表达式，可以是任意的代码或者表达式，参与程序过程都会强制得到一个布尔值执行结果。（表达式，js 中遇到任何表达式都会先计算出一个结果然后才能继续参与程序。）

• statement：结构体，js 中可以用 {} 包括一行到多行语句，这些语句整体组成了一个结构体，结构体中的语句要执行就都执行，要不执行就都不执行。

• if关键字：如果；

• else关键字：否则；

• 总结：如果条件表达式为真 true，执行 statement1，否则执行statement2。

---

3. 注意事项

(1)实现选择功能

• if 语句可以实现选择的功能，两个分支可以选择一个执行，不会都执行。

(2)殊途同归

• if 语句能够控制自己内部的流程，但是不论走哪个分支，结束后都要继续执行 if 语句后面的其他语句，叫做殊途同归现象。

<script>
         //if语句殊途同归现象，举例
           var a ;
           var s = prompt("请输入一个整数","100");
           if (s >= 60) {
      
               a = s;
           } else {
      
               a = 60;
           }
           alert("等级为"+a); //最后都会继续执行这个语句，殊途同归
script>

(3)不建议省略大括号

• if 语句后面的结构体如果是单行语句组成，可以省略 {} 不写。但是不建议省略大括号，容易出现程序错误。

<script>
           var a ;
           var s = prompt("请输入一个整数","100");
           if (s >= 60) a = s;else a = 60;
           alert("等级为"+a);
script>

(4)可以不写 else 分

• if 语句可以不写 else 分支，表示条件成立就执行后面的结构体，如果条件不成立，直接跳出 if 语句不执行。

<script>
           var a ;
           var s = prompt("请输入一个整数","100");
           if (s >= 60) {
      
              a = s;
              alert("等级为"+a);
           }
 script>

---

4. 案例

用if语句，让用户输入考试成绩，反馈其是否及格。

 <script>
        var testScores = prompt("请输入您的考试成绩","60");
        if (testScores >= 60) {
      
            alert("恭喜您，及格了");
        } else {
      
            alert("很遗憾没有及格，请继续加油！");
        }
 script>

---

---

二、多分支 if 语句

1. 介绍

• 包含多个判断条件，对应多个分支；
• 语法：if……else if……else if……else……
• 如果……否则如果……否则如果…… 否则……

---

2. 语法

<script>
   if (条件1) {
      
        满足条件1，执行的结构体
    } else if (条件2) {
      
        不满足条件1，满足条件2，执行的结构体
    } else if (条件3) {
      
        不满足条件1/2，满足条件3，执行的结构体
    } else {
      
        不满足前面所有条件，执行的结构体
    }
script>

---

3. 注意事项

(1) else 分支只能有一个，必须出现在最后，可以省略

• 多分支 if 语句中可以有多个 else if 的分支，但是 else 分支只能有一个，必须出现在最后，作为备用的选项，而且 else 也可以省略不写，表示前面条件如果都不满足，直接跳出不走任何分支。

(2) “跳楼现象”

• 多分支 if 语句有“跳楼现象”：条件从上往下依次验证，如果满足了某个条件，会立即执行后面的结构体，执行完之后，不会再往后验证其他的条件了，而是从这一层直接跳楼跳出if语句。

---

4. 案例

利用多分支 if 语句细分班级成绩区间。
优秀：85-100；
良好：75-84；
及格：60-74；
不及格：60以下。

<script>
         //多分支if语句案例
         //(不用设置比如(s >= 75 && s < 85) 这样的条件)
         //因为如果语句会往下走，表示上面的不符合，所以可以相对比较简化写成如下形式：
         var s = prompt("请输入您的成绩","100");
         if (s >= 85) {
      
             alert("您的成绩区间为优秀");
         } else if (s >= 75) {
      
            alert("您的成绩区间为良好");
         }else if (s >= 60) {
      
            alert("您的成绩区间为及格");
         } else {
      
            alert("您的成绩区间为不及格");
         }
script>

---

---

三、if 语句嵌套

1.介绍

• if 语句的结构体部分，代码可以是任意的代码，甚至是另外一组 if 语句。
• 也就是 if 语句内部嵌套了 if 语句。
• 如果想执行内部 if 语句的某个分支，必须满足外部 if 语句的条件，同时还要满足内部 if 语句的某个条件。
• 优点：可以简化多分支 if 语句。

---

2.案例

利用 if 语句嵌套判断一个人是否退休。
男性：60 岁退休；
女性：55 岁退休。

<script>
    //if 语句嵌套，判断一个人是否退休。男性：60 岁退休；女性：55 岁退休。
          var age = parseInt(prompt("请输入您的年龄","55"));
          var sex = prompt("请输入您的性别","女");
          if (sex === "女") {
      
              if (age >= 55) {
      
                  alert("恭喜您可以享受退休生活啦！");
              } else {
      
                  alert("还要继续奋斗"+ (55 - age)+ "年，加油！");
              }
          } else  {
      
              if (age >= 60) {
      
                alert("恭喜您可以享受退休生活啦！");
              }else {
      
                alert("还要继续奋斗"+ (60 - age)+ "年，加油！");
              }
          }
script>

---

---

四、三元表达式

1.介绍

• 又叫三元运算符，必须有三个操作数参与的运算。
• 操作符号：? :
• 表达式：在参与JS程序时，都必须先计算出表达式结果，才能参与后续程序。
• 由于三元表达式具备了一些选择的效果，所以也是一种条件分支语句。
• 作用：根据布尔表达式的结果，如果为真，三元表达式结果就是真值；如果为假，三元表达式结果就是假值。

---

2.语法

<script>
   boolean_expression ? true_value : false_value;
script>

(1)布尔表达式

• boolean_expression:布尔表达式，表达式在参与三元运算中必须求得一个布尔类型的值，要么是 true，要么是 false，结果作为判断依据，判断到底去：前面的值还是后面的值。

(2)true_value

• true_value：布尔表达式的值为真时，三元表达式的结果。

(3) false_value

• false_value：布尔表达式的值为假时，三元表达式的结果。

---

3.优点

• 虽然if语句可以模拟三元表达式，但是三元表达式有自己的优点：

（1）结构更加简单

• 二选一的情况下，三元表达式结构更加简单。

<script>
        //三元表达式 
        console.log(true ? 1 : 0);  //1
        console.log(false ? 1 : 0); //0
script>

（2）可以赋值给一个变量

• 三元表达式作为一个表达式参与程序时必须运算出结果才能参与，可以利用这个特点，将二选一结果赋值给一个变量。遇到给一个变量根据条件二选一赋值的情况，可以使用三元表达式。

---

4.案例

用三元表达式，让用户输入一个整数，反馈给用户判断此整数大于等于3还是小于3。

<script>
  //三元表达优点：可以赋值给变量
  var a = 3;
  var b = parseInt(prompt("请输入一个整数","4")) >= a ? "大于等于3" : "小于3";
  alert(b);
script>

---

---

五、switch 语句

1.介绍

• 开关语句允许一个程序求一个表达式的值，并且尝试去匹配表达式的值到一个 case 标签。
• 如果匹配成功，这个程序执行相关的语句。

---

2.语法

<script>
    switch (表达式) {
      
	case 值1:
		结构体1;
		break;
	case 值2:
		结构体2;
		break;
	……
	default: 
		结构体n；
		break;
     }
 script>

• switch：关键字表示开始进入一个开关语句。
• 表达式：会求出一个具体的值，将这个值去与 {} 内部的 case 后面的值进行对比、匹配;
• 如果值相等表示匹配成功。匹配相等时，方式是进行全等于匹配，不止值要相等，数据类型也要相等。
• case：示例的意思，作为关键字后面必须跟一个空格，书写匹配的值。
• case 后面的结构体：每个 case 匹配成功之后要执行的语句。
• break：用于打断结构体，直接跳出程序，模拟跳楼现象。
• default：相当于if语句中的 else，否则的情况，如果前面的 case 都不匹配，执行 default 后面的语句。

---

3.运行机制

(1)表达式→结果

• switch 语句首先会将小括号内的表达式计算出一个结果；

(2)匹配

• 用结果去匹配结构体内部的 case；

(3)执行

• 从上往下进行匹配，如果匹配成功，会立即执行这个 case 后面的语句，直到遇到一个 break 跳出整个 switch 语句；
• 如果前面的 case 没有匹配成功，会跳过 case 之间的语句，去匹配下一个 case，直到匹配成功；
• 如果都不成功就执行 default 后面的语句。

---

4.案例1

输出星座性格。

<script>
       //switch语句
       //案例1:输出星座运势
       var star = prompt("请输入您的星座，为您分析性格","白羊座");
       switch (star) {
      
       case "白羊座":
           alert("优点：朝气蓬勃、热情坦率、热爱自由、慷慨真诚、勇敢直率。缺点：自我中心太强、缺乏耐心、好斗、三分钟热度、粗枝大叶、有时过于感性、记性差");
           break;
        case "金牛座":
            alert("优点：踏实靠谱、善于财务的管理、艺术细胞强、思维缜密、脚踏实地。缺点：固执、不懂变通、缺乏自信、容易敏感、容易被人误解、反应过慢。");
            break;
        case "双子座":
            alert("优点：搞怪机灵、反应灵敏、充满好奇心、风趣幽默、口才良好、积极主动、豁达开朗。缺点：低迷、耐力差、孩子气、缺乏安全感、容易敏感、敷衍了事、缺乏耐性。");
        break;
        case "巨蟹座":
            alert("优点：谨慎、创造力强、有坚强的意志力、组织能力强、富有同情心、善解人意。缺点：心软、苛刻、占有欲强、天性多疑且情绪化致难以取悦。");
        break;
        case "狮子座":
             alert("优点：思想开阔、热心、慷慨、有领导能力、不多疑、、乐观、思考、保护他人、为人慷慨、具幽默感。缺点：自以为是、刚愎自用、势利、能伸不能屈、喜欢接受奉承、喜欢要求别人、缺乏节俭的精神、死要面子活受罪。");
        break;
        case "处女座":
             alert("处女座追求完美，吹毛求疵是他们的特性。多数的处女座都很谦虚，但也因此给自己造成很大的压力。处女座的人不喜欢闲着，对别人常常乐于服务。缺乏自信的处女座有时候组织能力较差，需要家人与朋友们的鼓励去推动他们。。");
        break;
        case "天秤座":
             alert("优点： 责任心强、温婉善良、有求知欲、善解人意、因事制宜、适应力强、大度、与世无争、审美能力 、能屈能伸。缺点：优柔寡断、容易受人影响、比较懒惰、纠结。");
        break;
        case "天蝎座":
             alert("优点：现实至上、善于保守秘密、任劳任怨、不畏挫折、悟力快、洞悉能力强、专一、爱恨分明、舍己为人。缺点：个性倔强、蛮横、愚昧、远离人群的关怀和热情、外表坚强、内心脆弱、表里不一、孤僻自怜。");
        break;
        case "射手座":
             alert("优点：幽默感、心胸开阔，诚恳宽厚、行动力强、行事认真、讲义气，有正义感。缺点：心直口快、固执独断、偏激、过度理想化、反复无常、喜怒太形于色。");
        break;
        case "摩羯座":
             alert("优点：心地祥和仁慈、行动敏锐、爱好和平、爱恨分明、心觉敏锐、做事沉着、思想优越。缺点：过于压抑、不善表达、自我、容易陷入困境、孤独感太重、思想躁动。");
        break;
        case "水瓶座":
             alert("优点：乐于发掘真相、博学多思、理性的智慧、独立，有个人风格、创意十足。缺点：不按常理出牌、喜欢多管闲事、过于理想化、太相信自己的判断、思想多变，缺乏恒心、缺乏热情、我行我素。");
        break;  
        case "双鱼座":
             alert("优点：不自私、善解人意、具有想象力、浪漫、感情丰富、温和有礼、直觉力强、天真、富有同情心。缺点：粗心、浮躁、散漫、不切实际，幻想太多、缺乏理性，感情用事。");
        break;  
        default :
             alert("没有找到您的星座，请检查是否输入有误哦！");
         break;
       }
script>

---

5. 注意事项

(1) default 可以不写

• default 可以不写，相当于 if 语句没有 else。

(2) break灵活处理

• break 关键字：根据结构需要有时必须在每个 case 后面都要写，为了模拟跳楼现象，如果不写break，对应的 case 后面的语句执行之后，不会跳出结构体，会继续想下执行其他 case 的后面的语句，直到遇到一个 break。
• 可以利用 break 不写的情况制作一些特殊的案例（如下案例2）。

---

6.案例2

用户输入一个月份的数字，请返回给用户对应月份的天数。

<script>
     //案例2：输入月份数字，输出对应月份天数
       var m = prompt("请输入月份数字","1");
       switch (m) {
      
           case "1" :
           case "3" :
           case "5" :
           case "7" :
           case "8" :
           case "10" :
           case "12" :
               alert("2021年" + m + "月有31天");
            break;
           case "2" :
               alert("2021年" + m + "月有28天");
           break;
           default :
               alert("2021年" + m + "月有30天");
           break;
       }
script>

---

---

六、总结

• 总结：实际工作中使用三种语句的情景。
• if 语句：最常用的语句，所有的判断情况都能够书写。
• 三元表达式：多用于给变量赋值根据条件二选一的情况。
• switch 语句：多用于给一个表达式去匹配多种固定值可能性的情况。

---

下篇继续：【69】JS(4)——表达式和语句②流程控制语句(2)循环语句