JavaScript基础--选择结构

在一个程序执行的过程中，各代码的执行顺序对程序的结果是有直接影响的。我们把控制代码按照什么结构顺序来执行的结构称之为程序结构。
程序结构主要有三种结构，分别是顺序结构、选择结构（分支结构）和循环结构，这三种结构代表三种代码执行的顺序。

1. 顺序结构

顺序结构是程序中最简单、最基本的流程控制，简单的理解就是程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。 

2. 选择结构

选择结构顾名思义就是，由上到下执行代码的过程中，会根据不同的条件，选择执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果。

 JS 给我们提供了两种选择结构语句：
① if 语句
② switch 语句

2.1 基本if 语句

（1）语法结构

if (条件表达式) {
 // 条件成立执行的代码语句
}

（2）执行流程

 

基本 if 语句执行的特征：只有条件成立才执行代码，否则什么也不做；

// 判断一个人的成绩是否及格，及格就弹出对话框
var num = prompt('请输入您的成绩：');
if (num >= 60) {
   alert('恭喜你，及格了');
} 

基本 if 语句，就是根据条件来选择是否执行条件语句，上述案例就是根据成绩分数是否达到60分，来决定是否输出语句。

2.2 if else语句（双分支语句）

（1）语法结构

if (条件表达式) {
 // [如果] 条件成立执行的代码
} else {
 // [否则] 执行的代码
}

（2）执行流程

  if else语句执行的特征：  是二选一的过程，只执行其中一个语句。

// 判断一个人的成绩是否及格，及格就弹出对话框
var num = prompt('请输入您的成绩：');
if (num >= 60) {
   alert('恭喜你，及格了');
} else {
   alert('很遗憾，你没及格，回家要吃皮带炒肉丝了');
}

if  else语句，就是根据条件来选择执行两个条件语句中的哪一句，上述案例就是根据成绩分数是否达到60分，来决定输出两句语句中的那一句。

2.3 if else if 语句(多分支语句)

 （1）语法结构

// 适合于检查多重条件。
if (条件表达式1) {
 语句1；
} else if (条件表达式2) {
 语句2；
} else if (条件表达式3) {
 语句3；
 ....
} else {
 // 上述条件都不成立执行此处代码
}

（2）执行流程

if else if语句执行的特征：  是多选一的过程，也是只执行其中一个语句。

var score = prompt('请输入您的成绩');
if (score >= 90) {
   alert('您的考试成绩等级为A');
} else if (score >= 80) {
   alert('您的考试成绩等级为B');
} else if (score >= 70) {
   alert('您的考试成绩等级为C');
} else if (score >= 60) {
   alert('您的考试成绩等级为D');
} else {
   alert('您的考试成绩等级为E');
}

以上代码是：根据接收到的成绩，来判断该成绩等级，由于成绩分成了ABCDE五个等级，是五选一的结构，所以if else语句的二选一已经不满足要求了，从而这时需要使用if else if 语句即多分支结构来分别判断输出不同的值 。

3. 三元表达式

由三元运算符组成的式子称为三元表达式，它也能做一些简单的条件选择。

（1）语法结构

表达式1 ? 表达式2 : 表达式3;

（2）执行思路

① 如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值
② 简单理解： 就类似于 if else （双分支） 的简写 

// 输入一个值，如果数字小于10，则在这个数字前面补0,（加0） 否则 不做操作
var num = prompt('请输入一个数字：');
var result = num < 10 ? '0' + num : num;  // 把返回值赋值给一个变量
console.log(result);

如果使用if else （双分支） 实现上述代码的功能，则代码如下：

// 输入一个值，如果数字小于10，则在这个数字前面补0,（加0） 否则 不做操作
var num = prompt('请输入一个数字：');
if (num < 10) {
    result = '0' + num;
} else {
    result = num;
}
console.log(result);

三元表达式和if else功能相似，但是三元表达式结构更简单，代码更少，所以简单的双分支判断还是很推荐使用的。

4. switch 语句

switch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用 switch。

（1）语法结构

switch( 表达式 ){ 
 case value1:
 // 表达式 等于 value1 时要执行的代码
 break;
 case value2:
 // 表达式 等于 value2 时要执行的代码
 break;
 default:
 // 表达式 不等于任何一个 value 时要执行的代码
}

注意点：

① switch ：表示开关、转换的意思 ， case ：表示例子、选项的意思
② 关键字 switch 后面括号内可以是表达式或值， 通常是一个变量
③ 关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号
④ 只有当switch表达式里面的值和case里面的值完全一样（值和类型，即全等===）时，才会执行该case里面的代码块，并在遇到 break 时停止，整个 switch 语句代码执行结束
⑤ 如果所有的 case 的值都和表达式的值都不匹配，则执行 default 里的代码

⑥ 执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。

 （2）案例--查询水果

要求：用户在弹出框里面输入一个水果，如果有就弹出该水果的价格， 如果没有该水果就弹出“没有此水果”。 

var fruit = prompt('请您输入想要查询的水果:');
switch (fruit) {
    case '香蕉':
        alert('香蕉的价格是 3.5/斤');
        break;
    case '车厘子':
        alert('车厘子的价格是 35/斤');
        break;
    default:
        alert('没有此水果');
}

分析：

① 弹出 prompt 输入框，让用户输入水果名称，把这个值取过来保存到变量中，因为prompt输入框输入的内容是字符串类型，即这个变量是字符串类型。
② 将这个变量作为 switch 括号里面的表达式。
③ case 后面的值写几个不同的水果名称，注意一定要加引号 ，因为必须是全等匹配。
④ 弹出不同价格即可。同样注意每个 case 之后加上 break ，以便退出 switch 语句。
⑤ 将 default 设置为没有此水果

5. switch 语句和 if else if 语句的区别

① 一般情况下，它们两个语句可以相互替换
② switch...case 语句通常处理 case为比较确定值的情况， 而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)
③ switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多少次。
④ 当分支比较少时，if… else语句的执行效率比 switch语句高；当分支比较多时，switch语句的执行效率比较高，而且结构更清晰

6. 小结

选择结构是一种非常重要的结构，实现功能时往往都需要用到，而其也选择了多种结构，具有使用哪一种，要结合实际需求进行选择。

但是要注意的是，不管是if else语句还是if else if 语句，都是几选一，也就是说每个条件表达式之间是对立关系，程序只会选择其中一个语句进行执行，其他语句不执行。如果switch语句，每个case后面都加上了break，那么也是实现多选一的效果。

然而我们在实际开发中，经常会遇到在不同条件下执行不同行为，但是这些行为并不是对立的，所以这时我们经常会用到多个if语句，比如以下案例：

要求：让用户分别输入语文、数学和英语的成绩，然后60分及以上为及格，需要判断出该学生有几门科目不及格，同时输出不及格科目。

var chineseScore = parseInt(prompt('请您输入您的语文成绩'));
var mathScore = parseInt(prompt('请您输入您的数学成绩'));
var englishScore = parseInt(prompt('请您输入您的英语成绩'));
var i = 0;
var str = '';
if (chineseScore < 60) {
    i++;
    str += '语文';
}
if (mathScore < 60) {
    i++;
    str += '数学';
}
if (englishScore < 60) {
    i++;
    str += '英语';
}
console.log('您不及格的科目一共有：' + i + '门');
console.log('不及格的科目是：' + str);

分析：由于语数英的成绩并不是对立关系，所以不管是if else语句还是if else if 语句或者是switch语句都无法实现该需求的。因此，这里使用多重if语句，实现对每科成绩根据条件都去单独判断是否及格。