【前端笔记】05-流程控制之分支结构

流程控制

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

顺序流程控制

• 概念：顺序流程控制是程序中最简单，最基本的流程控制，没有特定的语法结构；程序会按照代码的顺序依次执行；程序中的大多数代码都是这样执行的

分支流程控制

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

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

• if语句
• switch语句

分支流程控制if语句

if语句

• 语法结构

if (条件表达式) {
执行语句;
}

• 执行流程
  
• 代码示例

if(3>5){
       alert('迪丽热巴');
        }
        alert('马尔扎哈');//结果马尔扎哈

if双分支语句

• 语法结构：

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

• 执行流程
  
• 代码示例

var age = prompt('请输入你的年龄');
        if (age >= 18) {
            alert('你已成年，允许进入网吧');
        } else{
            alert('你是未成年，不允许进入网吧');
        }//根据输入的数据是否>=18来执行两种不同的结果

if多分支语句

• 语法结构

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

• 流程控制
  
• 代码示例：见下方练习5

if分支语句案例

 //练习1：进入网吧案例
        var age = prompt('请输入你的年龄');
        if (age >= 18) {
            alert('你已成年，允许进入网吧');
        } else{
            alert('你是未成年，不允许进入网吧');
        }

// 练习2：检测年份是闰年还是平年（能被4整除且不能整除100的伪闰年或能整除400就是闰年）
        var year = prompt('请输入要检测的年份');
        if(year %4 == 0 && year % 100 !=0 ||year % 400 ==0){
            alert(year + '年是闰年');
        } else{
            alert(year + '年是平年');
        }
 // 练习4：判断中奖案例
        var yourname = prompt('请输入你的姓名');
        if (yourname == '刘德华') {
            alert('恭喜你中了5块钱');
        } else {
            alert('你没有中奖');
        }
// 练习5：判断成绩案例
        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');
        }

三元表达式

• 概念：由三元运算符组成的式子称为三元表达式；三元表达式也能做一些简答的条件选择
• 语法结构：

语法结构：条件表达式？ 表达式1： 表达式2：

• 执行思路：如果表达式的值为真，则返回表达式1的值；如果为假，则返回表达式2的值
• 代码示例：

 var num = 10;
 		 //我们知道表达式是有返回值的
        var result = num > 5? '是的' :'不是的';
        console.log(result);//是的

三元表达式案例

 // 数字补0：用户输入的数字小于10，则补0:09， 08；
 //大于10则不补：11,20;
        var num = prompt('请输入一个数字');
        var result = num >= 10? alert(num): alert(0 + num);

分支流程控制switch语句

• 概念：switch语句也是多分支语句，它是基于不同的条件来执行不同的代码；当要针对一系列特定值的选项时，就可以使用switch
• 语法结构：
  
• 执行流程：利用表达式的值和case后面的选项值相匹配，如果匹配上就执行该语句；如果都没有匹配上，就执行default里面的语句
• 代码示例：

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

注意点：

• 开发里面，表达式经常写成变量
• 表达式里变量的值和case里的值相匹配的时候是全等
• 如果当前的case里面没有break，则不会退出switch，继续执行下一个case

switch分支语句案例

• 查询水果：输入不同的水果时，弹出对应的价格；输入没有的水果时，弹出“你买不买吧”；输入西瓜和时，弹出对应的价格并问他买不买
• 代码示例：

var fruit = prompt('请输入想要查询的水果')
        switch (fruit) {
            case '苹果':
                alert('苹果价格是3.5一斤');
                break;
            case '梨子':
                alert('梨子的价格是5块钱一斤');
                break;
            case '葡萄':
                alert('葡萄的价格是15块一斤');
                break;
            case '西瓜':
                alert('两块钱一斤');
            default:
                alert('你买不买吧');
        }

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

课后作业