JavaScript流程控制语句

---

前言

接下来学习JavaScript的流程控制语句，会学习到各种流程语句，需要多多做练习才能熟练掌握。

---

一、表达式、语句

表达式可以产生一个值，有可能是运算、函数调用、有可能是字面量。表达式可以放在任何需要值的地方。
特点：表达式会先执行出一个结果，然后再参与其他程序。
语句可以理解为一个行为，循环语句和判断语句就是典型的语句，一个程序由多个语句组成。（一般语句以分号结束，特殊的结构除外）
流程控制语句通过一些特殊结构可以让js代码加载时，要么可以跳过一部分不加载，或者可以循环家在一段代码。

二、条件分支语句

1.if语句

if：如果
else：否则
如果条件表达式为true，那么执行结构体1.否则执行结构体2。
代码如下（示例）：

<script>
    // 案例：输入一个成绩，判断成绩是否合格
    var score = parseFloat(prompt("请输入一个成绩","88"));
    if (score >= 60) {
        alert("恭喜你，合格了");
    } else {
        alert("很遗憾，不合格");
    }
</script>

注意事项：
（1）if的两个分支会选择一个执行，不会都执行。
（2）if可以不写else分支，则表示if语句不成立，直接跳出if不执行。
（3）如果if后面的结构体是单行语句，可以省略{}不写（但不建议不写，程序容易出错）
（4）殊途同归现象：if能够控制自己的内部流程，不论走哪个分支，结束后都要执行if后面的其他语句。

2.多分支if语句

包含多个判断条件，if … else if … else if … else…,如果…否则如果…否则如果…否则…

代码如下（示例）：

<script>
    // 案例：输入一个成绩，判断成绩是优秀、良好、合格、不合格
    var score = parseFloat(prompt("请输入一个成绩","88"));
    // if (score >= 85) {
    //     alert("优秀");
    // } else if (score >= 75 && score < 85) {
    //     alert("良好");
    // } else if (score >= 60 && score < 75) {
    //     alert("合格");
    // } else {
    //     alert("不合格");
    // }

    // 简化
    if (score >= 85) {
        alert("优秀");
    } else if (score >= 75) {     //程序走此分支，说明成绩一定小于85，所以可以省略不写
        alert("良好");
    } else if (score >= 60) {     //程序走此分支，说明成绩一定小于75
        alert("合格");
    } else {
        alert("不合格");
    }
</script>

注意事项
（1）多分支if语句中可以有多个else if的分支，但是 else分支只能有一个，必须出现在最后，作为备用的选项，而且else也可以省略不写，表示前面条件如果都不满足，直接跳出不走任何分支。
（2）多分支if语句有跳楼现象:条件从上往下依次验证,如果满足了某个条件，会立即执行后面的结构体，执行完之后，不会再往后验证其他的条件了，而是从这一层直接跳楼跳出if语句,这就是跳楼现象。

3.if嵌套语句

if语句内部可以嵌套if语句，优点是可以简化if多分支语句的代码。

<script>
    // 根据年龄判断男性和女性是否退休
    // 男性退休年龄为60
    // 女性退休年龄为55
    var sex = prompt("请输入您的性别","男");
    var age = parseInt(prompt("请输入您的年龄","45"));
    // 外层if语句判断性别
    // 内层if语句判断年龄
    if (sex == "男") {
        if (age >= 60) {
            alert("先生，您可以退休啦");
        } else {
            alert("先生，还未到退休年龄哦");
        }
    } else {
        if (age >= 55) {
            alert("女士，您可以退休啦");
        } else {
            alert("女士，还未到退休年龄哦");
        }
    }
</script>

4.三元表达式

又叫做三元运算符，必须有三个操作数参与的运算。

<script>
    // 最简单的三元表达式
    true ? 1 : 0;

    // 给变量赋值，条件二选一时，使用三元表达式更加简单
    var a = 5;
    var b = a >= 5 ? 1 : 0; 
</script>

优点
（1）在二选一的情况下，三元表达式结构更加简单
（2）遇到给一个变量根据条件二选一赋值的情况，可以使用三元表达式。

5.switch语句

switch语句首先会将小括号内的表达式计算出一个结果，用结果去匹配结构体内部的case;从上往下进行匹配，如果匹配成功，会立即执行这个case后面的语句，直到遇到一个break跳出整个switch语句。
如果前面的case没有匹配成功，会跳过case之间的语句，去匹配下一个case，直到匹配成功，如果都不成功就执行default后面的语句。

<script>
  // 星座案例
  var xingzuo = prompt("请输入您的星座","白羊座");
  switch (xingzuo) {
      case "白羊座":
          alert("运势持续在线，将会是忙而充实的一天。");
          break;
      case "金牛座":
          alert("你或许需要付出更多的努力，才能实现自己的大志。");
          break;
      case "双子座":
          alert("你的脾气比较大，容易把负面情绪波及到最亲近的人。");
          break;
      case "巨蟹座":
          alert("人际关系会给你带来一些便利，善加把握会得到很多。");
          break;
      default:
          alert("对不起，数据库不全，不能找到您的星座");
          break;
  }
</script>

注意事项default可以不写，相当于if不写else。break关键字:根据结构需要有时必须在每个case后面都要写，为了模拟跳楼现象，如果不写break，对应的case后面的语句执行之后，不会跳出结构体，会继续想下执行其他case的后面的语句，直到遇到一个 break。

// 判断月份的天数案例
var month = parseInt(prompt("请输入一个月份","2"));
switch (month) {
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
        alert("这个月有31天");
        break;
    case 2:
        alert("这个月有28天或29天");
        break;
    default:
        alert("这个月有30天");  
}

三、循环语句

1.for循环语句

for循环是一种前测试循环语句，在反复执行一段代码之前，都要先测试入口条件，如果条件为真，可以继续循环，如果条件为假，必须跳出循环不再执行。for循环是一种反复执行一段代码直到测试条件为假时停止。

<script>
    for (var i = 1;i <= 100;i++) {
        console.log("上课的第" + i + "天");
    }
    console.log("毕业啦");
    console.log(i);
</script>

注意事项：
（1）小括号内必须有两个分号；
（2）for循环{}后面不需要加分号;
（3）如果位置语句不写，相当于没有设置入口条件，或者条件永远为真，没法限制什么时候停止循环了，出现死循环。（或者设置的不合理也会死循环）
（4）③位置是循环的结构体，每次进入循环都要执行完后，才能执行语句④,③位置的语句是可以人为自定义的，甚至可以书写if语句。
（5）循环内的变量是全局变量，必须避免循环嵌套时起相同的变量名，内层和外层变量名必须不同，常用的变量名i, j， k。
（6）for循环嵌套 if语句:表示既要能够执行循环，还要满足if语句的条件。
（7）for循环嵌套for循环:外层循环执行一次，内层循环作为外层③位置的结构体，必须执行完所有的内层循环，才能进入外层循环下一次的④。

for (var i = 1;i <= 4;i++) {
    for (var j = 5;j <=8;j++) {
        console.log(i,j);
    }
}

2.do while循环语句

先执行一次循环体，然后当条件表达式为真时可以继续循环。（后测试循环语句，先循环后测试）
注意事项
（1）如果循环中需要循环变量参与，循环变量必须定义在循环外面，否则会被重置。
（2）循环变量自加的过程需要写在循环体{}内部。
（3）如果将循环变量写在结构体内，i的初始值每次都会被重置，容易出现死循环。
（4）变量自加过程写在输出语句前面和后面，结果是不同的。
（5）do while循环即便条件第一次测试就为假，也会执行一次结构体。至少会执行一次循环体。

<script>
    // 控制台输出一到十数字
    var i = 1;
    do {
        console.log(i);
        i++;
    } while (i <= 10);
</script>

3.while循环语句

while循环是一种前测试循环语句，在执行循环体之前都要测试入口条件，条件为真继续执行，条件为假直接跳出循环。
注意事项：
（1）如果需要循环变量参与，必须定义在循环外部，避免被重置。
（2）循环变量自加的过程写在循环体内部。

---

<script>
    // 控制台输出一到十数字
    var i = 1;
    while (i <= 10) {
        console.log(i);
        i++;
    }
</script>

4.break语句

break语句的作用可以立即停止当前的 for、do while、while循环。根据一些条件设置break位置，直到循环能够执行到 break语句立即停止执行，跳出循环。

<script>
    // 1-50之间是否存在能被5整除的数，存在即跳出循环
    for (var i = 1;i <= 50;i++) {
        if(i % 5 == 0) {
            console.log(i);
            break;
        }
    }
</script>

注意事项
（1）break如果没有特殊指示，只能停止自己所在的那一层循环，并不能终止外部循环。
（2）如果想停止外层循环，可以给外层循环添加一个标签名label，在内层循环的break关键字后面空格加一个 label名。

// break只能打断本层循环
for (var i = 1;i <= 4;i++) {
    for (var j = 1;j <= 4;j++) {
        console.log(i,j);
        if (j >= 2) {
            break;
        }
    }
}

// break打断外层循环需要添加名字
waiceng: for (var i = 1;i <= 4;i++) {
    for (var j = 1;j <= 4;j++) {
        console.log(i,j);
        if (j >= 2) {
            break waiceng;
        }
    }
}

5.continue语句

遇到continue表示当前的一次循环数据不是我们想要的，会立即停止当前次的循环，立即进入下一次循环。
注意事项
（1）continue如果没有特殊指示只能进入自己的下一次循环，不能立即停止外层循环的这一次进入下一次。
（2）控制外层循环的方式与break一样，都是添加标签名。

<script>
    // 输出1-30 之间不是5的倍数的数字
    for (var i = 1;i <= 30;i++) {
        if (i % 5 == 0) {
            continue;
        }
        console.log(i);
    }

    // continue只能中断本层循环
    for (var i = 1;i <= 4;i++) {
        for (var j = 1;j <= 4;j++) {
            if (j % 2 == 0) {
                continue;
            }
            console.log(i,j);
        }
    }

    // 外层循环添加一个标签名，能够中断外层循环
    waiceng: for (var i = 1;i <= 4;i++) {
        for (var j = 1;j <= 4;j++) {
            if (j % 2 == 0) {
                continue waiceng;
            }
            console.log(i,j);
        }
    }
</script>

四、经典案例

1.穷举思想

实际案例中，可能需要找到一些有规律的数据，但是计算机没办法自动智能筛选所要的数据，只能程序员自己书写一段代码，让计算机根据代码去进行筛选。
穷举思想:是一种解决问题的方法，将所有的需要数据所在的范围内所有的数据都一一列举出来，再根据规律的条件对所有这些数据进行筛选，这种方式就是穷举法。
穷举思想的制作方法：（for+if循环）
for循环:外层使用for循环进行一一列举。
if语句:内层用if语句进行判断，筛选需要的数据，如果满足条件就操作数据如果不满足条件跳过看下一次循环的数据。

<script>
    // 输出6的所有约数
    // 外层循环用来列举1-6之间所有的数
    // for (var i = 1;i <= 6;i++) {
    //     // 内层用来判断是不是6的约数
    //     if (6 % i == 0) {
    //         console.log(i + "是6的一个约数");
    //     }
    // }

    // 进阶：用户输入一个数字，列出这个数所有的约数
    var n = parseInt(prompt("请输入一个正整数","6"));
    for (var i = 1;i <= n;i++) {
        if (n % i == 0) {
            console.log(i + "是" + n +"的一个约数");
        }
    }
</script>

2.累加器和累成器

需要得到所有数据的加和，必须想办法把所有的数的和存起来，就成了累加器。（累加器的本质就是变量）
实现累加的效果，就是利用循环，每次循环就将新的数据加到原始的变量中去,赋值过程是一个加等于赋值。

<script>
    // 求1-10之间所有数的和
    var num = 0;
    for (var i = 1;i <= 10;i++) {
        num += i;
    }
    console.log(num);
</script>

需要得到所有数据的乘积，把所有的数相乘，也就是求一个数的阶乘，就是累加器。
累成器的初始变量值必须是1，不能是0。

// 求1-10之间所有数的乘积
var num = 1;
for (var i = 1;i <= 10;i++) {
    num *= i;
}
console.log(num);

3.水仙花数

查找水仙花数，水仙花数是一种特殊的三位数，它的特点就是，每个数位的三次方和，等于它本身。

<script>
    // 穷举列出所有的三位数
    for (var i = 100;i <= 999;i++) {
        // 找到个位、十位、百位的数字
        var ge = i % 10,shi = parseInt(i / 10) % 10,bai = parseInt(i / 100);
        // 每个位数的三次方
        var sum = Math.pow(ge,3) + Math.pow(shi,3) + Math.pow(bai,3);
        // 判断是不是相等
        if (sum == i) {
            console.log(i);
        }
    }
</script>

总结

条件语句总结：
（1）if语句:最常用的语句，所有的判断情况都能够书写。
（2）三元表达式:多用于给变量赋值根据条件二选一的情况。
（3）switch语句:多用于给一个表达式去匹配多种固定值可能性的情况。
循环语句总结：
（1）遇到必须先执行一次结构体的循环，使用do while循环。
（2）先测试入口条件的循环，可以选择for循环或while循环。
（3）break和 continue这两个语句的出现可以帮助我们大量的优化代码，减少了计算机的计算次数。