JavaScript流程控制及案例_js流程控制案例-优快云博客

本文链接：https://blog.youkuaiyun.com/WangZhang_521/article/details/122844723

本文深入探讨了JavaScript中的流程控制，包括if分支语句、else双分支、if...else if...多分支、三元表达式和switch语句。通过实际案例如判断闰年、中奖、成绩级别和查询水果等，详细解析了这些语句的用法和注意事项，并比较了switch与if...else if...的差异。适合前端开发者学习和巩固。

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

01-if分支语句

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>if分支语句</title>
    <script>
        //1.if的语法结构 if如果
        // if (条件表达式) {
        //执行语句
        // }

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

<body>

</body>

</html>

02-进入网吧案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进入网吧案例</title>
    <script>
        // 弹出一个输入框，要求用户输入年龄，如果年龄大于18岁，则允许进入网吧
        var age = prompt('请输入您的年龄');
        if (age >= 18) {
            alert('您可以进入网吧');
        }
    </script>
</head>

<body>

</body>

</html>

03-if else双分支语句

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>if else双分支语句</title>
    <script>
        // 1.语法结构 if 如果 else 否则
        // if (条件表达式) {
        //     // 执行语句1
        // } else {
        //     // 执行语句2
        // }
        // 2.执行思路 如果表达式结果为真，则执行语句一 如果结果为假  则执行语句2
        // 3.代码验证
        var age = prompt('请输入您的年龄');
        if (age >= 18) {
            alert('您可以进入网吧');
        } else {
            alert('您暂时不能进入网吧');
        }
        // 4.if里面的语句1和else里面的语句2 最终只能有一个语句执行
        // 5.else后面直接跟大括号
    </script>

</head>

<body>

</body>

</html>

04-判断闰年案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>判断润年案例</title>
    <script>
        //    案例分析
        // 算法：能被4整除且不能整除100的为闰年，或者能被400整除的就是闰年
        // 1.弹出prompt输入框,让用户输入年份,把这个值取过来保存到变量中
        // 2.使用if语句来判断是否是闰年,如果是闰年,就执行if大括号里面的输出语句,否则就执行else里面的输出语句
        // 3.一定要注意里面的且&&或者||的写法,同时注意判断整除的方法是取余为0
        var year = prompt('请您输入要检测的年份');
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
            alert('您输入的年份是闰年');
        } else {
            alert('您输入的年份是平年');
        }
    </script>
</head>

<body>

</body>

</html>

05-判断是否中奖案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>判断是否中奖</title>
    <script>
        var name = prompt('请输入您的姓名');
        // 刘德华记得加引号
        if (name == '刘德华') {
            alert('您的中奖金额为5元');
        } else {
            alert('很遗憾,您未中奖');
        }
    </script>
</head>

<body>

</body>

</html>

06-if else if 多分支语句

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多分支语句</title>
    <script>
        // 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)多分支语句还是多选一 最后只有一个语句执行
        // (2) else if 里面的条件理论上是可以任意多个的
        // (3) else if 中间有个空格
    </script>
</head>

<body>

</body>

</html>

07-判断成绩级别案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>判断成绩级别案例</title>
    <script>
        // 案例分析
        // 按照从到到小的思路判断
        var score = prompt('请输入您的分数');
        // if (score >= 90) {
        //     alert('A');
        // } else if (score < 90 && score >= 80) {
        //     alert('B');
        // } else if (score < 80 && score >= 70) {
        //     alert('C');
        // } else if (score < 70 && score >= 60) {
        //     alert('D');
        // } else if (score < 60) {
        //     alert('E');
        // }
        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');
        }
    </script>
</head>

<body>

</body>

</html>

08-三元表达式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三元表达式</title>
    <script>
        // 1.有三元运算符组成的式子称为三元表达式
        // 2. ++num一元表达式   3+5二元表达式（有两个操作数） ？:三元运算符
        // 3.语法结构
        // 条件表达式 ? 表达式1 ： 表达式2
        // 4.执行思路 
        // 如果条件表达式结果为真，则返回表达式1的值 如果条件表达式结果为假，则返回表达式2的值
        // 5.代码体验
        var num = 10;
        var result = num > 5 ? '是的' : '不是的'; //我们知道表达式是有返回值(结果)的
        console.log(result);
        // if (num > 5) {
        //     result = '是的';
        // } else {
        //     result = '不是的';
        // }
    </script>
</head>

<body>
    <p>一元运算符有1个操作数。例如，递增运算符"++"就是一元运算符。</p>
    <p> 二元运算符有2个操作数。例如，除法运算符"/"有2个操作数</p>
    <p> 三元运算符有3个操作数。例如，条件运算符"?:"具有3个操作数。</p>
    <h3>1） 一元运算符</h3>
    <p>Java的一元运算符有++（自加）、--（自减）</p>
    <h3>2） 二元运算符</h3>
    <p>Java的二元运算符有+（加）、-（减）、*（乘）、/（除）、%（取余数）。</p>
    <h3> 3) 三元运算符</h3>
    <p>？:</p>

</body>

</html>

09-数字补0案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数字补0案例</title>
    <script>
        // 用户输入0~59之间的一个数字
        // 如果数字小于10,则在这个数字前面加0(拼接0) 如果大于10,则不做任何操作
        // 用一个变量接收这个返回值,然后输出
        var time = prompt('请输入一个0~59之间的数字');
        // 三元表达式
        var result = time < 10 ? '0' + time : time; //把返回值赋值给一个变量
        alert(result);
    </script>
</head>

<body>

</body>

</html>

10-switch语句语法结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>switch语句语法结构</title>
    <script>
        // switch语句也是多分支语句,可以实现多选一.它用于基于不同的条件来执行不同的代码.当要针对变量设置一系列的特定值的选项时,就可以使用switch.
        // 语法结构 switch转换,开关 case小例子或者选项的意思 break退出
        // switch (表达式) {
        //     case value1:
        //         执行语句1;
        //         break;
        //     case value2:
        //         执行语句2;
        //         break;
        //         ......
        //         default:
        //             执行最后的语句;
        // }
        // 3.执行思路 利用我们表达式的值 和 case 后面的选项值相匹配 如果匹配上,就执行该case
        // 里面的语句 如果都没有匹配上,那么执行 default里面的语句
        // 4.代码验证
        switch (2) { //2是特定值
            case 1:
                console.log('这是1');
                break;
            case 2:
                console.log('这是2');
                break;
            case 3:
                console.log('这是3');
                break;
            default:
                console.log('无匹配结果');
        }
    </script>
</head>

<body>

</body>

</html>

11-switch注意事项

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>switch注意事项</title>
    <script>
        // switch注意事项
        var num = 1; //如果是'3',则匹配不上
        switch (num) {
            case 1:
                console.log(1);
                // break; 不写break
            case 2:
                console.log(2);
                break;
            case 3:
                console.log(3);
                break;

        }
        // 1.实际开发时,表达式经常写成变量
        // 2.num里面的值和case里面的值是全等的 必须是值和数据类型一致才可以 num === 1
        // 3.break 如果当前的case里面没有break 则不会退出switch 是继续执行下一个case
    </script>
</head>

<body>

</body>

</html>

12-查询水果案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询水果案例</title>
    <script>
        // 弹出一个输入框,让用户输入水果名称,把这个值保存到变量中
        // 将这个变量作为switch括号里面的表达式
        // case后面的值写上几个不同的水果名称,注意一定要加引号,因为必须是全等匹配
        // 弹出不同价格即可 同时注意每个case之后加上break,以便退出switch语句
        // 将default设置为没有此水果
        var fruit = prompt('请输入想要查询的水果');
        switch (fruit) {
            case '苹果': //苹果要加引号,因为必须是全等
                alert('苹果的价格是3.5元/斤');
                break;
            case '橙子':
                alert('橙子的价格是4元/斤');
                break;
            default:
                alert('没有此水果');
        }
    </script>
</head>

<body>

</body>

</html>

13-switch语句和if else if语句的区别

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>switch语句和if else if语句的区别</title>
</head>

<body>
    <!-- 1.一般情况下,他们两个语句可以相互替换 -->
    <!-- 2.switch case语句通常处理case为比较确定值的情况,而if else语句更加灵活,常用于范围判断(大于或等于某个范围) -->
    <!-- 3.switch语句进行条件判断后直接执行到程序的条件语句,效率更高.而if else语句有几种条件,就得判断多少次 -->
    <!-- 4.当分支较少时,if else语句的执行效率比switch语句高 -->
    <!-- 5.当分支比较多时,switch语句的执行效率更高,而且结构更清晰 -->
</body>

</html>

14-作业

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业-判断时间阶段及根据用户输入的值,返回星期几</title>
    <script>
        // 作业1
        // var time = prompt('请输入时间');
        // if (time == 12) {
        //     alert('中午好');
        // } else if (time == 18) {
        //     alert('晚上好');
        // } else if (time == 23) {
        //     alert('深夜好');
        // }
        // 作业2
        var num = prompt('请在1-7之间输入一个值');
        switch (num) {
            case '1':
                alert('星期一');
                break;
            case '2':
                alert('星期二');
                break;
            case '3':
                alert('星期三');
                break;
            case '4':
                alert('星期四');
                break;
            case '5':
                alert('星期五');
                break;
            case '6':
                alert('星期六');
                break;
            case '7':
                alert('星期日');
                break;
            default:
                alert('未查询到你想要的值');
        }
    </script>
</head>

<body>

</body>

</html>