天天看點

JavaScript 流程控制-分支

#1.流程控制

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

簡單結構:流程控制就是來控制我們的代碼按照什麼結構順序來執行

流程控制主要有三種結構,分别是順序結構、分支結構和循環結構,這三種結構代表三種代碼執行的順序。

JavaScript 流程控制-分支

 #2.順序流程控制

順序結構是程式中最簡單,對基本的流程控制,他沒有特定的文法結構程式會按照代碼的先後順序,依次執,程式中大多數的代碼都是這樣執行的。

#3.分支流程控制if語句

3.1分支結構

由上到下執行代碼的過程中,根據不同的條件,執行不同的代碼,進而得到不同的結果。

js 提供的了兩種不同的代碼語句 if 和 switch 語句

3.2.if 語句

1.文法結構

<script>
     // 1. if 的文法結構
     // if (條件表達式) {
     //     //執行語句
     // }
     // 2. 執行思路 如果 if 表達式裡面的執行結構為真,則執行if中的執行語句。
     // 如果if 條件表達式結構為假 則不執行if 中的語句,直接執行if語句後面的代碼
    </script>      

2.if else 語句

<script>
     // 1. if 的文法結構
     // if (條件表達式) {
     //     //執行語句1
     // }else{
    //執行語句2
     }
     // 2. 執行思路 如果 if 表達式裡面的執行結構為真,則執行if中的執行語句。
     // 如果if 條件表達式結構為假 則不執行if 中的語句,直接執行if語句後面的代碼
    </script>      

  總結:if 裡面的語句和else裡面的語句最終隻能執行一個,不可同時執行

執行流程:

JavaScript 流程控制-分支

 3.多分枝語句

1.多分枝語句 就是利用多個條件來選擇不同的語句執行 得到不同的結果

2.多分枝語句 if else if 

<script type="text/javascript">
            //文法規範
            if (條件表達式1) {
                //執行語句1
            } else if (條件表達式2) {
                //執行語句2
            } else if (條件表達式3) {
                //執行語句3
            } else if (條件表達式4) {
                //執行語句4
            } else {
                //最後的語句
            }
        </script>      

如果條件滿足條件表達式1 就執行 語句1 執行完畢,退出整個 if 分支語句,如果不滿足就向下執行,直到執行到最後的語句。

執行流程

JavaScript 流程控制-分支

 在編寫多支出語句時,代碼必須要從大到小去進行判斷,因為代碼執行思路是從上向下依次執行。

#4.三元表達式

1.由三元運算符組成的式子我們稱為三元表達式

2.++num  3+5  ?:

3.文法結構

條件表達式 ? 表達式1:表達式2

4.執行思路

如果條件表達式結果為真,則傳回 表達式1 如果表達式結果為假 則傳回 表達式2

5.代碼示範

<script>
   var num = 10;
   var result = num > 5 ? '是的' : '不是'
   console.log(result);
</script>      

 #5.switch分支語句

1.switch 語句也是多分枝語句 也可以實作多選一

2.文法結構 switch 轉換、開關  case 小例子或者選項的意思

switch 語句也是多分支語句,它用于基本不同的條件來執行不同的代碼。當要針對變量設定一系列的特定值的選項時,可以使用 switch。

<script type="text/javascript">
            switch (表達式) {
                case value1:
                    執行語句1
                    break;
                case value2:
                    執行語句2
                    break
                default:
                    執行最後的語句
            }
            
        </script>      

3.執行思路  利用我們的表達式的值 和 case 後面的選項值相比對 如果比對上,就執行該 case 的值,如果都沒有比對上,那麼就執行 default裡面的語句

4.代買驗證:

<script type="text/javascript">
            switch(2) {
                case 1:
                console.log('這是1');
                break;
                case 2:
                console.log('這是2');
                break;
                case 3:
                console.log('這是3');
                break;
                default:
                console.log('沒有比對值');
            }
        </script>      

#6.switch 注意事項

1.我們在開發中經常會把表達式寫成變量

2.switch()中的值是和 case 裡面的值相比對的時候是 全等 的,必須是值和資料類型一樣的才可以

3.break 如果目前的 case 裡面沒有break 則不會推出 switch 是繼續執行下一個case

#7.switch和if else 的差別

1.一般情況下,兩個語句是可以互相替換的

2.switch語句通常處理 case 比較确定的值,而if 語句更加靈活,通常用于範圍判斷大于或者等于某個範圍.

3.swtich 語句進行條件判斷後直接執行到程式的條件語句,效率更高.進而if else 語句有幾種條件,就得判斷多少次.

繼續閱讀