【前端学习-初阶-JS】JavaScript流程控制

我自闭了？

于 2023-03-01 10:54:28 发布

阅读量272

点赞数

分类专栏：前端学习日记 JavaScript 文章标签：前端 javascript 学习

本文链接：https://blog.csdn.net/qq_48234463/article/details/129276177

版权

前端学习日记同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

JavaScript

19 篇文章 0 订阅

订阅专栏

目录:

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

4.三元表达式

5.分支控制switch语句

5.1 语法结构

5.2 switch和if else if语句的区别

5.3 作业

1.流程控制

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。
简单理解：流程控制就是来控制我们的代码按照什么结构顺序来执行
流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。

2.顺序流程控制

它没有特定的流程控制，没有特定的语法结构，按照代码的先后顺序依次执行

3.分支流程控制

3.1 分支结构

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

条件执行

↓

判断

↓

A B

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

if语句
switch语句

1、if的语法结构

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

案例1：进入网吧

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

案例分析：

①弹出prompt输入框，用户输入年龄，程序把这个值取过来保存到变量中

②使用if语句来判断年龄，如果年龄大于18就执行if大括号里面的输出语句

 <script>
     var age=prompt('请输入年龄：');
     /* if(age>=18){
         alert('可以访问')；
     } */
     
     if(age<18){
         alert('年龄小于18岁，禁止访问！');
     }
 </script>

3.2 if else语句

<script> 
/* if (条件表达式){
     //执行语句1
 }else{
     //执行语句2
 } */
 var age=prompt('请输入您的年龄：');
 if(age>=18){
     alert('我想带你去网吧')
 }else{
     alert('未满18岁，禁止访问！！');
 }
</script>

语法结构 if 如果 else 否则
执行思路如果表达式结果为真那么执行语句1 否则执行语句2
if里面的语句1和else里面的语句2 最终只能有一个语句执行
else后面直接跟大括号

案例2：判断闰年

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

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

独立完成案例：判断是否中奖

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

 <script>
     var name = prompt('请输入姓名：');
     if (name=='刘德华') {
         alert('恭喜您中奖了！！5元！！');
     } else {
         alert('很遗憾，欢迎下次光临。');
     }
 </script>

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

1、多分支语句：多选1

2、if else if语句是多分支语句

3、语法规范：

if(条件表达式){

//语句1;

}else if(条件表达式2){

//语句2；

}else if(条件表达式3){

//语句3;

}else{

//最后的语句;

}

4、执行思路：

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

5、注意点：

（1）多分支语句还是多选1 最后只能有一个语句执行

（2）else if里面的条件理论上是可以任意多个的

（3）else if中间有空格了

案例：判断成绩级别

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

其中：

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

 <script>
     var score = prompt('请输入成绩：')
     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>

4.三元表达式

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

 <script>
     var number = 10;
     var result = number > 5 ? '是的' : '不是的';
     console.log(result);
     
     //等价于
     /* if(num>5){
         result='是的';
     }else {
         result='不是的'；
     } */
 </script>

案例：数字补0

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

 <script>
     var number = prompt('请输入数字：');
     var result = number < 10 ? '0' + number : number;
     alert(result);
 </script>

5.分支控制switch语句

5.1 语法结构

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

1、switch语句也是多分支语句，也可以实现多选1

2、语法结构 switch转换、开关 case-小例子或者选项的意思

3、执行思路利用我们的表达式的值和case后面的选项值相匹配，如果匹配上，就执行该case里面的语句，如果都没有匹配上，那么执行default里面的语句

4、代码验证：

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

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

注：

default-不履行
表达式经常写成变量

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

我们num的值和case里面的值相匹配的时候是全等，必须是值和数据类型一致才可以num===1
break 如果当前的case里面没有break，则不会退出switch是继续执行下一个case

案例：查询水果

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

<script>
    var fruit = prompt('请输入水果名称：')
    switch (fruit) {
        case '苹果':
            alert('3.5/斤');
            break;
        case '梨':
            alert('4.5/斤');
            break;
        case '香蕉':
            alert('5.5/斤');
            break;
        case '葡萄':
            alert('6.5/斤');
            break;
        case '火龙果':
            alert('10.5/斤');
            break;
        default:
            alert('没有此水果');
            break;
    }
</script>

5.2 switch和if else if语句的区别

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

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

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

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

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

5.3 作业

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

<script>
    var time = prompt('请输入一个时间整数（24时格式）：')
    if (time <= 4) {
        alert('别熬夜了');
    } else if (time <= 12) {
        alert('早上好');
    } else if (time <= 18) {
        alert('下午好');
    } else {
        alert('深夜好');
    }
</script>

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

方法一：

<script>
    var num1 = prompt('请输入一个数：')
    var num2 = prompt('请输入一个数：')
    alert(num1 > num2 ? num1 : num2);
</script>

方法二：

<script>
    var num1 = prompt('请输入一个数：')
    var num2 = prompt('请输入一个数：')
    if (num1 > num2) {
        alert(num1);
    } else if (num2 > num1) {
        alert(num2);
    } else {
        alert('相等');
    }
</script>

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

方法一：

<script>
    var num = prompt('请输入数字：')
    num1 = num % 2
    switch (Number(num1)) {
        case 1:
            alert('奇数');
            break;
        case 0:
            alert('偶数');
            break;
        default:
            alert('非奇非偶');
            break;
    }
</script>

方法二：

<script>
    var num = prompt('请输入一个整数：')
    if (num % 2) {
        alert('是奇数');
    } else {
        alert('是偶数');
    }
</script>

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

<script>
    var num = prompt('请输入1~7随机一个数字：')
    switch (Number(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('输入错误');
            break;
    }
</script>

⑤接收班长口袋里的钱？若大于2000，请大家吃西餐。小于2000，大于等于1500，请大家吃快餐。若小于1500，大于等于1000，请大家喝饮料。若小于1000，大于等于500，请大家吃棒棒糖。否则提醒班长下次把钱带够

<script>
    var score = prompt('请输入班长的钱：')
    if (score >= 2000) {
        alert('吃西餐');
    } else if (score >= 1500) {
        alert('吃快餐');
    } else if (score >= 1000) {
        alert('喝奶茶');
    } else if (score >= 500) {
        alert('吃棒棒糖');
    } else {
        alert('太小气了');
    }
</script>