文章目錄
- JavaScript 流程控制-分支
- 流程控制
- 順序流程控制
- 分支流程控制 if 語句
- 分支結構
- if語句
- if else語句（雙分支語句）
- if else if 語句(多分支語句)
- 三元表達式
- 分支流程控制 switch 語句
- 文法結構
- switch 語句和 if else if 語句的差別
- JavaScript 流程控制-循環
- 循環
- for 循環
- 文法結構
- 雙重 for 循環文法
- 雙重 for 循環概述
- 雙重 for 循環文法
- while 循環
- do while 循環
- continue break
- continue 關鍵字
- break 關鍵字
JavaScript 流程控制-分支
流程控制
在一個程式執行的過程中，各條代碼的執行順序對程式的結果是有直接影響的。很多時候我們要通過控制代碼的執行順序來實作我們要完成的功能。
簡單了解： 流程控制就是來控制我們的代碼按照什麼結構順序來執行
流程控制主要有三種結構，分别是
順序結構
、
分支結構
和
循環結構
，這三種結構代表三種代碼執行的順序。
順序流程控制
順序結構是程式中最簡單、最基本的流程控制，它沒有特定的文法結構，程式會按照代碼的先後順序，依次執行，程式中大多數的代碼都是這樣執行的。
分支流程控制 if 語句
分支結構
由上到下執行代碼的過程中，根據不同的條件，執行不同的路徑代碼（執行代碼多選一的過程），進而得到不同的結果
JS 語言提供了兩種分支結構語句：
- if 語句
- switch 語句
if語句
①文法結構
// 條件成立執行代碼，否則什麼也不做
if (條件表達式) {
// 條件成立執行的代碼語句
} 語句可以了解為一個行為，循環語句和分支語句就是典型的語句。一個程式由很多個語句組成，一般情況下，會分割成一個一個的語句。
②執行流程
if else語句（雙分支語句）
①文法結構
// 條件成立 執行 if 裡面代碼，否則執行else 裡面的代碼
if (條件表達式) {
// [如果] 條件成立執行的代碼
} else {
// [否則] 執行的代碼
} ②執行流程
if else if 語句(多分支語句)
①文法結構
// 适合于檢查多重條件。
if (條件表達式1) {
語句1；
} else if (條件表達式2) {
語句2；
} else if (條件表達式3) {
語句3；
....
} else {
// 上述條件都不成立執行此處代碼
} ②執行流程
三元表達式
三元表達式也能做一些簡單的條件選擇。 有三元運算符組成的式子稱為三元表達式。
①文法結構
表達式1 ? 表達式2 : 表達式3； ②執行思路
如果表達式1為 true ，則傳回表達式2的值，如果表達式1為 false，則傳回表達式3的值
簡單了解： 就類似于 if else （雙分支） 的簡寫
分支流程控制 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裡面的語句。
switch 語句和 if else if 語句的差別
① 一般情況下，它們兩個語句可以互相替換
② switch…case 語句通常處理 case為比較确定值的情況， 而 if…else…語句更加靈活，常用于範圍判斷(大于、等于某個範圍)
③ switch 語句進行條件判斷後直接執行到程式的條件語句，效率更高。而if…else 語句有幾種條件，就得判斷多少次。
④ 當分支比較少時，if… else語句的執行效率比 switch語句高。
⑤ 當分支比較多時，switch語句的執行效率比較高，而且結構更清晰。
JavaScript 流程控制-循環
循環
循環目的：在實際問題中，有許多具有規律性的重複操作，是以在程式中要完成這類操作就需要重複執行某些語句
在Js 中，主要有三種類型的循環語句：
- for 循環
- while 循環
- do…while 循環
for 循環
在程式中，一組被重複執行的語句被稱之為
循環體
，能否繼續重複執行，取決于循環的
終止條件
。由循環體及循環的終止條件組成的語句，被稱之為
循環語句
文法結構
for 循環主要用于把某些代碼循環若幹次，通常跟計數有關系。其文法結構如下：
for(初始化變量; 條件表達式; 操作表達式 ){
//循環體
} - 初始化變量：通常被用于初始化一個計數器，該表達式可以使用 var 關鍵字聲明新的變量，這個變量幫我們來記錄次數。
- 條件表達式：用于确定每一次循環是否能被執行。如果結果是 true 就繼續循環，否則
- 操作表達式：每次循環的最後都要執行的表達式。通常被用于更新或者遞增計數器變量。當然，遞減變量也是可以的。
執行過程：
- 初始化變量，初始化操作在整個 for 循環隻會執行一次。
- 執行條件表達式，如果為true，則執行循環體語句，否則退出循環，循環結束。
- 執行操作表達式，此時第一輪結束。
- 第二輪開始，直接去執行條件表達式（不再初始化變量），如果為 true ，則去執行循環體語句，否則退出循環。
- 繼續執行操作表達式，第二輪結束。
- 後續跟第二輪一緻，直至條件表達式為假，結束整個 for 循環
雙重 for 循環文法
雙重 for 循環概述
很多情況下，單層 for 循環并不能滿足我們的需求，比如我們要列印一個 5 行 5 列的圖形、列印一個倒直角三角形等，此時就可以通過循環嵌套來實作。
循環嵌套
是指在一個循環語句中再定義一個循環語句的文法結構，例如在for循環語句中，可以再嵌套一個for 循環，這樣的 for 循環語句我們稱之為
雙重for循環
雙重 for 循環文法
for (外循環的初始; 外循環的條件; 外循環的操作表達式) {
for (内循環的初始; 内循環的條件; 内循環的操作表達式) {
需執行的代碼;
}
} - 内層循環可以看做外層循環的語句
- 内層循環執行的順序也要遵循 for 循環的執行順序
- 外層循環執行一次，内層循環要執行全部次數
while 循環
while 語句可以在條件表達式為真的前提下，循環執行指定的一段代碼，直到表達式不為真時結束循環
while語句的文法結構如下：
while (條件表達式) {
// 循環體代碼
} 執行思路：
① 先執行條件表達式，如果結果為 true，則執行循環體代碼；如果為 false，則退出循環，執行後面代碼
② 執行循環體代碼
③ 循環體代碼執行完畢後，程式會繼續判斷執行條件表達式，如條件仍為true，則會繼續執行循環體，直到循環條件為 false 時，整個循環過程才會結束
注意：
- 使用 while 循環時一定要注意，它必須要有退出條件，否則會成為死循環
- while 循環和 for 循環的不同之處在于 while 循環可以做較為複雜的條件判斷，比如判斷使用者名和密碼
do while 循環
do… while 語句其實是 while 語句的一個變體。該循環會先執行一次代碼塊，然後對條件表達式進行判斷，如果條件為真，就會重複執行循環體，否則退出循環。
do… while 語句的文法結構如下：
do {
// 循環體代碼 - 條件表達式為 true 時重複執行循環體代碼
} while(條件表達式); 執行思路：
① 先執行一次循環體代碼
② 再執行條件表達式，如果結果為 true，則繼續執行循環體代碼，如果為 false，則退出循環，繼續執行後面代碼
注意：先再執行循環體，再判斷，我們會發現 do…while 循環語句至少會執行一次循環體代碼