JavaScript流程控制-分支（流程控制（顺序流程控制，分支流程控制 if 语句，分支流程控制 switch 语句，switch 语句和 if else if 语句的区别）、课后作业）

最新推荐文章于 2024-07-18 10:24:18 发布
最新推荐文章于 2024-07-18 10:24:18 发布
阅读量123 收藏
点赞数
分类专栏： 《JavaScript》第三站 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Junyi727/article/details/127856109
版权

目录

JavaScript流程控制-分支

流程控制

顺序流程控制

分支流程控制 if 语句

分支流程控制 switch 语句

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

课后作业

JavaScript流程控制-分支

流程控制

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码 的执行顺序来实现我们要完成的功能。

简单理解： 流程控制就是来控制我们的代码按照什么结构顺序来执行

流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。

顺序流程控制

顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行， 程序中大多数的代码都是这样执行的。

分支流程控制 if 语句

分支结构

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

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

if 语句

switch 语句

if 语句

语法结构

// 条件成立执行代码，否则什么也不做
if (条件表达式) {
 // 条件成立执行的代码语句
}

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

执行流程

案例一：进入网吧

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

<!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>Document</title>
    <script>
        var age = prompt('欢迎光临星星网咖，请输入你的年龄');
        if(age >= 18)
        {
            alert('您已满18岁，可上机');
        }
    </script>
</head>
<body>
    
</body>
</html>

if else语句（双分支语句）

语法结构

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

执行流程

案例一：判断闰年

接收用户输入的年份，如果是闰年就弹出闰年，否则弹出是平年，（闰年规则是：能被400整除或者能被4整除并且不能被100整除）

<!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>Document</title>
    <script>
        var year = Number(prompt('请输入年份'));
        if (year % 400 == 0 || year %4 ==0 && year % 100 != 0) {
            alert(year + '年是闰年！');
        } else {
            alert(year + '年不是闰年哟！');
        }
    </script>
</head>
<body>
    
</body>
</html>

小结：因为prompt输入默认获取的是字符串，所以我直接用Number转成数字，培养一个良好的习惯，然后我再根据闰年的判断规则去解题。

案例二：刘德华中奖日记

接收用户输入的姓名，来判断是否中奖， 如果输入的是刘德华，则提示中了5块钱， 否则提示没有中奖。

<!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>Document</title>
    <script>
        var myname = prompt('请输入你的名字');
        var winner = '刘德华'
        if (myname == winner) {
            alert('中奖者！欢迎你！');
        } else {
            alert('你不是中奖者噢！');
        }
    </script>
</head>
<body>
    
</body>
</html>

if else if 语句(多分支语句)

语法结构

// 适合于检查多重条件。
if (条件表达式1) {
 语句1；
} else if (条件表达式2) {
 语句2；
} else if (条件表达式3) {
 语句3；
 ....
} else {
 // 上述条件都不成立执行此处代码
}

执行流程

案例一： 判断成绩级别

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

其中：

1. 90分(含)以上 ，输出：A

2. 80分(含)~ 90 分(不含)，输出：B

3. 70分(含)~ 80 分(不含)，输出：C

4. 60分(含)~ 70 分(不含)，输出：D

5. 60分(不含) 以下，输出： E

<!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>Document</title>
    <script>
        var results = Number(prompt('请输入你的成绩'));
        if (results >= 90) {
            alert('你的成绩是A');
        } else if (results >= 80) {
            alert('你的成绩是B');
        } else if (results >= 70) {
            alert('你的成绩是C');
        } else if (results >= 60) {
            alert('你的成绩是D');
        } else {
            alert('你的成绩是E');
        }
    </script>
</head>
<body>
    
</body>
</html>

三元表达式

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

语法结构

表达式1 ? 表达式2 : 表达式3;

执行思路

如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值

简单理解： 就类似于 if else （双分支） 的简写

案例一：数字补0

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

<!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>Document</title>
    <script>
        var a = Number(prompt('请输入数字'));
        a < 10 ? alert('0' + a) : alert(a);
    </script>
</head>
<body>
    
</body>
</html>

分支流程控制 switch 语句

语法结构

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

switch( 表达式 ){ 
 case value1:
 // 表达式 等于 value1 时要执行的代码
 break;
 case value2:
 // 表达式 等于 value2 时要执行的代码
 break;
 default:
 // 表达式 不等于任何一个 value 时要执行的代码
}

关键字 switch 后面括号内可以是表达式或值， 通常是一个变量

关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号

switch 表达式的值会与结构中的 case 的值做比较

如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码执行结束

如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码

执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。

案例一：查找水果

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

<!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>Document</title>
    <script>
        var fruit = prompt('请输入要查询的水果');
        switch (fruit) {
            case '苹果':
                alert('苹果的价格为10一斤');
                break;
            case '草莓':
                alert('草莓的价格为90一斤');
                break;
            case '桃子':
                alert('桃子的价格为20一斤');
                break;
            case '榴莲':
                alert('榴莲的价格为648一斤');
                break;
            default:
                alert('抱歉没有你查询的水果');
                break;
        }
    </script>
</head>
<body>
    
</body>
</html>

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

① 一般情况下，它们两个语句可以相互替换

② switch...case 语句通常处理 case为比较确定值的情况， 而 if…else…语句更加灵活，常用于范围判断(大于、 等于某个范围)

③ switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多 少次。

④ 当分支比较少时，if… else语句的执行效率比 switch语句高。

⑤ 当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

课后作业

① 1. 判断时间阶段。 比如 用户输入12点 弹出 中午好 用户输入 18点 弹出傍晚好 用户输入 23点 弹出深夜好 

<!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>Document</title>
    <script>
        var time = Number(prompt('请输入时间（12、18、23）'));
        if (time == 12) {
            alert('中午好');
        } else if (time == 18) {
            alert('傍晚好');
        } else {
            alert('深夜好');
        }
    </script>
</head>
<body>
    
</body>
</html>

② 2. 比较两个数的最大值 （用户依次输入2个值，最后弹出最大的那个值） 

<!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>Document</title>
    <script>
        var a = Number(prompt('请输入第一个数'));
        var b = Number(prompt('请输入第二个数'));
        alert(a > b ? a : b);
    </script>
</head>
<body>
    
</body>
</html>

③ 3. 用户输入一个数，来判断是奇数还是偶数 

<!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>Document</title>
    <script>
        var a = Number(prompt('请输入一个数字'));
        if (a % 2 == 0) {
            alert(a + '是偶数');
        } else {
            alert(a + '是奇数');
        }
    </script>
</head>
<body>
    
</body>
</html>

④ 4. 根据用户输入的数值（数字1 到 数字 7），返回星期几 

<!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>Document</title>
    <script>
        var a = Number(prompt('请输入1~7的数字'));
        switch (a) {
            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('你他喵乱输数字是吧！');
                break;   
        }
    </script>
</head>
<body>
    
</body>
</html>

⑤ 5. 接收班长口袋里的钱数？若大于等于2000，请大家吃西餐。若小于2000，大于等于1500，请大家吃快餐。

若小于1500，大于等于1000，请大家喝饮料。若小于1000，大于等于500，请大家吃棒棒糖。否则提醒班长下次把钱带够 

<!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>Document</title>
    <script>
        var money = Number(prompt('班长口袋的钱是多少呀？'));
        if (money >= 2000) {
            alert('吃西餐咯');
        } else if (money >= 1500) {
            alert('吃快餐咯');
        } else if (money >= 1000) {
            alert('肥宅快乐水！');
        } else if (money >= 500) {
            alert('吃棒棒糖吧');
        } else {
            alert('下次带钱呀！');
        }
    </script>
</head>
<body>
    
</body>
</html>

⑥ 6. 分数转换,给一个分数，判定等级。大于等于90 A，大于等于80小于90 B，大于等于70小于80 C ，大于 等于60小于70 D，小于60 E 

<!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>Document</title>
    <script>
        var a = Number(prompt('请输入你的成绩'));
        a = parseInt(a /10);//因为在JS里var没有固定数据类型，所以这里要强制转换一下
        switch (a) {    
            case 9:
                alert('你的成绩为A');
                break;
            case 8:
                alert('你的成绩为B');
                break;
            case 7:
                alert('你的成绩为C');
                break;
            case 6:
                alert('你的成绩为D');
                break;
            default:
                alert('你的成绩为E');
                break;
        }
    </script>
</head>
<body>
    
</body>
</html>
程序员shy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript 流程控制 分支语句 双分支语句 if、、else 、switch
MDR_0820的博客
10-14 589
在一个程序执行的过程中 各条代码的执行顺序对程序的结果是有直接影响的，很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能 简单理解 ：流程控制就是来控制我们的代码按照什么结构顺序来执行 流程控制主要有三种结构 分别是 顺序结构、分支结构、循环结构 这三种结构代表三种代码执行的顺序 分支结构 由上到下执行代码的过程中 根据不同的条件 执行不同的 路经代码（执行代码多选一的过程）从而得到不同的结果 JS 语言提供了两种分支结构语句 if语句 switch语句 if语句 语法结构 if（）{ .
JavaScript的流程控制，if分支语句，switch分支语句，三元表达式
muweichang的博客
12-07 294
博主每篇博文的浪漫主义：生活的意义在于去感受生活本身希望能给大家带来快乐和感悟。 通过本篇博文的学习，我们的目标是在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。流程控制主要有三种结构，分别是，这三种结构代表三种代码执行的顺序。顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照，程序中大多数的代码都是这样执行的。 由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而
JavaScript流程控制-分支语句
weixin_42787326的博客
07-30 316
转载请注明预见才能遇见的博客：https://my.csdn.net/ 原文地址：https://blog.csdn.net/weixin_42787326/article/details/81291776 JavaScript流程控制-分支语句 目录 JavaScript流程控制-分支语句 1.流程控制:有三种方式 2.分支语句之if语句:主要是判断 看代码 3.分支语句之if-e...
前端开发_JavaScript_流程控制语句_选择语句:if/switch
u013185175的博客
12-24 425
流程控制语句 1.引入 我们之前学习了运算符，可以进行一些数据的计算，但是在实际的开发中，有时候我们需要选择性的执行一些代码，或者是多次执行一些代码，为了解决类似的问题，我们一起来学习流程控制语句。 2.流程控制语句概述以及分类 流程控制语句是用来解决代码执行流程的技术，流程控制语句可以分为三类结构:顺序结构、选择结构、循环结构。下面我们逐一的讲解三个内容. 3.顺序结构 顺序结构是代码的默认结构，也就是从上到下的执行我们写的代码，哪一行代码先写就先执行哪一行代码。 4.选择...
JavaScript流程控制---分支语句、循环语句练习题
星空nwk的博客
09-14 832
流程控制：代码的执行过程 有三种方式： * 1.顺序结构：从上到下，从左到右执行的顺序 * 2.分支结构：if语句系列，switch语句， 三元表达式 * 3.循环结构：for循环， while循环系列， for in循环 分支语句 //输出月份的天数 var month = parseInt(prompt("请输入月份")); switch (month) {
04- JavaScript 流程控制语句：选择结构（if和switch）
JayYuen的博客
10-13 2197
代码块 用{}包围起来的代码，就是代码块。 JS中的代码块，只具有分组的作用，没有其他的用途。 代码块中的内容，在外部是完全可见的。举例： { var a = 2; alert("smyhvae"); console.log("永不止步"); } console.log("a = " + a); 打印结果：（可以看出，虽然变量 a 是定义在代码块中...
JS基础：流程控制-分支结构（if语句和switch语句）及其案例
weixin_49555741的博客
04-20 820
目录 1. 流程控制 2. 顺序流程控制 3. 分支流程控制 3.1 if 语句 3.2 if else 语句（双分支语句） 3.3.1if案例 （判断闰年） 3.4 if else if 语句（多分支语句） 3.4.1 判断成绩级别案例 3.5 switch 语句 3.5.1 查询水果价格案例 3.5.2 switch 语句和 if else if 语句区别 4. 三元表达式 4.1 数字补0案例 1. 流程控制 流程控制就是控制代码按照什么顺序结构来执行 ...
JavaScript-2.1-JavaScript 流程控制语句-分支结构
QWH_PYTHON的博客
10-15 246
JavaScript-2.1-JavaScript 流程控制语句-分支结构分支结构一：简单 if 结构二：if-else 结构三：多重 if 结构四：嵌套 if 结构五：switch-case 结构1、switch-case 的基本语法2、switch-case 的注意事项3、多重 if 结构 与 switch-case 结构的比较 分支结构 顺序结构是程序设计的借本结构 按照语句出现的顺序从...
JavaScript流程控制-分支
Renaissance_Y的博客
02-01 1420
在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。简单理解： 流程控制就是来控制我们的代码按照什么结构顺序来执行。流程控制主要有三种结构，分别是顺序结构分支结构和循环结构，这三种结构代表三种代码执行的顺序。
前端基础(六)_流程控制语句(if、if-else、if-else嵌套、switch)
见贤思齐焉，见不贤内自省
01-05 1523
流程控制语句(if、if-else、if-else嵌套、switch)
JavaScript基础之流程控制语句的用法
10-19
JavaScript中的流程控制语句是编写逻辑复杂和有条理的代码的关键组成部分。它们允许程序员根据特定条件决定执行哪部分代码，以及如何重复执行代码。在本文中，我们将深入探讨JavaScript中的几种主要流程控制语句：...
javascript流程控制语句集合
10-19
JavaScript中的流程控制语句是编写复杂逻辑和控制程序执行顺序的关键元素。在这篇文章中，我们将深入探讨其中的几种主要语句：if条件判断语句、if...else语句、if...else if语句、if语句的嵌套使用、switch语句、do....
浅谈js算法和流程控制
10-20
本篇文章主要探讨了如何通过优化算法和控制流程来提升JavaScript代码的执行效率。 首先，我们来看算法。算法是解决问题的步骤集合，它们决定了代码执行的逻辑。在JS中，选择合适的算法对于优化性能有着显著的影响。...
JavaScript程序中的流程控制语句用法总结
11-26
本文将深入探讨JavaScript中的流程控制语句，包括条件判断语句和循环语句，以及它们在实际编程中的应用。 首先，条件判断语句是控制程序流程的关键。在JavaScript中，最基础的条件判断语句是if语句。其基本结构为`...
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 773
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
ReactRouter v6升级的步骤
feixin369的博客
07-14 418
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
vue搜索框过滤--- computed、watch区别
学习笔记分享给大家
07-16 331
计算属性computed适用于需要基于其他数据动态变化，并且需要缓存的场景。侦听器watch适用于需要响应数据变化，执行异步或开销较大操作的场景。方法methods适用于定义组件的具体行为，包括事件处理和业务逻辑等。
react 快速入门思维导图
最新发布
weixin_44565776的博客
07-18 108
只要掌握了这些react技能，基本就可以熟练使用react了
ios CCUIAlertActivityView.m
编程语言技巧经验分享
07-17 485
// // CCUIAlertActivityView.m // CCFC // // #import "CCUIAlertActivityView.h" #import "CCNSNumber.h" #import "CCU

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员shy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值