本文主要是介绍JavaScript知识点整理（五）- 流程控制，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、流程控制

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

流程控制的主要三种结构

• 顺序结构
• 分支结构
• 循环结构

二、顺序流程控制

按照代码的先后顺序，依次执行

三、分支结构

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

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

• if语句
• switch语句

3.1 if语句

3.1.1 if语法结构

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

3.1.2 执行流程

3.1.3 案例练习 - 简易年龄验证案例

弹出输入框，要求用户输入年龄，如果年龄大于等于18岁，则年龄验证成功，解除游戏青少年时长限制

    var age = prompt('请输入您的年龄：');
    if(age >= 18){
        alert('解除游戏青少年时长限制');
    }

3.2 if else语句（双分支语句）

3.2.1 语法结构

    // 1. 语法结构
    if(条件表达式){
        // 执行语句1
    } else {
        // 执行语句2
    }
    // 2. 执行思路 如果表达式结构为真，那么执行语句1，否则执行语句2

3.2.2 执行流程

3.2.3 案例练习 - 判断闰年

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

能被4整除且不能整除100的为闰年

    var year = prompt('请您输入年份：');
    if(year % 4 == 0 && year % 100 !=0){
        alert('您输入的年份是闰年');
    } else {
        alert('您输入的年份是平年');
    }

3.3 if else if（多分支语句）

3.3.1 语法结构

    // 1. 语法结构
    if (条件表达式1){
        // 语句1;
    } else if (条件表达式2) {
        // 语句2;
    } else if (条件表达式3) {
        // 语句3;
    } else {
        // 最后的语句;
    }

3.3.2 执行流程

3.3.3 注意事项

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

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

（3）else if中间有个空格

3.3.4 案例练习 - 判断成绩案例

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

1. 85分（含）以上，输出：A
2. 70分（含）~85分（不含），输出：B
3. 60分（含）~70分（不含），输出：C
4. 60分（不含）以下，输出：D

    var score = prompt('请您输入分数:');
    if (score >= 85) {
        alert('您的成绩等级为：A');
    } else if (score >= 70) {
        alert('您的成绩等级为：B');
    } else if (score >= 60) {
        alert('您的成绩等级为：C');
    } else {
        alert('您的成绩等级为：D');
    }

3.4 三元表达式

有三元运算符组成的式子成为三元表达式

3.4.1 语法结构

// 条件表达式 ? 表达式1 : 表达式2

3.4.2 执行思路

如果条件表达式结果为真，则返回 表达式1 的值；如果表达式结果为假，则返回 表达式2 的值

3.4.3 案例练习 - 数字补0

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

    var time = prompt('请您输入一个 0~59 之间的一个数字');
    var result = time < 10 ? '0' + time : time;
    alert(result);

3.5 switch语句

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

3.5.1 语法结构

    switch(表达式) {
        case value1:
            执行语句1; // 等于 value1 时要执行的代码
            break;
        case value2:
            执行语句2; // 等于 value2 时要执行的代码
            break;
        ... // 可设置多个分支
        default:
            执行最后的语句; // 不等于 value 时要执行的代码
    }

3.5.2 执行思路

利用我们表达式的值和case后面的选项值相匹配

如果匹配上，就执行该case里面的语句

如果都没有匹配上，就执行default里面的语句

3.5.3 注意事项

（1）表达式我们通常写成变量

（2）表达式内变量的值和case里面的值相匹配的时候是全等的，必须是值和数据类型一致才可以

（3）break 如果当前的case里面没有break，则不会退出switch，是继续执行下一个case

3.5.4 案例练习 - 查询水果

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

    var fruit = prompt('请您输入查询的水果:');
    switch (fruit) {
        case '橘子':
            alert('橘子的价格是 5元/斤');
            break;
        case '苹果':
            alert('橘子的价格是 3元/斤');
            break;
        default:
            alert('没有此水果');
    }

3.6 switch 和 if else if 区别

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

四、循环结构

4.1 循环目的

在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句

4.2 JS中的循环

主要三种类型的循环语句：

• for循环
• while循环
• do…while循环

4.3 for循环

4.3.1 语法结构

for循环主要用于把某些代码循环若干次，通常跟计数有关

语法结构：

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

• 初始化变量：就是用var声明的一个普通变量
• 条件表达式：就是用来决定每一次循环是否继续执行的代码
• 操作表达式：是每次循环最后执行的代码

4.3.2 for循环的执行过程

1. 首先执行里面的计数器变量 var i = value，但这句只在for 里面执行一次
2. 去 value1 <= i <= value2 来判断是否满足条件，如果满足条件就去执行循环体，不满足条件退出循环
3. 最后去执行 i++，i++是单独写的代码 ，第一轮结束
4. 第二轮开始，接着去执行value1 <= i <= value2，如果满足条件就去执行循环体，不满足条件退出循环

4.3.3 案例练习 - 求学生成绩

要求用户输入班级人数，之后依次输入每个学生的成绩，最后打印出该班级总的成绩和平均成绩

4.3.4 双重for循环执行过程

嵌套循环是指一个循环语句中再定义一个循环语句的语法结构

    var num = prompt("请输入班级的总人数:");
    var sum = 0;
    var average = 0;
    for (var i = 1; i <= num; i++){
        var score = prompt('请您输入第' + i + '个学生成绩');
        sum = sum + parseFloat(score);
    }
    average =sum / num;
    alert('班级总成绩:' + sum + '||' + '班级平均分:' + average);

4.3.5 双重for循环语法结构

   for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式){
        for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式){
            // 执行语句
        }
    }

4.3.6 案例练习 - 打印九九乘法表

    var str = '';
    for (var i = 1; i <= 9; i++){ // 外层循环控制行数
        for (var j = 1; j <= i; j++){ // 里层循环控制每一行的个数 j <= i
            str += i + 'x' + j + '=' + i * j;
        }
        str += '\n';
    }
    console.log(str);

4.4 while循环

4.4.1 while循环语法结构

    while (条件表达式) {
        // 循环体
    }

• 执行思路：当条件表达式结果为true，则执行循环体，否则退出循环
• 里面应该也有计数器，初始化变量
• 里面应该也有操作表达式，完成计数器的更新，防止死循环

4.4.2 案例练习

计算 1~100之间所有的整数的和

    var sum = 0;
    var i = 1;
    while (i <= 100){
        sum += i;
        i++
    }
    console.log(sum);

4.5 do while循环

do…while语句其实是while语句的一个变体。该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环

4.5.1 do while循环语法结构

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

• 执行思路：跟while不同的地方在于do while先执行一次循环体，再判断条件。如果条件表达式结果为真，则继续执行循环体，否则退出循环
• 注意：do…while循环语句至少执行一次循环体

4.5.2 案例练习

计算1~100之间所有整数的和

    var sum = 0;
    var i = 1;
    do {
        sum += i;
        i++
    } while (i <= 100)
    console.log(sum);

4.6 continue关键字

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

4.6.1 案例练习

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

    var sum = 0;
    for (var i = 1; i <= 100; i++){
        if (i % 7 == 0){
            continue;
        }
        sum += i;
    }
    console.log(sum);

4.7 break关键字

break关键字用于立即跳出整个循环（循环结束）

这篇关于JavaScript知识点整理（五）- 流程控制的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！