目錄

前言

一、流程控制

二、順序流程控制

三、分支流程控制

1.if陳述句

2.if else 陳述句

3.三元運算式

4.if else if陳述句

5.switch陳述句

四、回圈流程控制

1.for回圈

2.雙重for回圈

3.while回圈

4.do…while回圈

五、continue和break

總結

前言

javascript是現在的流行語言之一，是一種運行在客戶端的腳本語言，而腳本語言是不需要編譯，運行程序中由js解釋器（JS引擎）逐行解釋并運行，最開始的javascript適用于表單動態檢驗，之后延伸出了各種各樣的用法，使用javascript的語言，我們可以實作非常多樣的行為操作：彈出選單欄、自動輪播圖、頁面互動效果等等的有趣的內容，為了能學會更多javascript的內容，需要從最基礎的內容開始扎根學習，因此，今天我們來分享一下javascript的基礎中，重要的內容：流程控制，

一、流程控制

我們先來了解一下什么是流程控制：

在一個程式執行的程序中，各條代碼的執行順序對程式的結果是有直接影響的，很多時候我們要通過控制代碼的執行順序來實作我們要完成的功能，
簡單理解： 流程控制就是來控制我們的代碼按照什么結構順序來執行
流程控制主要有三種結構，分別是順序結構、分支結構和回圈結構，這三種結構代表三種代碼執行的順序，

二、順序流程控制

順序結構是程式中最簡單、最基本的流程控制，它沒有特定的語法結構，程式會按照代碼的先后順序，依次執行，程式中大多數的代碼都是這樣執行的，正常的javascript的陳述句就是從上到下依次執行的，這里附上代碼方便理解順序的流程：

var num1 = prompt('請輸入第一個數字：');
var num2 = prompt('請輸入第二個數字：');
var result = parseFloat(num1) + parseFloat(num2);
alert('得到的和是：' + result);
var str = "everybody,nice to meet you";
console.log(str.length);

上面的代碼結果是：

下面的代碼則會在控制臺列印出這個陳述句的長度為26：

三、分支流程控制

分支流程控制，就是由上到下執行代碼的程序中，根據不同的條件，執行不同的路徑代碼（執行代碼多選一的程序），從而得到不同的結果，一般有if、if else 、 if else if，還有三元運算式這幾種陳述句表現， 陳述句可以理解為一個行為，回圈陳述句和分支陳述句就是典型的陳述句，一個程式由很多個陳述句組成，一般情況下，會分割成一個一個的陳述句，

1.if陳述句

讓我們先來看看語法結構：

語法結構：
// 條件成立執行代碼，否則什么也不做
if (條件運算式) {
// 條件成立執行的代碼陳述句
}

用圖片來表示就是：

通過if后面的小括號來判斷代碼的條件，之后再去執行花括號內的代碼陳述句，如果符合條件，花括號內的陳述句才會執行，如果不符合，就會直接跳出去執行其他陳述句，這里我們來看看代碼的表現：

        var age = prompt('請輸入您的年齡：');
        if (age < 18) {
            alert("上NMD網吧回去學習，");
        }

if陳述句可以判斷的條件比較單一，而且對于其他情況的條件，不會彈出任何反饋，下一個if else判斷陳述句就可以實作反饋其他條件的效果，

2.if else 陳述句

if else的語法結構是這樣的：

語法結構
// 條件成立 執行 if 里面代碼，否則執行else 里面的代碼
if (條件運算式) {
// [如果] 條件成立執行的代碼
} else {
// [否則] 執行的代碼
}

判斷的流程就是：

如果if里面的條件符合的話，那么執行if的花括號內的陳述句，如果if里面的條件不符合，就取執行else里面的陳述句，之后執行if外面的陳述句， 讓我們用代碼來解釋一下這個程序：

//演算法：能被4整除且不能整除100的為閏年（如2004年就是閏年，1901年不是閏年）或者能夠被400 整除的就是閏年
var year = prompt('請輸入年份：');
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
    alert('是閏年');
} else {
    alert('是平年');
}

我們可以看到，我們輸入不同的內容，回傳的結構都是不一樣的，這就是if else陳述句不同于if的地方，用戶輸入不同的內容的時候，都會有對應的回傳結果，

3.三元運算式

三元運算式也能做一些簡單的條件選擇， 有三元運算子組成的式子稱為三元運算式

語法結構：
運算式1 ? 運算式2 : 運算式3;
執行思路：
如果運算式1為 true ，則回傳運算式2的值，如果運算式1為 false，則回傳運算式3的值
簡單理解： 就類似于 if else （雙分支） 的簡寫

這里附上代碼方便理解：

var num1 = prompt('請輸入0~59以內的數字：');
var time = num1 < 10 ? '0' + num1 : num1;
alert(time);

我們可以看出來，三元可以用更加簡單的方式實作if else的陳述句表達，根據需求去改變形式節省陳述句也是非常重要的，

4.if else if陳述句

if else if 多分支陳述句就是用來處理更多條件和范圍的分支流程陳述句，我們來看看它的語法結構：

語法結構
// 適合于檢查多重條件，
if (條件運算式1) {
陳述句1；
} else if (條件運算式2) {
陳述句2；
} else if (條件運算式3) {
陳述句3；
....
} else {
// 上述條件都不成立執行此處代碼
}

我們可以看到if else if陳述句有很多的判斷條件，這說明if else if陳述句可以囊更加細致的范圍條件的判斷，根據第一個條件的判斷結果，符合就直接執行陳述句，否則去下一個條件判斷運算式，不停的詢問直到陳述句結束，這里需要注意的是，if else if陳述句里面的else是為其他的else if 包含沒有包含的結果而留下來的部分，如果前面的else if陳述句已經完成了對條件運算式的范圍全部的概括，那么else不寫也是可以運行的，

讓我們來看看代碼：

var grade = prompt('請輸入你的成績：');
if (grade >= 90) {
    alert('優秀');
} else if (grade >= 80) {
    alert('良好');
} else if (grade >= 70) {
    alert('一般');
} else if (grade >= 60) {
    alert('及格');
} else {
    alert('不及格');
}

當我把60的條件更換之后，我們再來看看代碼：

var grade = prompt('請輸入你的成績：');
if (grade >= 90) {
    alert('優秀');
} else if (grade >= 80) {
    alert('良好');
} else if (grade >= 70) {
    alert('一般');
} else if (grade <= 60) {
    alert('及格');
}

可以看到，當我改變條件的時候，即使沒有else也可以正常運行，這里需要多注意代碼的內容，注意自己即使寫對了代碼也需要查看代碼的結構，雖然我這樣寫是正常運行的，但是判斷的條件就會讓即使不是60以上的分數也會是及格的回答，會不滿足條件，這個時候就需要多寫一個else if去滿足條件，而結尾寫else可以節省代碼的結構，所以更加方便，

5.switch陳述句

switch 陳述句也是多分支陳述句，它用于基于不同的條件來執行不同的代碼，當要針對變數設定一系列的特定值的選項時，就可以使用 switch，

switch( 運算式 ){
case value1:
// 運算式 等于 value1 時要執行的代碼
break;
case value2:
// 運算式 等于 value2 時要執行的代碼
break;
default:
// 運算式 不等于任何一個 value 時要執行的代碼
}

注意：

• switch ：開關 轉換 ， case ：小例子 選項
• 關鍵字 switch 后面括號內可以是運算式或值， 通常是一個變數
• 關鍵字 case , 后跟一個選項的運算式或值，后面跟一個冒號
• switch 運算式的值會與結構中的 case 的值做比較
• 如果存在匹配全等(===) ，則與該 case 關聯的代碼塊會被執行，并在遇到 break 時停止，整個 switch 陳述句代碼執行結束
• 如果所有的 case 的值都和運算式的值不匹配，則執行 default 里的代碼
• 注意： 執行case 里面的陳述句時，如果沒有break，則繼續執行下一個case里面的陳述句，

這里附上代碼方便理解：

var fruit = prompt('請輸入水果名字：');
switch (fruit) {
    case '蘋果':
        alert('蘋果3.5/斤');
        break;
    case '草莓':
        alert('草莓6.5/斤');
        break;
    case '香蕉':
        alert('香蕉5.5/斤');
        break;
    case '哈密瓜':
        alert('哈密瓜9.5/斤');
        break;
    default:
        alert('請重新輸入');
        break;
}

我們可以看到根據的內容，和case完全匹配了就可以被輸出出來，switch需要case和輸入的內容完全對應才會輸出，

四、回圈流程控制

在實際問題中，有許多具有規律性的重復操作，因此在程式中要完成這類操作就需要重復執行某些陳述句，在Js 中，主要有三種型別的回圈陳述句：

• for 回圈
• while 回圈
• do...while 回圈

1.for回圈

在程式中，一組被重復執行的陳述句被稱之為回圈體，能否繼續重復執行，取決于回圈的終止條件，由回圈體及回圈的終止條件組成的陳述句，被稱之為回圈陳述句

for 回圈主要用于把某些代碼回圈若干次，通常跟計數有關系，
其語法結構如下：
for(初始化變數; 條件運算式; 操作運算式 ){
//回圈體
}

1. 初始化變數：通常被用于初始化一個計數器，該運算式可以使用 var 關鍵字宣告新的變數，這個變數幫我們來記錄次數，
2. 條件運算式：用于確定每一次回圈是否能被執行，如果結果是 true 就繼續回圈，否則退出回圈，
3. 操作運算式：每次回圈的最后都要執行的運算式，通常被用于更新或者遞增計數器變數，當然，遞減變數也是可以的，

他的執行程序是這樣的：

1. 初始化變數，初始化操作在整個 for 回圈只會執行一次，
2. 執行條件運算式，如果為true，則執行回圈體陳述句，否則退出回圈，回圈結束，
3. 執行操作運算式，此時第一輪結束，
4. 第二輪開始，直接去執行條件運算式（不再初始化變數），如果為 true ，則去執行回圈體陳述句，否則退出回圈，
5. 繼續執行操作運算式，第二輪結束，
6. 后續跟第二輪一致，直至條件運算式為假，結束整個 for 回圈，

讓我們來看看代碼：

var sum = 0,
    average = 0;
var num = prompt('請輸入班級人數：');
for (var i = 1; i <= num; i++) {
    var grade = prompt('請輸入第' + i + '的成績：');
    sum = sum + parseFloat(grade);
}
average = sum / num;
alert('班級學生的總成績是：' + sum);
alert('班級學生的平均分是：' + average);

這樣看起來可能比較困難，所以我們可以使用網頁檢查里的功能來分析回圈的程序，我們用另外一個例子來解釋：

var average;
var sum = 0;
for (var i = 1; i <= 100; i++) {
    sum = sum += i;
}
average = sum / 100;
console.log(average);

我們可以看到，初始化變數的操作在最開始執行之后，就不會再執行了，當i=1的時候，滿足了回圈的條件i <= 100，因此回圈的陳述句是可以執行的，則執行回圈體里面的陳述句：sum += i 實作1+2+3+4的連續操作（這里我其實只需要寫sum += i就可以了寫多了），sum += i的操作結束之后，執型i++的陳述句，然后直接轉移到判斷i是否 <=100，符合則繼續回圈，如果不滿足，就會跳出回圈體，執行回圈體外面的操作，

我們如果沒辦法理解回圈的代碼，可以通過這個方式來檢查回圈的流程，方法就是F12打開檢查，選擇source選項，選擇著里面的帶有js的html檔案，然后點擊需要檢測那一行變化的js代碼，之后重繪頁面，就可以點擊箭頭操作查看它的變化操作了，如果需要看變數的變化，可以點擊watch選項下的“+”號寫入你js里面的變數，就可以查看變數的變化了，

2.雙重for回圈

回圈嵌套是指在一個回圈陳述句中再定義一個回圈陳述句的語法結構，例如在for回圈陳述句中，可以再嵌套一個for 回圈，這樣的 for 回圈陳述句我們稱之為雙重for回圈，

for (外回圈的初始; 外回圈的條件; 外回圈的操作運算式) {
for (內回圈的初始; 內回圈的條件; 內回圈的操作運算式) {
需執行的代碼;
}
}

1. 內層回圈可以看做外層回圈的陳述句
2. 內層回圈執行的順序也要遵循 for 回圈的執行順序
3. 外層回圈執行一次，內層回圈要執行全部次數

簡單的來說，就是外層回圈判斷正確之后，先執行內層回圈的判斷，內層回圈全部結束了，才會回傳上一個的外回圈操作運算式，然后再判斷外回圈的條件， 為了方便理解，我還是通過代碼和檢查的演示給大家看一看：

var str = '';
for (var i = 1; i <= 10; i++) {
    for (var j = i; j <= 10; j++) {
        str = str + '★';
    }
    str = str + '\n';
}
console.log(str);

我們可以看到列印星星的雙回圈邏輯，首先判斷現在是第一行，i=1 ，i <= 100 ,開始進入下面的回圈，進入內部的回圈之后，內部回圈從1開始列印到第10個星星，完成第一行的星星列印，結束了回圈之后，執行了換行的輸出，在執行i++的陳述句，之后才執行下一行的回圈，需要注意的是內部回圈因為j=i，當i=2的時候，j會從2開始列印，所以比上一次從1~10列印，2~10少列印了一顆星星，最后就會形成倒三角型的排列，如圖所示：

3.while回圈

while 陳述句可以在條件運算式為真的前提下，回圈執行指定的一段代碼，直到運算式不為真時結束回圈，

while陳述句的語法結構如下：
while (條件運算式) {
// 回圈體代碼
}

注意：

1. 使用 while 回圈時一定要注意，它必須要有退出條件，否則會成為死回圈
2. while 回圈和 for 回圈的不同之處在于 while 回圈可以做較為復雜的條件判斷，比如判斷用戶名和密碼

執行思路：

1. 先執行條件運算式，如果結果為 true，則執行回圈體代碼；如果為 false，則退出回圈，執行后面代碼
2. 執行回圈體代碼
3. 回圈體代碼執行完畢后，程式會繼續判斷執行條件運算式，如條件仍為true，則會繼續執行回圈體，直到回圈條件為 false 時，整個回圈程序才會結束

我們仍然用代碼來演示這個程序：

var j = 1,
    sum = 0;
while (j <= 100) {
    sum += j;
    j++;
}
console.log(sum);

我們可以看到while回圈有一個特點，就是他不具有計數器，因此他會無限回圈下去，如果要終止他，就需要讓變數自己在回圈里面自增加，否則就會變成死回圈，也就是寫入的條件運算式需要有變數滿足讓他退出條件的變數變化，也就是j最后必需要超出101才能退出這個回圈，因此利用這個特點，才有注意的第二點，可以用于驗證用戶名和密碼，比如下面這個案例：

var message = prompt('你吃飯了嗎？');
while (message !== '我吃啦') {
    message = prompt('你吃飯了嗎？');
}
alert('我也吃過啦');

可以看出來，只要我沒有輸出正確的答案，就會一直重復同一種回答，一直到我輸出正確的結果，才會退出回圈，這樣的操作還可以用來做更多有趣的效果，

4.do…while回圈

do... while 陳述句其實是 while 陳述句的一個變體，該回圈會先執行一次代碼塊，然后對條件運算式進行判斷，如果條件為真，就會重復執行回圈體，否則退出回圈，

do... while 陳述句的語法結構如下：
do {
// 回圈體代碼 - 條件運算式為 true 時重復執行回圈體代碼
} while(條件運算式);
注意：

先再執行回圈體，再判斷，我們會發現 do…while 回圈陳述句至少會執行一次回圈體代碼，

執行思路：

1. 先執行一次回圈體代碼
2. 再執行條件運算式，如果結果為 true，則繼續執行回圈體代碼，如果為 false，則退出回圈，繼續執行后面代碼

do…while回圈本質和while沒有太大區別，只是回圈至少會執行一次的特點讓他可以后判斷條件，用這個方式可以更簡單的制作while的回圈陳述句，我們來看看代碼：

do {
    var message = prompt('你吃飯了嗎？')
} while (message !== '我吃啦');
alert('我也吃過啦');

這個代碼執行的結果和上面while執行陳述句情況是一樣的，但是我們發現，之前寫的while需要在外面先寫一次message變數的語法，說明第一次詢問，之后在判斷用戶輸入的內容是否匹配，不匹配再進入回圈，而do…while的回圈會先回圈第一次，讓用戶先輸入內容，之后在對條件進行匹配，不匹配才會進入回圈，

總結一下，JS 中回圈有 for 、while 、 do…while ，三個回圈很多情況下都可以相互替代使用，如果是用來計次數，跟數字相關的，三者使用基本相同，但是我們更喜歡用 for

• while 和 do…while 可以做更復雜的判斷條件，比 for 回圈靈活一些
• while 和 do…while 執行順序不一樣，while 先判斷后執行，do…while 先執行一次，再判斷執行
• while 和 do…while 執行次數不一樣，do…while 至少會執行一次回圈體， 而 while 可能一次也不執行

實際作業中，我們更常用for 回圈陳述句，它寫法更簡潔直觀

五、continue和break

continue 關鍵字用于立即跳出本次回圈，繼續下一次回圈（本次回圈體中 continue 之后的代碼就會少執行一次），而break 關鍵字用于立即跳出整個回圈（回圈結束），

這里附上兩個關鍵字的例子：

例如，吃5個包子，第3個有蟲子，就扔掉第3個，繼續吃第4個第5個包子，其代碼實作如下：
for (var i = 1; i <= 5; i++) {
if (i == 3) {
console.log('這個包子有蟲子，扔掉');
continue; // 跳出本次回圈，跳出的是第3次回圈
}
console.log('我正在吃第' + i + '個包子呢');
}

最后的結果就是，除了第三個包子，其他內容都會被輸出出來，

例如，吃5個包子，吃到第3個發現里面有半個蟲子，其余的不吃了，其代碼實作如下：
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break; // 直接退出整個for 回圈，跳到整個for下面的陳述句
}
console.log('我正在吃第' + i + '個包子呢');
}

break則是直接跳出整個回圈，后面的包子都不會再出現了，

總結

在學習這一塊內容的時候，一定要多用檢查下的source功能，多查看整個js的流程變化，這對于之后學習js也是非常重要的功能，一定要多注意if和switch的區別，for和while的區別，剩下的就是多多學習和多多實踐，只有動手去做了才知道結果是什么樣的，再去做改變，如果對你有幫助，給我點個贊吧，