流程控制-有解無憂

1 流程控制

1.1 流程控制概念

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

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

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

流程控制

1.2 順序流程控制

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

順序流程控制

1.3 分支流程控制

分支結構

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

分支流程控制

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

if 陳述句

語法結構

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

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

執行流程

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

語法結構

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

執行流程

if else

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

語法結構

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

執行邏輯

1.4 三元運算式

語法結構
```
運算式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陳述句的執行效率比較高，而且結構更清晰，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/230553.html

標籤：JavaScript

上一篇：zui動態樹形選單二次渲染

下一篇：ES6語法，自定義組件的命名