JavaScript前端开发与实例教程（微课视频版）最新章节_崔仲远著

2.4　流程控制

流程控制实现程序流程的选择、循环、跳转等功能，流程控制语句对编程语言起着至关重要的作用，程序的执行流程直接决定最后的结果。开发者只有清楚每条语句的执行流程，才能选择合适的流程控制语句来实现想要的功能。合理的流程控制结构能够使程序代码更加清晰，并减少代码冗余，有利于提高开发效率。本节主要介绍JavaScript中的流程控制结构。

2.4.1　选择结构

选择结构根据条件的不同，执行不同的分支语句，从而得到不同的结果。例如，若学生成绩大于60，则该学生的成绩及格，否则成绩不及格。若淘宝用户的积分在4～250，则其信用等级为“红心”；在250～10000，信用等级为“蓝钻”等。

选择结构包括if条件语句和switch条件语句两种。

1. if条件语句

在JavaScript中，if条件语句可分为if、if…else、if…else if…else三种。

（1）if语句

if语句的语法格式如下：

if(条件表达式){
    代码块;
}

如果条件表达式的结果为真，则执行代码块。

【例2-7】判断闰年

var year = 2020;
//能被4整除且不能整除100或者能够被400 整除的是闰年
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
    console.log (year+'年是闰年');
}

例2-7在Chrome浏览器控制台中的运行结果为：

2020年是闰年

（2）if…else语句

if…else语句的语法格式如下：

if(条件表达式){
    代码块1;
}else{
    代码块2;
}

if…else语句在条件表达式的结果为真时，执行代码块1，否则执行代码块2。

【例2-8】输出较大的数字

var num1 = 10;
var num2 = 20;
if (num1 > num2) {
    console.log("较大的数是" + num1);
}else {
    console.log("较大的数是" + num2);
}

例2-8在Chrome浏览器控制台中的运行结果为：

较大的数是 20

（3）if…else if…else语句

if…else语句只能用于包含两个分支结果的情况，当分支结果更多时，可以使用if…else if…else语句。

【例2-9】判断会员积分等级

某电商网站根据用户积分数量共设定四个会员等级：积分不超过1000分为普通会员；积分大于1000分且不超过5000分为黄金会员；积分大于5000分且不超过10000分为铂金会员；积分大于10000分为超级会员。现有一用户积分为3000分，判断其会员等级。

var integral = 3000;
if (integral <= 1000) {
    console.log("普通会员");
} else if (integral <= 5000) {
      console.log("黄金会员");
} else if (integral <= 10000) {
    console.log("铂金会员");
} else {
    console.log("超级会员");
}

例2-9在Chrome浏览器控制台中运行结果为：

黄金会员

【例2-10】根据空气质量指数进行生活建议

AQI（Air Quality Index，空气质量指数）是根据空气中的各种成分占比，将监测的空气浓度简化为单一的概念性数值形式，它将空气污染程度和空气质量状况分级表示，适合于表示城市的短期空气质量状况和变化趋势。空气质量指数、对应等级及相关建议如表2-12所示。

表2-12　空气质量指数、对应等级及相关建议

案例代码如下：

var x = prompt("请输入AQI数值:");
var s = '';
if (x < 0)
    console.log("输入错误！");
else if (x <= 50)
    s = "优，空气清新，参加户外活动。"
else if (x <= 100)
    s = "良，可以正常进行户外活动。"
else if (x <= 150)
    s = "轻度污染，敏感人群减少体力消耗大的户外活动。"
else if (x <= 200)
    s = "中度污染，对敏感人群影响较大，减少户外活动。"
else if (x <= 300)
    s = "重度污染，所有人适当减少户外活动。"
else
    s = "严重污染，尽量不要留在户外。"
console.log("空气质量为" + s);

例2-10中，变量x保存用户输入的值，根据用户输入的AQI数值不同，给变量s赋相应的字符串值，最后在控制台中输出。当用户输入320时，例2-10在Chrome浏览器控制台中输出结果为：

空气质量为严重污染，尽量不要留在户外。

2. switch语句

当表达式的值可以进行列举时，可以采用switch语句，其语法格式为：

switch(变量或表达式){
    case 常量1:
        语句块1;
        break;
        case 常量2:
        语句块2;
        break;
        ...
    case 常量n:
        语句块n;
        break;
    default:
        语句块n+1;
}

switch语句根据变量或者表达式的值，从上往下依次与每个case后面的常量值进行严格相等的比较，直至找到与变量或表达式严格相等的常量，进而执行该分支下的语句块。如果没有匹配的case分支，则执行default分支。

需要注意的是：

（1）每个case分支的语句块后面都会带一个break语句，否则，执行完当前case后，会继续执行下一个case分支。

（2）switch中的表达式与case语句中的取值是严格相等模式。

提示： switch语句适合处理判断分支较多的情况，代码可读性好。if语句适合处理判断分支较少的情况。

【例2-11】判断用户角色

在线考试系统中支持三种角色登录，分别是：管理员、教师、学生，不同的角色登录后看到的系统页面不同，能够使用的功能也不尽相同。使用switch语句可以根据角色不同，显示不同的页面。项目开发中，可通过数字标识不同的角色，本例分别用数字0、1、2代表管理员、教师、学生角色。

var role = 1;
switch (role) {
    case 0:
        console.log("显示管理员角色页面");
        break;
    case 1: // 此处如果是字符串"1"，则不严格相等，会执行default语句
        console.log("显示教师角色页面");
        break;
    case 2:
        console.log("显示学生角色页面");
        break;
    default:
        console.log("没有访问权限");
}

例2-11在Chrome浏览器控制台中的运行结果为：

显示教师角色页面

2.4.2　循环结构

对于一些需要反复执行并且有规律的代码，可以采用循环结构进行编写。循环结构能够使代码结构更加清晰，有效减少重复代码。循环结构包含for、while、do…while三种形式。

1. for循环

当循环次数固定时，一般采用for循环结构。for循环结构的语法格式为：

for (初始化表达式; 结束条件表达式; 迭代表达式) {
    循环代码块;
}

初始化表达式只在第一次循环开始前执行一次。结束条件表达式在每次循环开始前计算一次值，如果值为true，则继续循环并执行代码块，否则终止循环。迭代表达式在每次循环后执行一次。

【例2-12】求100至1000之间的自然数之和

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

例2-12在Chrome浏览器控制台中的运行结果为：

for循环语句还可以结合条件语句实现更加复杂的功能。我国古代数学家张丘建先生在《算经》中提出了用“一百铜钱购买一百只鸡”的经典算术问题。如果手工计算，庞大的计算量无异于愚公移山，而通过循环结构编写程序，计算机成功执行立即得到结果。因此，我们要学会利用先进的手段解决问题，提高创新能力，用所学知识去解决现实中的问题。

【例2-13】一百铜钱购买一百只鸡

鸡翁一，值钱五；鸡母一，值钱三；鸡雏三，值钱一；百钱买百鸡，则翁、母、雏各几何？

    for (var i = 0; i <= 100; i++)
        for (var j = 0; j <= 100; j++)
            for (var k = 0; k <= 100; k++) {
                if (5 * i + 3 * j + k / 3 == 100 && k % 3 == 0 && i + j + k == 100) {
                    console.log("可以买" + i + "只公鸡，" + j + "只母鸡," + k + "只小鸡
");
                }
             }

例2-13在Chrome浏览器控制台中运行结果，如图2-9所示。

图2-9　【例2-13】输出结果

2. while循环

while循环根据循环条件的真假决定是否执行循环体，语法格式为：

while (循环条件) {
   循环代码块;
}

while循环在每次循环前先判断循环条件，如果条件为真，则执行代码块，否则跳出循环。

【例2-14】一张纸的厚度大约是0.1毫米，假设这张纸可以无限次对折，计算对折几次可以超过珠峰（8844.43米）

var h = 0.1;
var count = 0;  //折叠次数
while (h < 8844430) {
   h = h * 2;
   count++;
}
console.log(count);

例2-14在Chrome浏览器控制台中的运行结果为：

3. do … while循环

do…while循环是while循环的变种。在do…while循环中，无论循环条件是否为真，都会至少执行一次代码块。do…while循环的语法格式为：

do {
    循环代码块;
} while (循环条件);

【例2-15】猜数字游戏

var random = 8;
do {
    var num = prompt('你来猜？ 请输入1～10之间的一个数字');
    if (num > random) {
        console.log('输入的值'+num+'猜大了');
    } else if (num < random) {
        console.log('输入的值'+num+'猜小了');
    } else {
        console.log('输入的值'+num+'猜对了');
    }
} while (num != random);

例2-15中，变量random代表用户要猜的一个数字，值为8。变量num保存用户输入的值，循环条件为“num != random”。在循环体中，首先弹出输入框获取用户输入，然后判断输入值num和random的关系，如果相等则循环结束，输入框消失。在输入框中依次输入2、9和8，例2-15在Chrome浏览器控制台中运行结果，如图2-10所示。

图2-10　【例2-15】运行结果

while和do…while的区别是：while循环首先判断循环条件是否成立，条件不满足不执行循环体；do…while循环先执行循环体，再判断循环条件是否成立，即使条件不成立，也执行了一次循环体。示例如下：

var n = 10;
while (n < 10) {
   console.log(n);
}

运行结果：

无输出：

var n = 10;
do {
   console.log(n);
} while (n < 10);

运行结果：

在上述示例左右两个代码块中：n的初值相同，循环条件和循环体也相同，但结果不同。

4. 循环跳出语句

只要循环条件成立，循环语句便会一直执行下去。如果希望在循环过程中跳出循环，可以使用循环跳出语句。JavaScript循环跳出语句包括break和continue两种。

break语句可以直接跳出for、while和do…while循环，当有多层循环嵌套时，break语句只能跳出离得最近的一层循环。

【例2-16】判断给定数字是否为素数

var num = 23517;
var flag = true;
for (var i = 2; i < num / 2; i++) {
    if (num % i == 0) {
        flag = false;
        break;
    }
}
if (flag) {
    console.log("该数字是素数");
} else {
    console.log("该数字不是素数");
}

例2-16在Chrome浏览器控制台中的运行结果为：

该数字不是素数

例2-16中只要发现一个可以整除该数字、且大于1的自然数，即可证明该数字不是素数，程序也没必要继续执行下去，所以用break语句直接跳出for循环。

continue语句只能跳出本次循环，并继续进入下一次循环。

【例2-17】输出10以内的奇数

for (var i = 1; i <= 10; i++) {
    if (i % 2 == 0) continue;
        console.log(i);
}

例2-17在Chrome浏览器控制台中的运行结果为：

2.4 流程控制

2.4.1 选择结构

2.4.2 循环结构

2.4　流程控制

2.4.1　选择结构

2.4.2　循环结构