[TOC]
# **流程控制**
  流程控制语句是区分编程语言和非编程语言的标志。流程控制语句可以控制代码的执行流程或顺序，JavaScript中的流程控制结构有三种，分别是顺序结构，分支结构，循环结构。
<br>
## **顺序结构**
  从上到下执行的代码就是顺序结构，程序默认就是由上到下顺序执行的，如图：
顺序结构流程图
<br>
<br>
## **分支结构**
分支结构流程图
<br>
### **if 语句**
  if 语句作用：根据判断条件的结果（true或false），来决定执行哪一块代码。可分为以下三种结构。
<br>
1. **if 语句，如果 if 条件表达式成立，则执行分支体**
**语法格式:**
>[success] // 如果...那么...
> if (/* 条件表达式 */) {
> // 分支体 语句
> }
  需求：定义一个用于变量存储数值，判断这个变量是否是偶数
```
var num = 8;
if (num % 2 === 0) {
console.log('偶数：' + num);
}
```
<br>
2. **if else，如果 if 条件表达式不成立，则执行else分支体**
>[success] //如果...那么... 否则...
> if (/* 条件表达式 */){
> // if分支体 语句
> } else {
> // else分支体 语句
> }
  需求：定义一个变量存储数值，判断这个变量是偶数还是奇数
```
//能被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>
  需求：分数转换，把百分制转换成等级 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>
### **三元运算符**
  三元运算符是具有三个操作数的运算符，三元运算符又叫三目运算符，JavaScript中只有一种三元运算符。当if-else语句要返回一个结果时，可以使用三元运算符替换。
  格式如下：
>[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语句**
  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;]
> }
  需求：定义一个变量存储星期，使用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>
### **布尔类型的隐式转换**
  流程控制语句会把括号中的表达式的值隐式转换（自动转换）成布尔类型，然后才使用转换后的结果作判断。除了流程控制语句的表达式，一元运算符 "!" 也会将值隐式转换成布尔类型。
```
//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>
## **循环结构**
  在JavaScript中，循环是指重复地做一件事情，JavaScript中的循环语句有三种，while循环语句、do-while循环语句和for循环语句。
<br>
### **while语句**
  while语句执行流程图
  语法格式：
>[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语句**
  do-while循环和while循环非常像，二者经常可以相互替代，但是do-while的特点是不管条件成不成立，do循环体都会先执行一次。
do-while执行流程图
  语法格式:
```
do {
// 循环体;
} while (循环条件);
```
  需求:
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语句**
  JavaScript的循环结构中，除了while和do-while循环，还有for循环。**while和do-while一般用于循环次数不确定的情况，for循环一般用于循环次数确定的情况。**
<br>
  for循环执行流程图
  语法格式:
>[success]// for循环括号中表达式之间是用";"号分隔的，千万不要写成","
for (初始化表达式1; 条件表达式2; 自增表达式3) {
// 循环体4
}
**执行顺序（记住）**：1243 --> 243 --> 243 --> 2......，直到条件表达式 返回 false 就停止循环。编写for循环代码，输出1-100之间的所有整数。
  需求：
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循环**
  在之前学习的for循环中，我们解决问题是：重复执行某一个操作。如果一个重复的操作需要做N次，此时得使用嵌套循环。
  语法格式：
>[success]for (初始化表达式1; 条件表达式2; 自增表达式3) {
// 循环体
for (初始化表达式1; 条件表达式2; 自增表达式3) {
// 循环体
}
}
  需求：
1、编写for循环代码，输出10\*10的正方形
在浏览器控制台输出星号是，发现星号叠加起来了，为了解决这个问题，我们引入一个str变量，用于暂存星号，循环结束后再把str变量输出即可。
~~~
// 定义一个变量，用于存储 *
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来实现。
~~~
//定义一个变量，用于存储 *
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 分隔每个等式。
~~~
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**
  break:立即跳出当前整个循环（注意：如果是多层循环，则跳出当前层循环），即循环结束，开始执行循环后面的代码（直接跳到大括号）
  continue:立即跳出当前(本次)循环，继续下一次循环（跳到i++的地方）
  需求：
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)
```
