JavaScript基礎--超詳細（流程控制）

JavaScript基礎--超詳細（運算子）_m0_48651355的博客-CSDN博客

目錄

3.1流程控制

3.1.1 流程控制概念

3.1.2 順序流程控制

3.1.3 分支流程控制

3.2分支結構

3.2.1 if陳述句

3.2.2 if else陳述句（雙分支陳述句）

3.2.3 if else if 陳述句(多分支陳述句)

3.2.2 三元運算式

3.2.3 switch分支流程控制

3.2.4 switch 陳述句和 if else if 陳述句的區別

3.3回圈結構

3.2.1 for回圈

3.2.2 雙重for回圈

3.4 while回圈

3.5 do-while回圈

3.6 continue與break

3.6.1 continue

3.6.2 break

3.7 代碼規范

3.7.1 識別符號命名規范

3.7.2 運算子規范

3.7.3 單行注釋規范

3.7.4 其他規范

3.1流程控制

3.1.1 流程控制概念

在一個程式執行的程序中，各條代碼的執行順序對程式的結果是有直接影響的，很多時候我們要通過控制代碼的執行順序來實作我們要完成的功能，

簡單理解：流程控制就是來控制代碼按照一定結構順序來執行

流程控制主要有三種結構，分別是順序結構、分支結構和回圈結構，代表三種代碼執行的順序，

3.1.2 順序流程控制

順序結構是程式中最簡單、最基本的流程控制，它沒有特定的語法結構，程式會按照代碼的先后順序，依次執行，程式中大多數的代碼都是這樣執行的，

3.1.3 分支流程控制

分支結構：由上到下執行代碼的程序中，根據不同的條件，執行不同的路徑代碼（執行代碼多選一的程序），從而得到不同的結果

JS 語言提供了兩種分支結構陳述句：if 陳述句、switch 陳述句如下講解

3.2分支結構

3.2.1 if陳述句

語法結構

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

陳述句可以理解為一個行為，回圈陳述句和分支陳述句就是典型的陳述句，一個程式由很多個陳述句組成，一般情況下，會分割成一個一個的陳述句，

執行流程：

3.2.2 if else陳述句（雙分支陳述句）

語法結構

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

執行流程：

3.2.3 if else if 陳述句(多分支陳述句)

語法結構

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

執行流程：

3.2.2 三元運算式

語法結構

//運算式1 ? 運算式2 : 運算式3;

var a = 5;
var b = 3;
a>b?a:b    //結果為5

執行流程：

• 如果運算式1為 true ，則回傳運算式2的值，如果運算式1為 false，則回傳運算式3的值
• 簡單理解： 就類似于 if else （雙分支） 的簡寫

3.2.3 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里面的陳述句，

3.2.4 switch 陳述句和 if else if 陳述句的區別

• 一般情況下，它們兩個陳述句可以相互替換

• switch...case 陳述句通常處理 case為比較確定值的情況， 而 if…else…陳述句更加靈活，常用于范圍判斷(大于、等于某個范圍)

• switch 陳述句進行條件判斷后直接執行到程式的條件陳述句，效率更高，而if…else 陳述句有幾種條件，就得判斷多少次，

• 當分支比較少時，if… else陳述句的執行效率比 switch陳述句高，

• 當分支比較多時，switch陳述句的執行效率比較高，而且結構更清晰，

3.3回圈結構

3.2.1 for回圈

語法結構

for(初始化變數; 條件運算式; 操作運算式 ){
    //回圈體
}

執行流程：

• 初始化變數，初始化操作在整個 for 回圈只會執行一次，
• 執行條件運算式，如果為true，則執行回圈體陳述句，否則退出回圈，回圈結束，

---

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

擴展（斷點除錯）：

概念：斷點除錯是指自己在程式的某一行設定一個斷點，除錯時，程式運行到這一行就會停住，然后你可以一步一步往下除錯，除錯程序中可以看各個變數當前的值，出錯的話，除錯到出錯的代碼行即顯示錯誤，停下，斷點除錯可以幫助觀察程式的運行程序

---

程序：

1. 瀏覽器中按 F12--> sources -->找到需要除錯的檔案-->在程式的某一行設定斷點
2. Watch: 監視，通過watch可以監視變數的值的變化，非常的常用，
3. 摁下F11，程式單步執行，讓程式一行一行的執行，這個時候，觀察watch中變數的值的變化，

舉例：

//  基本寫法
for (var i = 1; i <= 100; i++) {
      console.log('這個人今年' + i + '歲了');
}

//因為定義的i變數開始為1，每回圈一次i就自增（i=i+1），當i的值加到101時，它不滿足小于等于100，所以跳出回圈，列印的是1-100

3.2.2 雙重for回圈

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

語法結構

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

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

舉例（列印五行五列星星）：

var star = '';
for (var j = 1; j <= 3; j++) {
    for (var i = 1; i <= 3; i++) {
      star += '☆'
    }
    // 每次滿 5個星星 就 加一次換行
    star += '\n'
}
console.log(star);

核心邏輯：

1. 內層回圈負責一行列印五個星星
2. 外層回圈負責列印五行

3.4 while回圈

語法結構

while (條件運算式) {
    // 回圈體代碼 
}

執行流程：

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

---

注意：使用 while 回圈時一定要注意，它必須要有退出條件，否則會成為死回圈

3.5 do-while回圈

語法結構

do {
    // 回圈體代碼 - 條件運算式為 true 時重復執行回圈體代碼
} while(條件運算式);

執行流程：

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

---

注意：先再執行回圈體，再判斷，do…while回圈陳述句至少會執行一次回圈體代碼

3.6 continue與break

3.6.1 continue

概念：continue 關鍵字用于立即跳出本次回圈，繼續下一次回圈（本次回圈體中 continue 之后的代碼就會少執行一次），

舉例：

//吃5個蘋果，第3個有蟲，扔掉第3個，繼續吃后面的蘋果
for (var i = 1; i <= 5; i++) {
     if (i == 3) {
         console.log('這個蘋果有蟲子，扔掉');
         continue; // 跳出本次回圈，跳出的是第3次回圈 
      }
      console.log('我正在吃第' + i + '個蘋果');
 }

3.6.2 break

概念：break 關鍵字用于立即跳出整個回圈（回圈結束），

舉例：

//吃5個蘋果，第3個有蟲，扔掉所有的蘋果，都不吃了，
for (var i = 1; i <= 5; i++) {
     if (i == 3) {
         console.log('這個蘋果有蟲子，扔掉');
         break; // 直接退出整個for 回圈，跳到整個for下面的陳述句
      }
      console.log('我正在吃第' + i + '個蘋果');
 }

3.7 代碼規范

3.7.1 識別符號命名規范

• 變數、函式的命名必須要有意義
• 變數的名稱一般用名詞
• 函式的名稱一般用動詞

3.7.2 運算子規范

// 運算子的左右兩側各保留一個空格
for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 直接退出整個 for 回圈，跳到整個for回圈下面的陳述句
   }
   console.log('我正在吃第' + i + '個蘋果');
}

3.7.3 單行注釋規范

for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 單行注釋前面注意有個空格
   }
   console.log('我正在吃第' + i + '個蘋果');
}

3.7.4 其他規范

關鍵詞、運算子之間后加空格