[TOC] # **流程控制** &emsp;&emsp;流程控制语句是区分编程语言和非编程语言的标志。流程控制语句可以控制代码的执行流程或顺序,JavaScript中的流程控制结构有三种,分别是顺序结构,分支结构,循环结构。 <br> ## **顺序结构** &emsp;&emsp;从上到下执行的代码就是顺序结构,程序默认就是由上到下顺序执行的,如图: 顺序结构流程图 ![](images/顺序结构.png) <br> <br> ## **分支结构** 分支结构流程图 ![](images/分支结构.png) <br> ### **if 语句** &emsp;&emsp;if 语句作用:根据判断条件的结果(true或false),来决定执行哪一块代码。可分为以下三种结构。 <br> 1. **if 语句,如果 if 条件表达式成立,则执行分支体** **语法格式:** >[success] // 如果...那么... > if (/* 条件表达式 */) { > // 分支体 语句 > } &emsp;&emsp;需求:定义一个用于变量存储数值,判断这个变量是否是偶数 ``` var num = 8; if (num % 2 === 0) { console.log('偶数:' + num); } ``` <br> 2. **if else,如果 if 条件表达式不成立,则执行else分支体** >[success] //如果...那么... 否则... > if (/* 条件表达式 */){ > // if分支体 语句 > } else { > // else分支体 语句 > } &emsp;&emsp;需求:定义一个变量存储数值,判断这个变量是偶数还是奇数 ``` //能被2整除的是偶数,否则是奇数 var num = 1; if (num % 2 === 0) { console.log(num + ' 是偶数'); } else { console.log(num + ' 是奇数'); } ``` <br> 3. 在**if-else if-else** 结构中,程序从上到下执行,如果某个表达式成立就执行该分支体语句,否则继续往下执行其他分支语句的判断,一旦执行了某个分支体语句,执行完毕该分支语句后,就结束整个 if-else if -else结构,若整个结构中没有成立的条件,则执行最后的else分支体。跟if-else相似,if-else if-else最后总会执行一个分支语句。 ``` //如果...那么...否则如果...那么... if (/* 条件1 */){ // 分支体 语句 } else if(/* 条件2 */){ // 分支体 语句 } else if(/* 条件3 */){ // 分支体 语句 } else { // 最后默认分支体 语句 } ``` <br> &emsp;&emsp;需求:分数转换,把百分制转换成等级 ABCDE,等级划分规则如下: 分数大于100则输出提示 '不在分数范围内!' ; 分数属于 \[ 90, 100 \],则输出 'A' ; 分数属于 \[ 80, 90),则输出 'B' ; 分数属于\[ 70, 80 ) ,则输出 'C' ; 分数属于 \[ 60, 70 ) ,则输出 'D' ; 分数小于60则输出 'E' ; ``` //写法一 var score = 6; if (score > 100) { console.log('不在分数范围内'); }else if (score >= 90 && score <= 100) { console.log('A'); }else if (score >= 80 && score < 90) { console.log('B'); }else if (score >= 70 && score < 80) { console.log('C'); }else if (score >= 60 && score < 70) { console.log('D'); }else { console.log('E'); } //写法二:简化后(推荐) if (score > 100) { console.log('不在等级范围内'); } else if (score >= 90) { console.log('A'); } else if (score >= 80) { console.log('B'); } else if (score >= 70) { console.log('C'); } else if (score >= 60) { console.log('D'); } else { console.log('E'); ``` <br> ### **三元运算符** &emsp;&emsp;三元运算符是具有三个操作数的运算符,三元运算符又叫三目运算符,JavaScript中只有一种三元运算符。当if-else语句要返回一个结果时,可以使用三元运算符替换。 &emsp;&emsp;格式如下: >[success] >表达式1 ? 表达式2 : 表达式3 >是对if……else语句的一种简化写法 >三元运算符中的操作数是一个表达式的运算结果,该结果是布尔类型,运算过程为: >如果表达式1结果为true,则返回表达式2的结果; >否则(表达式1结果为false)返回表达式3的结果。三元运算符又称三目运算符。 需求: 1. 定义一个变量存储年龄,判断这个年龄是否满18岁 ``` var age = 16; //console.log(age >= 18 ? '成年' : '未成年'); var result = age >= 18 ? '成年' : '未成年'; console.log(result); ``` 2. 定义两个变量存储数值,求这两个数中的最大值 ``` var num1 = 8; var num2 = 6; var max = num1 > num2 ? num1 : num2; console.log(max); ``` <br> ### **switch语句** &emsp;&emsp;switch是分支结构的一种语句,它是通过判断表达式的结果是否等于case语句的常量,来执行相应的分支体的。与if语句不同的是,switch语句有以下两个特点: 1. switch语句只能做值的相等判断,而if语句可以做值的范围判断;​ 2. switch语句做值的相等判断时,使用全等运算符 ===; 3. 在实际开发中,if语句可以代替switch语句。 >[success] switch (表达式) { > case 常量1: > [语句;] > [break;] > [case 常量2:] > [语句;] > [break;] > ... > [case 常量n:] > [语句;] > [break;] > [default:] > [语句;] > [break;] > } &emsp;&emsp;需求:定义一个变量存储星期,使用switch语句判断变量的值是星期几,并输出对应的星期。 ``` var day = 7; switch (day) { case 1: console.log('星期一'); break;//跳出switch分支结构 case 2: console.log('星期二'); break; case 3: console.log('星期三'); break;//跳出switch分支结构 case 4: console.log('星期四'); break; case 5: console.log('星期五'); break;//跳出switch分支结构 case 6: console.log('星期六'); break; case 7: console.log('星期日'); break; default: console.log('不在星期范围内'); } //注意:switch语句在判断值相等的时候,使用的是全等运算符(即 ===),全等运算符要求变量的值和类型都相等才相等。 ``` <br> ### **布尔类型的隐式转换** &emsp;&emsp;流程控制语句会把括号中的表达式的值隐式转换(自动转换)成布尔类型,然后才使用转换后的结果作判断。除了流程控制语句的表达式,一元运算符 "!" 也会将值隐式转换成布尔类型。 ``` //1、在流程控制中使用的隐式转换 var num = 0; if(num){ //做了隐式转换 console.log(num); } //2、在运算符中的隐式转换 var str = ''; var isRight = !!str; console.log(isRight); ``` >[info]注意五种特例:0,' ',NaN,undefined,null,转换成布尔类型的结果都是false。 <br> <br> ## **循环结构** &emsp;&emsp;在JavaScript中,循环是指重复地做一件事情,JavaScript中的循环语句有三种,while循环语句、do-while循环语句和for循环语句。 ![](images/循环结构.png) <br> ### **while语句** &emsp;&emsp;while语句执行流程图 ![](images/while语句执行流程图.png) &emsp;&emsp;语法格式: >[success] // 当循环条件为true时,执行循环体, > // 当循环条件为false时,结束循环。 > while (循环条件) { > //循环体 > } 注意:开发中避免死循环! ``` var bool = 1; while (bool){ console.log('死循环'); } ``` 需求 1、编写while循环代码,输出1-100之间的所有整数 ~~~ var num = 1; while (num<=100){    console.log(num);    //num增加1    //num = num + 1;    // num += 1;    num++ ; } ~~~ 2、编写while循环代码,计算1-100之间的所有整数和需求分析: (1)定义两个变量,一个存储所有整数,一个存储所有整数和,如 num,sum (2)在循环中把每个整数加到整数和变量中 ~~~ var num = 1; var sum = 0; while (num <= 100) {    // sum = sum + num;    sum += num;    num++ ; } console.log(sum)//5050 ~~~ 3、编写while循环代码,输出100以内 3 的倍数(课堂练习) ~~~ //定义num变量用于记录循环次数 var num = 0; while (num <= 100) {    //判断该数值是否是3的倍数(求余)    if (num % 3 === 0) {        console.log(num);   }    //num自身加1    num++ ; } ~~~ 4、编写while循环代码,输出100以内所有偶数需求分析: (1)判断所有整数是否是偶数,如果是偶数,则输出 ~~~ //定义num变量用于记录循环次数 var num = 0; while (num <= 100) {    //判断该数值是否能被2整除(求余)    if (num % 2 === 0) {        console.log(num);   }    //num自身加1    num++ ; } ~~~ 5、编写while循环代码,输出100以内所有偶数的和需求分析: (1)在while循环中判断一个数是否是偶数,获取到100以内的所有偶数 (2)将所有偶数累加到一个变量中 ~~~ var num = 0;//定义num变量用于记录循环次数 var sum = 0;//定义sum变量用于记录数值的和 while (num < 100) {    //判断该数值是否能被2整除(求余)    if (num % 2 === 0) {        sum += num;   }    //num自身加1    num++ ; } console.log(sum); ~~~ <br> ### **do-while语句** &ensp;&ensp;do-while循环和while循环非常像,二者经常可以相互替代,但是do-while的特点是不管条件成不成立,do循环体都会先执行一次。 do-while执行流程图 ![](images/dowhile执行流程图.png) &ensp;&ensp;语法格式: ``` do { // 循环体; } while (循环条件); ``` &ensp;&ensp;需求: 1、 编写do-while循环代码,计算1-100之间的整数和 ~~~ //初始化变量 var num = 1; var sum = 0; do{//循环体    sum += num;//累加求和    num++ ;//自增 }while (num <= 100);//循环条件 console.log(sum);//输出 ~~~ 2、 编写do-while循环代码,求100以内所有7的倍数的和(课堂练习) ~~~ var num = 1;//循环参数 var sum = 0;//累加结果 do{//循环体    if (num % 7 === 0) {//判断是否是7的倍数:% (取余)        sum += num;//累加操作   }    num++ ;//自增 }while (num <= 100);//循环条件 console.log(sum); ~~~ 3、 编写do-while循环代码,循环输出 '可不可以,和你在一起?',并提示用户输入 '可以/不可以',如果用户输入的值不是'可以' ,则继续循环。否则弹出 '我们就别再分离'。 ~~~ do{ //prompt() 方法用于显示可提示用户进行输入的对话框。    var inStr = prompt('可不可以,和你在一起?', '永远在一起!(可以/不可以)');    console.log(inStr); }while (inStr != '可以'); alert('我们就别再分离!'); ~~~ <br> ### **for语句** &ensp;&ensp;JavaScript的循环结构中,除了while和do-while循环,还有for循环。**while和do-while一般用于循环次数不确定的情况,for循环一般用于循环次数确定的情况。** <br> &ensp;&ensp;for循环执行流程图 ![](images/for循环执行流程图.png) &ensp;&ensp;语法格式: >[success]// for循环括号中表达式之间是用";"号分隔的,千万不要写成"," for (初始化表达式1; 条件表达式2; 自增表达式3) { // 循环体4 } **执行顺序(记住)**:1243 --> 243 --> 243 --> 2......,直到条件表达式 返回 false 就停止循环。编写for循环代码,输出1-100之间的所有整数。 ![](images/for循环执行流程图-代码.png) &ensp;&ensp;需求: 1、编写for循环代码,求1-100之间所有数的和 ~~~ var sum = 0;//定义和变量 for (var i = 0; i <= 100; i++) {//1:步长,每次加1    sum += i;//累加操作 } console.log(sum);//5050 ~~~ 2、编写for循环代码,求1-100之间所有整数和的平均值 思路:先求和,后取平均值 ~~~ var sum = 0; for (var i = 0; i <= 100; i++) {    sum += i;//累加求和 } console.log(sum/100); ~~~ 3、编写for循环代码,求1-100之间所有偶数的和 ~~~ var sum = 0; for (var i = 0; i <= 100; i++) {    if (i % 2 === 0) {//对2取余        sum += i;   } } console.log(sum); ~~~ 4、编写for循环代码,同时求1-100之间所有偶数和奇数的和(课堂练习) 思路:定义两个变量,一个用于存储奇数和,一个用于存储偶数和。 ~~~ var oddSum = 0;//奇数和 var evenSum = 0;//偶数和 for (var i = 0; i <= 100; i++) {    if (i % 2 === 0) {        //偶数        evenSum += i;   }else{        //奇数        oddSum += i;   } } console.log('偶数和为:'+evenSum); console.log('奇数和为:'+oddSum); ~~~ <br> ### **嵌套for循环** &ensp;&ensp;在之前学习的for循环中,我们解决问题是:重复执行某一个操作。如果一个重复的操作需要做N次,此时得使用嵌套循环。 &ensp;&ensp;语法格式: >[success]for (初始化表达式1; 条件表达式2; 自增表达式3) { // 循环体 for (初始化表达式1; 条件表达式2; 自增表达式3) { // 循环体 } } &ensp;&ensp;需求: 1、编写for循环代码,输出10\*10的正方形 在浏览器控制台输出星号是,发现星号叠加起来了,为了解决这个问题,我们引入一个str变量,用于暂存星号,循环结束后再把str变量输出即可。 ![](images/正方形.png) ~~~ // 定义一个变量,用于存储 * var start = ''; // 重复地做for循环操作 for (var j = 0; j < 10; j++) { // 拼接 * 的行数    // 拼接星号    for (var i = 0; i < 10; i++) { // 拼接 * 的个数        start = start + '* ';   }    // 换行    start = start + '\n'; } console.log(start); ~~~ 2、编写for循环代码,输出直角三角形 输出三角形和输出正方形的相似,不同的是三角形每行的列数逐行递减。也就是说,三角形每行输出的星号个数是变化的,因此我们可以在内层循环中,控制星号个数的变量应该逐行减1来实现。 ![ ](images/三角形.png) ~~~ //定义一个变量,用于存储 * var start = ''; //执行十次 '拼接*的行' 操作 for (var j = 10; j > 0; j--) { // '拼接*的行' 操作    // j -> 10 9 8 7 6 5 4 3 2 1 0    for (var i = 0; i < j; i++) { // 拼接*的个数        start = start + '* ';   }    // 换行    start = start + '\n'; } console.log(start); ~~~ 3、编写for循环代码,输出九九乘法表(课后练习) 思路:九九乘法表跟直角三角形的形状是一样的,不同的是,九九乘法表要利用数值相乘,所以循环变量要从1开始,循环中可以使用制表符 \\t 分隔每个等式。 ![](images/九九乘法表.png) ~~~ var start = ''; for (var j = 1; j < 10; j++) {//外层循环:控制行的输出    for (var i = j; i < 10; i++) {//内层循环:控制列的输出        start += j+'*'+i +'='+(j * i)+'\t';//累加*和空格   }    start += '\n';//累加换行 } console.log(start); ~~~ ### **continue和break** &ensp;&ensp;break:立即跳出当前整个循环(注意:如果是多层循环,则跳出当前层循环),即循环结束,开始执行循环后面的代码(直接跳到大括号) &ensp;&ensp;continue:立即跳出当前(本次)循环,继续下一次循环(跳到i++的地方) &ensp;&ensp;需求: 1、求整数20-200之间,第一个能被17整除的数。 使用break终止循环 ~~~ var sum = 0; for (var i = 20; i <= 200; i++) {    if (i % 17 === 0) {        console.log(i)        //使用break终止循环        break;   } } ~~~ >[info] 注意:如果break写在二重循环的内循环中,则当执行break语句时,内循环终止(结束),代码继续往后执行,如果执行的是外循环,外循环又会开启内循环的执行,所以又会再执行内循环的代码,知道外循环执行结束,才往后继续执行。 2、求整数20~200的累加值,但要求跳过所有个位为7的数 使用continue跳过循环 ``` var sum = 0; for (var i = 20; i <= 200; i++) { if (i % 10 === 7) { //使用continue跳过循环 continue; } sum += i; } console.log(sum) ```