JavaScript 流程控制 - 分支

最新推荐文章于 2025-05-04 17:21:05 发布

原创最新推荐文章于 2025-05-04 17:21:05 发布 · 352 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端JavaScript

本文详细介绍了JavaScript中的分支控制结构，包括if语句、if...else语句、if...else if...else语句、三元表达式以及switch语句的使用方法和实例解析，帮助读者掌握如何根据条件执行不同代码路径。

JavaScript 流程控制 - 分支

目标

能够使用 if 分支语句
能够使用 switch 分支语句
能够使用三元表达式

    <script>
      // 1. if 的语法结构 如果if
      // if (条件表达四) {
      //   // 执行语句
      // }
      // 2. 执行思路 如果 if 里面的条件表达式结果为真 true 则执行大括号里面的 执行语句
      // 如果 if 条件表达式结果为假 则不执行大括号里面的语句 则执行if 语句后面的代码
      // 3.代码体验
      if (3 < 5) {
        alert("沙漠骆驼");
      }
    </script>

语句可以理解为一个行为，循环语句和分支语句计算典型的语句。一个程序由多个语句组成，一般情况下，会分割成一个一个的语句。

2. 执行流程

先判断条件，看条件是否正确，如果是 true 则执行语句，如果为 fakse 则执行其他语句

案例：进入网吧

弹出一个输入框，要求用户输入年龄，如果年龄大于等于18岁，允许进网吧。

案例分析：

弹出 prompt 输入框，用户输入年龄，程序把这个值取过来保存到变量中
使用 if 语句来判断年龄，如果年龄大于 18 就执行 if 大括号里面的输出语句

    <script>
      var age = prompt("请输入您的年龄");
      if (age >= 18) {
        alert("您成年了");
      } else {
        alert("小朋友你没有成年");
      }
    </script>

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

1. 语法结构

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

案例：判断闰年

接受用户输入的年份，如果是闰年就弹出闰年，否则弹出平年

案例分析：

算法：能被 4 整除且不能整除 100 的为闰年（如 2004 年就是闰年，1901 年不是闰年）或者能够被 400 整除的就是闰年
弹出 prompt 输入框，让用户输入年份，把这个值取过来保存到变量中
使用 if 语句来判断是否是闰年，如果是闰年，就执行 if 大括号里面的输出语句，否则就执行 else 里面的输出语句
一定要注意里面的且 && 还有或者 || 的写法，同时注意判断整除的方法是取余为 0

    <script>
      var year = prompt("请您输入年份");
      if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
        alert(year + "是闰年");
      } else {
        alert(year + "不是闰年是平年");
      }
    </script>

3.4 if else if 语句（多分支语句）

1. 语法结构

    <script>
      // 1. 多分支语句 就是利用多个条件来选择不同的语句执行 得到不同的结果 多选1 的过程
      // 2. if else if 语句是多分支语句
      // 3. 语法规范
      if (条件表达式1) {
        // 语句1
      } else if (条件表达式2) {
        // 语句2
      } else if (条件表达式3) {
        // 语句3
      } else {
        // 最后的语句
      }
      // 4. 执行思路
      // 如果条件表达式1 满足就执行 语句1 执行完毕后 退出整个 if 分支语句
      // 如果条件表达式1 不满足 则判断条件表达式2 满足的话 执行语句2 以此类推
      // 如果上面的所有条件表达式都不成立 则执行else 里面的语句
      // 5. 注意点
      // 多分支语句还是多选1 最后只能有一个语句执行
      // else if 里面的条件理论上是可以任意多个的
      // else if 中间有个空格
    </script>

2. 执行流程

如果条件表达式1 满足就执行语句1 执行完毕后退出整个 if 分支语句
如果条件表达式1 不满足则判断条件表达式2 满足的话执行语句2 以此类推
如果上面的所有条件表达式都不成立则执行 else 里面的语句

案例：判断成绩级别

要求：接收用户输入的分数，根据分数输出对应的等级字母 A 、B、C、D、E

其中：

90分（含）以上，输出：A
80分（含）~ 90分（不含），输出：B
70分（含）~ 80分（不含），输出：C
60分（含）~ 70分（不含），输出：D
60分（含）以下，输出：E

案例分析：

按照从大到小判断的思路
弹出 prompt 输入框，让用户输入分数，把这个值取过来保存到变量中
使用多分支 if else if 语句来分别判断输出不同的值

    <script>
      var results = prompt("请输入您的考试成绩");
      if (results >= 90) {
        alert("A");
      } else if (80 <= results < 90) {
        alert("B");
      } else if (70 <= results < 80) {
        alert("C");
      } else if (60 <= results < 70) {
        alert("D");
      } else {
        alert("E");
      }
    </script>

4. 三元表达式

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

    <script>
      // 1. 语法结构
      // 条件表达式 ? 表达式1 : 表达式2
      // 2. 执行思路
      // 如果条件表达式结果为真 则 返回 表达式1 的值 如果条件表达式结果为假 则返回 表达2 的值
      // 3. 代码体验
      var num = 20;
      var result = num > 5 ? "是的" : "不是的"; // 我们知道表达式是有返回值的
      console.log(result); // 是的
    </script>

案例：数字补 0

用户输入数字，如果数字小于 10，则在前面补 0，比如：01、09，如果数字大于 10，则不需要补，比如：20。

案例分析：

用户输入 0 ~ 59 之间的一个数字
如果数字小于 10，则在这个数字前面补 0，否则不做操作
用一个变量接受这个返回值，输出

    <script>
      var time = prompt("请您输入一个 0 ~ 59 之间的一个数字");
      // 三元表达式
      var result = time < 10 ? "0" + time : time;
      alert(result);
    </script>

5. 分支流程控制 switch 语句

5.1 语法结构

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

    <script>
      // 1. switch 语句也是多分支语句 也可以实现多选1
      // 2. 语法结构 switch 转换、开关 case 小列子或者选项的意思
      // switch (表达式) {
      //   case value1:
      //     执行语句1;
      //     break;
      //   case value1:
      //     执行语句1;
      //     break;
      //   default:
      //     执行最后的语句;
      // }
      // 3. 执行思路 利用我们的表达式的值 和 case 后面的选项相匹配 如果匹配上 就执行 case 里面的语句 如果都没有匹配上 那么执行 default里面的语句
      // 4. 代码验证
      switch (2) {
        case 1:
          console.log("这是1");
          break;
        case 2:
          console.log("这是2");
          break;
        case 3:
          console.log("这是3");
          break;
        default:
          console.log("没有匹配结果");
      } // 这是2
    </script>

注意事项：

    <script>
      // switch 注意事项
      var num = 3;
      switch (num) {
        case 1:
          console.log(1);
          break;
        case 3:
          console.log(3);
          break;
      }
      // 1. 我们开发里面 表达式我们经常写成变量
      // 2. 我们 num 的值 和 case 里面的值相匹配的时候是 全等 必须是值和数据类型一致才可以 num === 1
      // 3. break 如果当前的case里面没有break 则不会退出switch 是继续执行下一个case
    </script>

案例：查询水果

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

案例分析：

弹出 prompt 输入框，让用户输入水果名称，把这个值取过来保存到变量中。
将这个变量作为 switch 括号里面的表达式。
case 后面的值写几个不同的水果名称，注意一定要加引号，因为必须是全等匹配。
弹出不同价格即可。同样注意每个 case 之后加上 break，以便退出 swutch 语句。

    <script>
      var fruit = prompt("请您输入要查询的水果名称");
      switch (fruit) {
        case "苹果":
          alert("苹果的价格是3.5/斤");
          break;
        case "榴莲":
          alert("榴莲的价格是35/斤");
          break;
        case "香蕉":
          alert("香蕉的价格是12/斤");
          break;
        case "梨子":
          alert("苹果的价格是15/斤");
          break;
        default:
          alert("没有此水果");
      }
    </script>