JavaScript流程控制分支结构

365 阅读4分钟

1.流程控制

在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的顺序来实现我们要完成的功能。流程控制主要有三种结构,分别是顺序结构分支结构循环结构,这三种结构代表三种代码执行的顺序。

image.png

01.顺序结构

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

02.分支流程控制

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

JS语句提供了两种分支结构语句:if语句和switch语句

if语句 if语句的语法结构

//如果if条件表达式结果为真(true)则执行大括号里的语句,如果条件表达式结果为假false,则不执行
大括号里的语句,执行if语句后面的代码
 if ( 条件表达式) {
           执行语句
    }

条件成立执行代码,否则什么也不做

if (3<5) {
alert('执行成功')
}

if else双分支语句 语法结构

image.png

判断是否为闰年案例

什么是闰年, 。那么接下来开始案例:

 var year = prompt('请输入年份:');    //  通过prompt生成用户输入框,并将数据保存在声明的变量year中
if ( year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {          
                            //year能被4乘除,取余为0。不能被100整除,取余不等于0.能被400整除取余为0 
 alert('你输入的年份为闰年');
        }else{
              alert('你输入的年份为平年');
        }

if else if 多分支语句

 //语法规范
        if (条件表达式1) {
            // 语句1
        } else if(条件表达式2) {
            // 语句2
        }else if(条件表达式3){
            // 语句3
        }else {
            //都不满足执行这些这个
        }

执行思路:如果条件表达式1满足就执行语句1,执行完毕后退出if分支语句。如果条件表达式1不满足,则判断条件表达式2,满足的话执行语句2,并退出。以此类推。如果上面的都不满足,则执行else里面的语句。

!注意:- 多分支语句是多选一,最后只能有一个语句执行。 else if的条件理论上可以是多个。else if 中间用空格隔开。

03.分支流程控制switch语句

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

语法结构

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

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

switch注意事项:

  1. 开发时switch的表达式我们一般写成变量,例如:var num = 10; switch (num){...}

  2. 表达式的值和case的值相匹配的时候是 全等(必须是值和数据类型一致)

  3. 一定要在case后写上break,如果当前的case里面没有break,则不会退出switch,是继续执行下一个case

switch语句小案例 要求:用户在输入框输入一个水果,如果有就弹出该水果的价格,如果没有就弹出‘没有此水果’,case后的值要用引号引起来,因为必须要全等。

 var fruit = prompt('请输入水果名称');
        switch (fruit) {
            case '苹果' :
                alert('苹果30一斤');
                break;
            case  '香蕉':
                alert('香蕉50一斤');
                break;
            case  '葡萄':
                alert('葡萄50一斤');
                break;
            case '草莓':
                alert('草莓50一斤');
                break;     
            default:
                alert('没有此水果');
                break;
        }

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

  • 一般情况下,它们两个语句可以相互替换
  • switch...case语句通常处理case为比较确定值得情况,而if else if语句更加灵活,常用语大范围判断(大于,小于,等于某个范围)
  • switch语句进行条件判断后直接执行到程序的条件语句,效率更高。而if..else语句有几种条件,就得判断多少次(从上往下依次判断)。
  • 当分支比较少时,if...else语句的执行效率比switch语句高。
  • 当分支比较多时,switch语句的执行效率比较高,而且结构更清晰。