[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)
```
