js的条件控制-if判断-switch语句-以及三元表达式(详解)_js中if的三个条件如何写

---

前言

上一章,我们抛出了什么是JavaScript 提供了3种条件控制的语法支持,本人会在这一张仔细的进行讲解!

---

1.if 语句

通过关键 if、else、else if 控制程序的执行顺序，具体分成3种情形：

1.单分支情形，当某个条件为 true 时，才执行某段程序代码

<script>
	// 语法格式为
  // if(条件) { 要执行的代码 }
  // 举例：国家规定年龄必须在16岁以上去网吧，否则为是教唆未成年人上网属违法行为。
  let age = 14;
  if(age >= 16) {
    document.write(`<p>你的年龄为${age}周岁，可以上网吧上网了。</p>`);
  }
</script>
1
2
3
4
5
6
7
8
9

2.双分支情形，当某个条件为 true 时，执行其中一段代码，为 false 时，则执行别一段代码

<script>
  // 语法格式为：
  // if(条件) {
  //   条件为 true 时要执行的代码
  // } else {
  //   条件为 false 时要执行的代码
  // }
  if(age >= 16) {
    document.write(`<p>你的年龄为${age}周岁，已达到法定上网年龄，可以上网。</p>`);
  } else {
    document.write(`<p>你的年龄为${age}周岁，未达到法定上午年龄，好好学习、天天向上!</p>`);
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

3.多分支情形，依次检测多个条件，其中任一条件为 true 时，则执行其对应的代码，如果所有条件均为 false 时，则执行 else 对应的代码。

<script>
  // 语法格式为：
  // if(条件) {
  //   条件为 true 时要执行的代码
  // } else if(另一个条件) {
  //   条件为 true 时要执行的代码
  // } else if(更多的条件) {
  //   条件为 true 时要执行的代码
  // } else {
  //   以上均条件为 false 时要执行的代码
  // }

  // 举例：期末考试成绩规定 80分以上为优秀，70分以上为良好，60分以上为及格。
  let score = 85;
  if(score >= 80) {
    document.write(`<p>你的期末成绩为${score}分，成绩评定为【优秀】。</p>`);
  } else if(score >= 70) {
    document.write(`<p>你的期末成绩为${score}分，成绩评定为【良好】。<p>`);
  } else if(score >= 60) {
    document.write(`<p>你的期末成绩为${score}分，成绩评定为【及格】。<p>`);
  } else {
    document.write(`<p>你的期末成绩为${score}分，成绩评定为【不及格】。<p>`);
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

总结：

• if 或 else if 的条件可以使用多个组件条件
• if 或 else if 的条件存在数据隐式类型的转换
• else 只能跟在 if 或 else if，之后，从语法角度看 else 可以省略
• 支持嵌套

注：介绍 if 的简写形式，即 if(true) // code...

2.switch 语句

通过 switch、case、break、default 控制程序的执行顺序，switch 一般多用来处理多分支，其语法相较 if 略显复杂，我们拆解成多个步骤来认识他。

<script>
  // 1. 极简用法
  // 语法格式
  // switch(数据变量) {
  //   case 条件:
  //     要执行的代码
  // }
  // 举例：根据省份名称，说出该省份所对应的省会城市。
  let province = '河北省';
  switch(province) {
    case '河北省':
      document.write(`<p>${province}的省会城市是【石家庄】。</p>`)
  } 
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

仔细分析上述代码，并无实际价值，只是语法正确而已，我们继续完善：

<script>
  // 语法格式：
  // switch(数据变量) {
  //   case 条件:
  //     要执行的代码;
  //     break;
  //   case 条件:
  //     要执行的代码;
  //     break;
  //   case 更多条件:
  //     要执行的代码;
  // }

  province = '山东省';
  switch (province) {
    case '河北省':
      document.write(`<p>${province}的省会城市是【石家庄】。</p>`);
      break;
      // 多个条件之间必须添加 break
    case '河南省':
      document.write(`<p>${province}的省会城市是【郑州】。</p>`);
      break;
    case '山东省':
      document.write(`<p>${province}的省会城市是【济南】。</p>`);
      break;
    case '山西省':
      document.write(`<p>${province}的省会城市是【太原】。</p>`);
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

上述代码才是 switch 的标准用法，可以根据不同的条件，执行不同的代码，不仅如此我们还可以通过 default 锦上添花。

<script>
    province = '德州';
    switch (province) {
      case '河北省':
        document.write(`<p>${province}的省会城市是【石家庄】。</p>`);
        break;
      // 多个条件之间必须添加 break
      case '河南省':
        document.write(`<p>${province}的省会城市是【郑州】。</p>`);
        break;
      case '山东省':
        document.write(`<p>${province}的省会城市是【济南】。</p>`);
        break;
      case '山西省':
        document.write(`<p>${province}的省会城市是【太原】。</p>`);
        break;
      default:
        document.write(`<p>${province}可能不是中国的省份。</p>`)
    } 
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

default 写在最后，上述所有条件均不满足时才执行 default。

归纳使用细节：

• switch 检测某个变量是否全等于（===）某个值做为条件
• 条件与条件之间必须要有 break
• 可连续并列多个 case
• 凡是可使用 switch 的逻辑，均可以使用 if 实现

3.三元表达式

三元表达式控制程序的执行顺序，有点类似于 if、else 配对使用。

<script>
  // 语法格式
  // 条件 ? 为true时执行代码 : 为false时执行代码
  // 举例：如果大于18岁输出成年，否则输出未成年
  let age = 17;
  age >= 18 ? document.write('成年人') : document.write('未成年人');
  
  /** 三元运算的两种应用场景 **/
  // 1. 控制运算的逻辑
  let name = prompt('请输入你的名字?');
  name === '小明' ? console.log('主人你好！') : console.log('请登录！');

  // 2. 进行赋值操作
  let num = +prompt('请输放年龄?');
  let age = num ? num : 18;
  console.log(age);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

归纳使用细节：

• 条件判断时会发生隐身类型转换
• 一般用于简单逻辑场合，相当于 if ... else
• 支持嵌套，尽量使用 if 代替
• 除了控制逻辑外，还可常被用于赋值

---

总结

以上就是js条件控制语句的详解,了解并且熟悉应用以上的这些语句,可以让你在工作中做出极多的复杂业务,当然,我这里主要讲解的是js的重要性,现在我们常用的vue也是js封装成的框架库,可见js的重要性和强大!