1 概念

流程控制就是来控制代码按照一定结构顺序来执行
主要有3种结构

  • 顺序
  • 条件
  • 循环

程序的流程图, 可以通过使用processon在线编辑: ProcessOn
image.png

2 顺序

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

3 条件

根据不同的条件，执行不同的路径代码(执行代码多选一的过程) 从而得到不同的结果

1) if语句

语法
// 条件成立执行代码，否则什么也不做
if (条件表达式) {
// 条件成立执行的代码语句
}
// 条件成立 执行 if 里面代码，否则执行else 里面的代码
if (条件表达式) {
// [如果] 条件成立执行的代码
} else {
// [否则] 执行的代码
}
示例
var age = prompt(‘请输入您的年龄:’);
if (age >= 18) {
alert(‘已成年’);
} else {
alert(‘未成年’);
}

if:

  1.  <script>
  2.         /* 语法
  3.             if(表达式){
  4.                 语句体
  5.             }
  6.             表达式成立执行语句体,不成立就算了
  7.         */
  9.        /* 请输入李凯钱包里的钱,有没有100块,有的话,中午请吃饭,没有就算了 */
  10.        var money = prompt('请输入李凯钱包里的钱')
  11.        //判断
  12.        if(money >= 100){
  13.            alert('中午请吃饭')
  14.        }
  15.     </script>
  16. </body>

if else:

  1. <script>
  2.         /* 语法
  3.             if(表达式){
  4.                 语句体1
  5.             }else{
  6.                 语句体2
  7.             }
  8.             表达式成立执行语句体1,不成立执行语句体2
  9.         */
  11.        /* 请输入李凯钱包里的钱,有没有100块,有的话,中午请吃饭,没有放学别走 */
  12.        var money = prompt('请输入李凯钱包里的钱')
  13.        //判断
  14.        if(money >= 100){
  15.            alert('中午请吃饭')
  16.        }else{
  17.            alert('放学别走')
  18.        }
  19.     </script>

if else if:

  1.  <script>
  2.         /* 语法
  3.             if(表达式2){
  4.                 语句体1
  5.             }else if(表达2){
  6.                 语句体2
  7.             }else if(表达3){
  8.                 语句体3
  9.             }
  10.             .....
  11.             else{
  12.                 最终语句体
  13.             }
  14.             表达式1成立执行语句体1,如果1不成立,再表达式2,成立执行语句体2 ..... 最后都不成立 执行else
  15.         */
  17.        /* 假设李凯今天带了1000元,那么完整的敲诈过程 
  18.             先问他有没有500块   请吃大餐
  19.                        400        中餐
  20.                        300        快餐
  21.                        200        小餐
  22.                        100        泡面
  23.                        <100       放学别走
  24.         */
  25.        var money = prompt('请输入李凯钱包里的钱')
  26.        //判断
  27.        if(money >= 500){
  28.            alert('吃个大餐')
  29.        }else if(money >= 400){
  30.            alert('吃个中餐')
  31.        }else if(money >= 300){
  32.            alert('吃个快餐')
  33.        }else if(money >= 200){
  34.            alert('吃个小餐')
  35.        }else if(money >= 100){
  36.            alert('吃个泡面')
  37.        }else{
  38.            alert('放学别走')
  39.        }
  41.        /* 只会执行满足条件的那个语句体,其他的即使满足也不会执行 */
  42.     </script>

2) switch语句

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

if主要用于范围的判断,swith主要用于等值

  1. switch( 表达式 ){ 
  2.     case value1:
  3.         // 表达式 等于 value1 时要执行的代码
  4.         break;
  5.     case value2:
  6.         // 表达式 等于 value2 时要执行的代码
  7.         break;
  8.     default:
  9.         // 表达式 不等于任何一个 value 时要执行的代码
  10. }
  1. <script>
  2.         /* 
  3.         switch( 表达式 ){ 
  4.             case value1:
  5.                 // 表达式 等于 value1 时要执行的代码
  6.                 break;
  7.             case value2:
  8.                 // 表达式 等于 value2 时要执行的代码
  9.                 break;
  10.             default:
  11.                 // 表达式 不等于任何一个 value 时要执行的代码
  12.         }
  13.         */
  15.        /* 判断一个数是奇数还是偶数 */
  16.        var num = prompt('请输入一个整数')
  17.        //判断
  18.        switch(num%2){
  19.            case 1:
  20.                 alert('奇数')
  21.                 break
  22.            case 0:
  23.                 alert('偶数')
  24.                 break
  25.            default:
  26.                 alert('你输入的不是一个整数')
  27.                 break
  28.        }
  29.     </script>

switch穿透

  1. case value# 后不用break断开, 则会一直执行代码, 直到有break时为止.
  3. 可以发挥穿透的作用, 减少一定量的代码<br />如: "四季"的运用
  1. <script>
  2.         /* 
  3.          需求:从弹框中输入月份,弹出对应的季节  12 1 2 冬季  3 4 5 春节
  4.         */
  6.         var num = prompt('请输入一个月份')
  7.        //判断
  8.        switch(num){
  9.            case '12': 
  10.            case '1':
  11.            case '2':
  12.                 alert('冬季')
  13.                 break
  14.            case '3': 
  15.            case '4':
  16.            case '5':
  17.                 alert('春季')
  18.                 break
  19.            case '6': 
  20.            case '7':
  21.            case '8':
  22.                 alert('夏季')
  23.                 break
  24.            case '9': 
  25.            case '10':
  26.            case '11':
  27.                 alert('秋季')
  28.                 break
  29.            default:
  30.                 alert('你输入的月数有误')
  31.                 break
  32.        } 
  33.     </script>

4 循环

重复多次执行有规律的代码, 可以使用循环来表示, 通过一个变量可以记录第几次循环, 已经循环的总次数

1) for循环

一般语法

  1. for(初始化变量; 条件表达式; 操作表达式 ){
  2.     //循环体
  3. }
  1. <script>
  2.         /* 
  3.             重复的代码比较多,不简洁
  4.             技术含量低,容易被歧视
  5.             不利于统计次数,不利于修改代码
  7.             使用循环解决
  9.             for(初始化语句;条件判断语句;循环增量语句){
  10.                 循环体语句;
  11.             }
  12.         */
  13.         for(var i = 0;i < 66;i++){
  14.             console.log("班主任666");
  15.         }
  16. </script>

示例

  1. // 基本写法
  2. for(var i = 1; i <= 10; i++){
  3.     console.log('媳妇我错了~')
  4. }
  5. // 用户输入次数
  6. var num = prompt('请输入次数:')
  7. for (var i = 1 ; i <= num; i++) {
  8.     console.log('媳妇我错了~')
  9. }

示例

累加求和

  1. var sum = 0
  2. for(var i=1; i<=10; i++) {
  3.   sum += i
  4. }
  5. console.log(sum)

练习

提示用户输入两个数, 计算累加求和

  1. var num1 = parseInt(prompt('请输入第一个数'))
  2. var num2 = parseInt(prompt('请输入第二数'))
  4. var sum = 0
  5. for (var i = num1; i <= num2; i++) {
  6.   sum += i
  7. }
  8. alert('从' + num1 + '到' + num2 + '的和是: ' + sum)

双重循环

在for循环中, 可以使用if和for循环

  1.  <script>
  2.         /*
  3.             ☆☆☆
  4.             ☆☆☆
  5.             ☆☆☆
  6.         */
  7.         /*
  8.         方式一：
  9.          console.log('☆☆☆\n☆☆☆\n☆☆☆\n'); 
  10.          */
  12.         //方式二 循环打印3次 ☆☆☆\n
  13.          /*
  14.             //这种,控制台会自动折叠,没有达到期望的效果
  15.             for(var i = 0 ;i < 3;i++){
  16.              console.log('☆☆☆\n');
  17.          } 
  18.          */
  20.          /* 
  21.          var str = ''
  22.          for(var i = 0 ;i < 3;i++){
  23.              str += '☆☆☆\n';
  24.          }
  25.          console.log(str); 
  26.          */
  28.          //方式三:把里面的☆☆☆\n的也用循环实现
  29.          var str = ''
  30.          for(var i = 0 ;i <8;i++){  //外层控制行数
  31.              for(var j = 0;j < 2;j++){ //内层控制列数
  32.                  str += '☆'
  33.              }
  34.              str += '\n';
  35.          }
  36.          console.log(str); 
  38.          /* 外层循环一次,内层要循环所有次 */
  40.     </script>
  1.  <script>
  2.         /* 
  3.             求 1-10 中奇数和 偶数的和
  4.         */
  5.        var sum1 = 0 //奇数
  6.        var sum2 = 0 //偶数
  8.         for(var i = 1;i <= 10;i++){
  9.             if(i%2 == 0){
  10.                 sum2+=i 
  11.             }else{
  12.                 sum1 += i
  13.             }
  14.         }
  15.         console.log(sum1);
  16.         console.log(sum2);
  18.     </script>

示例

分别求1~100的奇数和, 偶数和

  1. var even = 0;
  2. var odd = 0;
  3. for (var i = 1; i <= 100; i++) {
  4.   if (i % 2 == 0) {
  5.     even = even + i;
  6.   } else {
  7.     odd = odd + i;
  8.   }
  9. }
  10. console.log('1~100 之间所有的偶数和是' + even);
  11. console.log('1~100 之间所有的奇数和是' + odd);

示例

打印3行3列的星星

  1. var star = '';
  2. for (var j = 1; j <= 3; j++) {
  3.     for (var i = 1; i <= 3; i++) {
  4.       star += '☆'
  5.     }
  6.     // 每次满 3个星星 就 加一次换行
  7.     star += '\n'
  8. }
  9. console.log(star);

练习

打印n行m列的星星

  1. // 打印n行m列的星星
  2. var rows = prompt('请您输入行数:');
  3. var cols = prompt('请您输入列数:');
  4. var str = '';
  5. for (var i = 1; i <= rows; i++) {
  6.   for (var j = 1; j <= cols; j++) {
  7.     str = str + '★';
  8.   }
  9.   str += '\n';
  10. }
  11. console.log(str);

示例

打印9*9乘法表

  1. var str = '';
  2. for (var i = 1; i <= 9; i++) { // 外层循环控制行数
  3.   for (var j = 1; j <= i; j++) { // 里层循环控制每一行的个数  j <= i
  4.     str += j + '×' + i + '=' + i * j + '\t';
  5.   }
  6.   str += '\n';
  7. }
  8. console.log(str);

2) while循环

while 基础语法

  1. while (条件表达式) {
  2.   // 当...条件满足时, 一直执行循环体
  3.   // 循环体代码 
  4. }

while基础格式:

  1. <script>
  2.         /* 最基础的格式
  3.             while (条件表达式) {
  4.                 // 当...条件满足时, 一直执行循环体
  5.                 // 循环体代码 
  6.             }
  8.             写一个最简单的死循环  浏览器控制台进不去,因为一直在循环打印
  9.          */
  10.         while(true){
  11.             console.log("班主任666");
  12.         }
  13.     </script>

while完整格式:

  1. <script>
  2.         /* 完整格式
  3.             初始化语句
  4.             while (条件判断语句) {
  5.                 循环体语句
  6.                 循环增量语句
  7.             }
  9.             打印66句666
  10.          */
  11.         var i = 0
  12.         while(i < 66){
  13.             console.log("班主任666");
  14.             i++
  15.         }
  16.     </script>

do…while

  1. do {
  2.     // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
  3. } while(条件表达式);

当条件满足时, 执行

跟while 的区别是:
do…while不管条件是否成立会先执行一次, 都会先执行一次循环体, 再判断

  1. <script>
  2.         /* 
  3.          基础格式
  4.             do{
  5.                 循环体
  6.             }while(表达式)
  7.         */
  9.         /* 完整格式
  10.             初始化语句
  11.              do{
  12.                 循环体语句
  13.                 循环增量语句
  14.             }while (条件判断语句)
  16.             打印66句666
  17.          */
  19.          /* 跟while循环的区别
  20.                 dowhile不管条件是否成立,都会执行一次循环体
  21.          */
  22.         var i = 0
  23.         do{
  24.             console.log("班主任666");
  25.             i++
  26.         }while(i < 66)
  29.     </script>

示例 :

  1.  <script>
  2.         /* 反复循环,你爱我吗?1/0 只要回答的不是1,就一直问,直到回答的是1为止 
  3.          分析:循环次数不确定使用while循环
  4.             循环体:一问一答:可以使用prompt实现
  5.             循环条件:当回答不是1的时候
  7.         步骤
  8.             1,先把循环的架子搭起来
  9.             2,写循环体
  10.             3,更改循环条件
  11.         */
  12.        var b = '0'  //把结果提出来.并赋默认值0
  13.        while(b != '1'){
  14.            //一问一答
  15.            b = prompt('你爱我吗?1/0')
  16.        }
  17.        alert('我也爱你,么么哒')
  19.     </script>

3) for / while应用场景

区别
while和for
都是先判断条件,在执行循环体
do-while
不管条件是否成立,都会先执行一次循环体

应用场景
循环次数确定的话,建议使用for循环,结构简单
循环次数不确定的话,建议使用while循环

4) 跳出循环

continue: 跳出当前循环,继续下一个循环

示例

  1.  for (var i = 1; i <= 5; i++) {
  2.    if (i == 3) {
  3.      console.log('这个包子有虫子，扔掉');
  4.      continue; // 跳出本次循环，跳出的是第3次循环 
  5.    }
  6.    console.log('我正在吃第' + i + '个包子呢');
  7.  }
  1. <script>
  2.         /* 
  3.          continue:跳过某次循环体内容的执行
  4.             注意:只能用在循环体里面,基于条件控制
  6.             需求:模拟电梯上行的过程1-11层,7层不停
  7.         */
  8.         for(var i=1;i <= 11;i++){
  9.             if(i == 7){
  10.                 continue
  11.             }
  12.             console.log(i + '层到了~');
  13.         }
  14.     </script>

break: 跳出整个循环(终止当前循环)

示例

  1. for (var i = 1; i <= 5; i++) {
  2.   if (i == 3) {
  3.     console.log('发现半条虫子，再也吃不下了');
  4.     break; // 直接退出整个for 循环，跳到整个for下面的语句
  5.   }
  6.   console.log('我正在吃第' + i + '个包子呢');
  7. }
  1.  <script>
  2.         /* 反复循环,你爱我吗?1/0 只要回答的不是1,就一直问,直到回答的是1为止 
  3.            1,直接写一个死循环
  4.            2,使用break跳出循环
  5.         */
  6.        while(true){
  7.            //一问一答
  8.            var b = prompt('你爱我吗?0/1')
  9.            //跳出循环
  10.            if(b == '1'){
  11.                break
  12.            }
  13.        }
  14.        alert('我也爱你.么么哒!')
  15.     </script>