06JavaScript流程控制——分支流程控制_弹出一个输入框,要求用户输入年龄,如果年龄大于18岁,可以进入网吧-CSDN博客

本文链接：https://blog.csdn.net/qq_43394976/article/details/121375278

本文详细介绍了JavaScript中的分支流程控制，包括if语句、if...else双分支、if...else if多分支以及三元表达式和switch语句的用法，并通过案例解析了各结构的实现方式和应用场景。此外，还探讨了switch与if...else if语句的差异，帮助开发者更好地掌握条件判断的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、流程控制

简单理解：流程控制就是来控制我们的代码按照什么结构顺序来执行
JavaScript中流程控制主要有三种结构：顺序结构、分支结构、和循环结构
顺序结构：顺序执行
分支结构：条件判断，分不同的路走
循环结构：让代码反复执行

2、顺序流程控制

顺序结构是程序中最简单、最基本的流程控制。它会按照代码的先后顺序，依次执行。

程序中大多数代码都是这样执行的。

3、分支流程控制if语句

3.1 分支结构

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码，从而得到不同的结果。

JS中提供了两种分支结构语句：

if语句
switch语句

3.2 if语句

3.2.1 语法结构

        if (3 > 5) {
            alert('沙漠骆驼'); //不会弹出
        }

条件为真就执行花括号里面的代码，为假则不执行。

3.2.2 案例：18岁才能进入网吧

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

        var age = prompt('请输入年龄：');
        if (age >= 18) {
            alert('允许进入');
        }

3.3 if else双分支语句（二选一）

3.3.1 语法结构

if (条件表达式){
执行语句1
} else {
执行语句2
}

3.3.2 案例：未成年不得进入网吧（提升版）

        var age = prompt('请输入年龄：');
        if (age >= 18) {
            alert('允许进入');
        } else {
            alert('未成年人不允许进入网吧！');
        }

if 和else里面的语句只能二选一
else后面没有小括号，直接跟大括号

3.3.3 案例：判断闰年

分析：能够被400整除，或者能被4整除但不能被100整除的为闰年。

        var year = prompt('请输入年份');
        if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {
            alert('你输入的年份是闰年');
        } else {
            alert('你输入的年份是平年');
        }

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

3.4.1 语法规范

        if (条件表达式1) {
            执行语句1
        } else if (条件表达式2) {
            执行语句2
        } else if (条件表达式3) {
            执行语句3
        } else {

        }

注意点：

多分支语句还是多选一
else if 理论上是可以多个的
else if 之间有一个空格

3.4.2 案例：判断成绩级别

要求：接收用户输入的分数，根据分数输出对应的等级字母

90分（含）以上：A

80分（含）~90分（不含）：B

70分（含）~80分（不含）：C

60分（含）~70分（不含）：D

60分（不含）：E

        var grade = prompt('请输入你的成绩：');
        if (grade >= 90) {
            alert('A');
        } else if (grade >= 80) {
            alert('B');
        } else if (grade >= 70) {
            alert('C');
        } else if (grade >= 60) {
            alert('D');
        } else {
            alert('E');
        }

按照从大到小的顺序写可简化代码

4、三元表达式

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

一元运算符：如num++ num--

二元运算符：如3+5，算数运算符

三元运算符：问号和冒号？：

4.1 语法结构

        条件表达式? 表达式1 : 表达式2;

执行思路：如果条件表达式为真，则返回表达式1的值；如果为假则返回表达式2的值。

        var num = 10;
        var result = num > 5 ? '是的' : '不是';//声明一个变量保存返回值
        console.log(result);

4.2 案例：补0

用户输入数字，小于10就在前面补0，大于10就不需要补

        var time = prompt('请您输入一个0~59之间的数字')
        var result = (time < 10 ? '0' + time : time);
        alert(result);

5、分支流程控制switch语句

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

5.1 语法结构

        switch (表达式) {
            case value1:
                执行语句1;
                break;
            case value2:
                执行语句2;
                break;
                ...
                default:
                    执行最后的语句;
        }

执行思路：利用表达式的值和case后面的选项值相匹配，如果匹配上，就执行case里面的语句；如果没有匹配上，就执行default里面的语句。

        switch (2) {
            case 1:
                console.log('这是1');
                break;
            case 2:
                console.log('这是2');
                break;
            case 3:
                console.log('这是3');
                break;
            default:
                console.log('没有匹配结果');
        } //这是2

switch直接跳转，效率更高，适合用于表达式值比较固定的情况

5.2 switch注意事项

        var num = 3;
        switch (num) {
            case 1:
                console.log(1);
                break;
        }

开发里面switch表达式的值经常写成变量，这样变量具有不同的值就会输出不同的结果
num和case里面的值匹配时必须是全等的
break，如果当前case里面没有break，则不会推出switch，会继续执行下一个case

5.3 案例：查询水果

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

        var fruit = prompt('请输入要查询的水果：');
        switch (fruit) {
            case '苹果':
                alert('苹果的价格是3.5/斤');
                break;
            case '榴莲':
                alert('榴莲的价格是35/斤');
                break;
            default:
                alert('没有此水果');

        }