JavaScript中的流程控制（顺序结构、分支结构、循环结构）

流程控制

1.概念

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

简单的理解：流程控制就是控制代码，按照一定的结构顺序来执行

流程控制的分类：

• 顺序结构
  

• 分支结构
  

• 循环结构
  

2.顺序流程控制

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

3.分支流程控制

3.1 分支结构

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

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

• if语句
• switch语句

3.3 if语句

3.3.1 基本if/简单if结构

语法：

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

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

执行流程

var age = prompt('请输入年龄：');
if(age == 18){
    alert('可以玩整夜的游戏');
}

3.3.2 双分支if结构

语法：

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

执行流程

var age = prompt('请输入年龄：');

if(age >= 18){  //年龄满了18
    alert('你可以通宵打游戏');
} else {
    alert('未成年，进制通宵');
}

3.3.3 多分支if结构

语法：

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

执行流程

var score = prompt('请输入小明的分数：');

	/* if(score == 100){
            alert('奖励手机一部');
        } else if(score >= 90 && score < 100){
            alert('奖励平板电脑一台');
        } else if(score >= 80 && score < 90){
            alert('奖励鼠标一个');
        } else {
            alert('奖励试卷一吨');
        } */

if(score == 100){
    alert('奖励手机一部');
} else if(score >= 90){
    alert('奖励平板电脑一台');
} else if(score >= 80){
    alert('奖励鼠标一个');
} else {
    alert('奖励试卷一吨');
}

3.3.4 练习

// 需求1：输入年龄（prompt），如果年龄在18岁或以上alert弹出“我爱吃榴莲炒臭豆腐”，否则输出“我爱写作业”
var age = prompt('请输入年龄:');
if(age >= 18){
    alert('我爱吃榴莲炒臭豆腐');
} else {
    alert('我爱写作业');
}

// 需求2：输入年份（如：2024）判断是否是闰年。  
//       闰年能被4整除且不能整除100的为闰年，或者能被400整除的也是闰年   (2024是闰年，1901年不是闰年)

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

4.三元表达式

三目运算

语法：

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

执行流程：

• 如果表达式1的结果为true，则返回表达式2的值，如果表达式1的结果为false，则返回表达式3的值
• 简单理解：就类似于if … else… (双分支)。可以认为就是双分支的简写

//需求：输入年龄，判断是否18或以上，如果是18或以上则允许通宵
var age = prompt('请输入年龄：')

//1.通过 if...else...
/* if(age >= 18){
            alert('允许通宵');
        } else {
            alert('不允许通宵');
        } */

//2.通过三元运算符
var result = age >= 18 ? '允许通宵' : '不允许通宵';
alert(result);

//需求：用户输入0~59之间的一个数字，如果数字小于10，则在这个数字前面补0
var time = prompt('请输入0~59之间的一个数字：');

var result = time < 10 ? '0' + time : time;
alert(result);

5.switch流程控制

• switch: 开关
• case：案例/例子
• break：结束

语法：

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

• 表达式的值会与结构中的case的值进行比较
• 如果存在匹配全等（===），则该case关联的代码会被执行，并在遇到break就停止，整个switch语句代码执行结束
• 如果所有的case的值都和表达式的值不匹配 ，则执行default里面的代码
• **注意：**执行case里面的语句的时候，如果没有break，则继续执行下一个case中的语句

//输入一个数字，如果输入的是1：苹果   输入2：香蕉   输入3：葡萄  输入4：西瓜   输入其它数字提示输入错误
var num = prompt('请输入一个数字：')

switch(num){
    case '1':
        alert('您兑换的奖品是苹果');
        break;
    case '2':
        alert('您兑换的奖品是香蕉');
        break;
    case '3':
        alert('您兑换的奖品是葡萄');
        break;
    case '4':
        alert('您兑换的奖品是西瓜');
        break;
    default:
        alert('您输入的数字有误！')
        break;
}

var num = parseInt(prompt('请输入数字：'));
switch(num){
    default:
        console.log('others');
        break;
    case 2:
        console.log('2222222')
        break;
    case 1:
        console.log('111111')
        break;

    case 3:
        console.log(3333333)
        break;
}

6.switch和if的区别

• 一般情况下，他们两个语句可以相互替换
• switch…case 语句通常处理case为比较确定的值得情况，而if…else语句更加灵活，常用于范围判断（大于、小于等于等范围）
• sitch语句进行判断后直接执行到程序得条件语句效果更高。而if…else语句有几种条件，就得判断多次
• 当分支比较少得时候，if…else语句执行得效率要比switch语句效率要高
• 当分支比较多得时候，switch语句执行得效率比较高，而且结构更加清晰。

//需求：100分奖励手机一部，90~100奖励键盘一个  60~90奖励鼠标一个  60分以下奖励一顿试卷
var score = parseInt(prompt('请输入分数：'));
//1.if
	/* if(score == 100){
            alert('奖励手机一部');
        } else if(score >= 90){
            alert('奖励键盘一个');
        } else if(score >= 60){
            alert('奖励鼠标一个');
        } else {
            alert('奖励一吨试卷');
        } */

//2.switch
switch(parseInt(score / 10)){
    case 10:
        alert('奖励手机一部');
        break;
    case 9:
        alert('奖励键盘一个');
        break;
    case 8:
    case 7:
    case 6:
        alert('奖励鼠标一个');
        break;
    default:
        alert('奖励一吨试卷');
}

7.循环流程控制

7.1for循环

语法结构

for(初始化变量;条件表达式;操作表达式){
    
}

• 初始化变量：通常用于初始化一个计数器，该表示是中可以使用var关键字声明一个新的变量，这个变量用来帮助我们记录循环次数
• 条件表达式：用于确定每一次循环是否能被执行，如果结果为true就继续循环，否则就退出循环
• 操作表达式：用于确定每一次循环是否能被执行，如果结果是true就继续执行，否则就退出循环

执行过程

• 第一步：变量的初始化时最先开始执行的，而且在整个循环中只执行依次
• 第二步：判断条件是否成立，如果为true则执行循环中的内容，为false则直接跳出循环
• 第三步：如果条件表达式为true，则执行循环中的内容，在执行完成循环中的内容后，进入到操作表达式，对计数器进行更新
• 第四步：计算器更新完成后，重新回到条件表达式，按照上面的第二步和第三步重复执行

断点调试

断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行的时候就会停住，然后你可以一步一步往下调试，调试过程中可以看到各个变量的当前值，出错的话，调试到出错的代码就会显示错误，停下。断点调试可以帮助我们观察程序运行的过程。

断点调试的流程：

• 在浏览器中按F12 > source > 找到需要调试的文件 > 在程序的某一行设置断点
• watch：监视，可以通过watch设置需要查看的变量，监视它的变化（非常的常用）
• 按下F10程序单步执行，让程序一步一步的执行，这个时候，我们观察watch中的变量值的变化

案例

需求1：输入数字，根据输入的数字输出多少次“我爱中国”

// 需求1：输入数字，根据输入的数字输出多少次“我爱中国”
var num = prompt('请输入次数：');
for(var i = 1; i <= num; i++){
    console.log('第' + i + '次,我爱中国');
}

需求2：计算从1到100的和

var sum = 0; //1到100的和
for(var i = 1; i <= 100; i++){
    sum = sum + i;  //1.sum = 0 + 1;  2.sum = 1 + 2   3.sum =  1 + 2  + 3,....
}
console.log(sum)

需求3：求1到100中所有偶数的和

//需求3：求1到100中所有偶数的和

var sum = 0; //和
for(var i = 1; i <= 100; i++){
    if(i % 2 == 0){
        sum += i;
    }
}
console.log('1到100的偶数和为：' + sum);

需求4：打印输出所有的三位数中的水仙花数（水仙花数：各个位上的数的三次方之和等于它本身）

var a = 123;

​ console.log(‘个位数:’,a % 10)

​ console.log(‘十位数:’,parseInt(a / 10) % 10)

​ console.log(‘百位数’,parseInt(a / 100))

​ if(a % 10 * a%10 * a %10 + parseInt(a / 10) % 10 * parseInt(a / 10) % 10 * parseInt(a / 10) % 10 +

​ parseInt(a / 100) * parseInt(a / 100) * parseInt(a / 100) === a){

​ console.log(a)

​ }

//需求4：打印输出所有的三位数中的水仙花数（水仙花数：各个位上的数的三次方之和等于它本身）

for(var i = 100; i<= 999; i++){
    //获取到个位、百位和十位数字
    var gewei = i % 10;
    var baiwei = parseInt(i / 100);
    var shiwei = parseInt(i / 10) % 10;
    //判断是否为水仙花数
    if(gewei * gewei * gewei + shiwei * shiwei * shiwei + baiwei * baiwei * baiwei == i){
        console.log(i);
    }
}

需求：求1~100之间所有能被3整除的数字之和

需求：弹出输入框输入总的班级人数，依次输入学生的成绩，并计算学生的总成绩、平均成绩。（最高分和最低分）

// 需求：弹出输入框输入总的班级人数，依次输入学生的成绩，并计算学生的总成绩、平均成绩。（最高分和最低分
var num  = parseInt(prompt('请输入班级人数：'));
var sum = 0; //总分
var avg = 0;//平均分
//有多少人，就循环录入多少次分数
for(var i = 1; i <= num; i++){
    var score = parseInt(prompt('请输入第' + i + '位学生的分数：'))
    sum += score;//计算总分
}
//等录入完成，总分算出来后，计算平均分
avg = sum / num;

console.log('总分是：' + sum + '平均分是：' + avg)

7.2 双重for循环

概述

循环嵌套。是指在一个循环语句中再定义一个循环语句的语法结构。例如for循环语句中，可以再嵌套另一个for循环，这样的for循环就是我们所说的双重for循环

语法

for(外循环的初始化;外循环的条件;外循环的操作表达式){
    for(内循环的初始化;内循环条件;内循环操作表达式){
        //需要执行的代码
    }
}

• 内层循环可以看作是外城循环的循环体语句。（外层循环执行一次，内层循环执行一整轮）
• 内层循环执行的顺序也要遵循for循环的执行顺序

打印三角形

☆
☆☆
☆☆☆
☆☆☆☆
☆☆☆☆☆

var str = '';
//外层循环：负责行
for(var i = 1; i <= 5; i++){
    //内层循环：负责打印五角星
    for(var j = 1; j <= i; j++){
        str += "☆";
    }
    str += '\n'; //换行
}

console.log(str)

打印九九乘法表

var str = '';
//外层循环：负责行
for(var i = 1; i <= 9; i++){
    //内层循环：负责打印五角星
    for(var j = 1; j <= i; j++){
        str += j + "✖" + i + '=' +  i*j + "\t";
    }
    str += '\n'; //换行
}

console.log(str)

for循环小结

• for循环可以重复执行某些相同的代码
• for循环可以重复执行某些不同的代码，因为我们有计数器
• 随着需求的增加，双重for循环可以做更多，更好看的效果，外城循环一次，内层for循环全部执行
• for循环时循环条件和数字相关的循环

7.3while循环

语法结构

while(循环条件){
      //循环代码
}

执行过程

• 先执行初始化条件，第一步：执行条件表达式，如果结果为true，则执行循环体中的代码，如果为false则直接退出循环，执行循环后面的代码
• 第二步：执行更新循环变量，再次回到循环条件判断，再按照第一步中的执行

//打印1到10
var i = 1; 
while(i <= 10){
    console.log(i);
    i++;
}

**注意：**使用while循环的时候一定要注意它必须要有退出条件，否则会成为死循环。

while循环案例

需求2：计算从1到100的和

//需求2：计算从1到100的和
var sum = 0; //和
var i = 1;  //初始化循环变量
while(i <= 100){    //循环条件
    sum += i;

    i++;//更新循环变量
}
console.log('一到100的和为：' + sum)

需求3：求1到100中所有偶数的和

//需求3：求1到100中所有偶数的和
var sum = 0; //1到100的偶数和
var i = 1;
while(i <= 100){

    if(i % 2 == 0){
        sum += i;
    }

    i++;
}
console.log('偶数和为：' + sum)

7.4do…while循环

语法结构

do {
    //循环体代码
} while(条件表达式);

执行流程

• 先执行一次循环体中的代码
• 再执行条件表达式，如果为true，则继续执行循环体中的代码，如果为false，则退出循环执行循环后的代码

**注意：**先执行，后判断。do…while循环至少会执行一次

do…while循环案例

需求2：计算从1到100的和

//需求2：计算从1到100的和
var sum = 0; //1到100的和
var i = 1;
do{
    sum += i;//求和
    i++;
}while(i <= 100);
console.log('1到100的和为：' + sum)

需求3：求1到100中所有偶数的和

//需求3：求1到100中所有偶数的和
var sum = 0; //1到100所有偶数的和
var i = 1;
do{
    if(i % 2 == 0){
        sum += i;
    }
    i++;
}while(i <= 100);
console.log(sum)

8.三种循环的区别

• 对于循环次数确定的循环，推荐使用for循环
• 对于循环次数不确定的循环，推荐使用while循环
• 对于必须要执行一次的代码，我们推荐使用do…while循环
• 实际开发中90%以上用到的时for循环

9.break和continue

9.1 continue

continue关键字用于立即跳出本次循环，继续进入下一次循环（本次循环中continue之后的代码不会被执行）

如：吃5个包子，第三个包子有问题扔掉，继续吃第四个和第五个包子。

9.2 break

break关键字用于立即结束循环

9.3 练习

需求1：求1~100之间，除了能被7整除之外的数的和

//需求1：求1~100之间，除了能被7整除之外的数的和
	/*
        var sum = 0;
        for(var i = 1; i <= 100; i++){
            if(i % 7 != 0){
                sum += i;
            }
        }
        console.log(sum); //4315
        */
//要求用continue
var sum = 0;
for(var i = 1; i <= 100; i++){
    if(i % 7 == 0){ //如果能被7整除，则不加
        continue;
    }
    sum += i;
}
console.log(sum); //4315

需求2：输入用户名和密码，如果用户名和密码分别为（admin，123）则提示登录成功，否则提示还剩余几次输入机会，如果3次都输入错误，则提示你没有机会了

for(var i = 1; i <= 3; i++){
    var name = prompt('请输入用户名：');
    var pwd = prompt('请输入密码：');
    if(name == 'admin' && pwd == '123'){
        console.log('登录成功');
        break;//结束整个循环
    } else {
        console.log('登录失败,还剩下' + (3 - i) + '次机会');
    }
}