条件语句

发表于 | 分类于 ，

所谓流程控制，就是指对于流程的执行顺序进行控制。默认情况下，JavaScript 引擎会按照代码的编写顺序，从上往下依次执行代码语句。这种情况一般称之为“顺序执行”。

但不是所有的程序都只靠顺序执行就能够完成的，所以除了顺序执行之外，还需要掌握其他的一些代码执行流程。

JavaScript 中代码的执行顺序大致可以分为三种：

而条件语句，就是用来实现”选择执行“的代码执行顺序。

条件语句原理：通过判断某些条件是否成立，来决定执行哪一部分代码或者不执行哪一部分代码。

条件语句主要分为四种形式：

  1. 单分支语句
  2. 双分支语句
  3. 多分支语句
  4. 多分支等比语句

单分支语句

单分支条件语句，由一个if构成，语法结构如下：

1
2
3
if(条件){
    代码块
}

代码执行顺序：

  1. 判断小括号中的条件是否成立；
  2. 条件结果为true，执行大括号中的代码块；
  3. 条件结果为false，跳过大括号中的代码块直接执行大括号后面的代码；
1
2
3
4
5
let num = 10;
if(num > 0){
    console.log("进入 if 语句");   
}
console.log("if 后面的语句");

运行结果：

1
2
"进入 if 语句"
"if 后面的语句"

代码执行顺序分析：

  1. 执行第一行，创建一个变量num值为10；
  2. 执行第二行，判断if条件num > 0是否成立：10 > 0成立；
  3. 进入if内部，执行第三行代码，输出"进入 if 语句"；
  4. 执行第五行，输出"if 后面的语句"；

双分支语句

双分支条件语句，由一个if和一个else构成，语法结构如下：

1
2
3
4
5
if(条件){
    代码块一
} else {
    代码块二
}

代码执行顺序：

  1. 判断小括号中的条件是否成立；
  2. 条件结果为true，执行代码块一，跳过代码块二；
  3. 条件结果为false，跳过代码块一，执行代码块二；
1
2
3
4
5
6
7
let num = 10;
if(num > 20){
    console.log("num > 20 条件成立");   
} else {
    console.log("num > 20 条件不成立");
}
console.log("if else 后面的语句");

运行结果：

1
2
"num > 20 条件不成立"
"if else 后面的语句"

代码执行顺序分析：

  1. 执行第一行，创建一个变量num值为10；
  2. 执行第二行，判断if条件num > 20是否成立：10 > 20不成立；
  3. 跳过第三行代码；
  4. 进入else，执行第五行代码，输出"num > 20 条件不成立"；
  5. 执行第七行代码，输出"if else 后面的语句"；

多分支语句

多分支条件语句，即可以设置多个判断条件的语句。由一个if和多个else if组成，语法结构如下：

1
2
3
4
5
6
7
if(条件一){
    代码块一
} else if(条件二){
    代码块
} else if(条件n){
    代码块n
}

代码执行顺序：

  1. 判断条件一是否成立；
  2. 若条件一成立，执行代码块一；
  3. 若条件一不成立，继续判断下一个条件是否成立；
  4. 一旦成功进入某一个条件后，后面的判断都不再执行；
1
2
3
4
5
6
7
8
let score = 85;
if(score >= 90){
    console.log("优秀");
} else if(score >= 70){
    consle.log("良好");
} else if(score >= 60){
    console.log("一般");
}

代码执行顺序分析：

  1. 执行第一行代码，创建一个变量score保存一个成绩数据85;
  2. 执行第二行代码，判断if条件score >= 90是否成立：85 >= 90不成立；
  3. 跳过第三行代码；
  4. 执行第四行代码，判断else if条件socre >= 70是否成立：85 >= 70成立；
  5. 进入else if，执行第五行代码，输出"良好";
  6. 整个多分支语句结束，继续执行后面的代码；

附：多分支条件语句还可以结合else一起使用。语法结构如下：

1
2
3
4
5
6
7
8
9
if(条件一){
    代码块一
} else if(条件二){
    代码块
} else if(条件n){
    代码块n
} else {
    代码块n+1
}

当前面所有条件都不成立时，就会执行else的代码。

1
2
3
4
5
6
7
8
9
10
let score = 55;
if(score >= 90){
    console.log("优秀");
} else if(score >= 70){
    consle.log("良好");
} else if(score >= 60){
    console.log("一般");
} else {
    console.log("不及格");
}

依次判断前面每一个条件，都不成立，最后进入else，输出"不及格"。

多分支等比语句

多分支等比语句，即可以设置多个判断条件（判断是否相等）的语句。一个完整的多分支等比语句由一个switch、多个case、多个break（可选）和一个default（可选）组成，语法结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
switch(匹配条件){
    case 匹配值1:
        代码块一
        break;
    case 匹配值2:
        代码块二
        break;
    case 匹配值n:
        代码块n
        break;
    default:
        代码块n+1
}

代码执行顺序：

  1. 判断匹配条件 === 匹配值1是否成立；
  2. 若成立，则执行代码块一；
  3. 若不成立，则继续判断匹配条件 === 匹配值2是否成立；
  4. 如果所有case值都不匹配，则进入default，执行代码块n+1；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
let floor = '2F';
switch(floor){
    case '1F':
        console.log('一楼到了');
        break;
    case '2F':
        console.log('二楼到了');
        break;
    case '3F':
        console.log('三楼到了');
        break;
    default:
        console.log('楼层输入有误，请重新输入。');
}

代码执行顺序分析：

  1. 执行第一行代码，创建一个变量floor值为'2F';
  2. 进入switch，判断小括号中的floor是否全等于第一个case后面的匹配值'1F'：floor === '1F'不成立；
  3. 跳过第四、五行代码；
  4. 判断floor是否全等于第二个case：floor === '2F'成立；
  5. 执行第七行，输出'二楼到了';
  6. 执行第八行break，跳出整个switch语句；

说明：switch语句有一个特点，一旦进入某一个case后，如果不通过break语句跳出，后面所有case的代码块都会依次执行。

我 秦始皇 打钱