JavaScript 流程控制-分支

阿新 • • 發佈：2020-08-25

JavaScript 流程控制-分支

1.流程控制

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

簡單理解：流程控制就是來控制我們的程式碼按照什麼結構順序來執行

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

2.順序流程控制

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

3.分支流程控制if語句

3.1分支結構

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

JS語言提供了兩種分支結構語句

if語句
switch語句

3.2 if語句

1.語法結構

//條件成立執行程式碼，否則什麼也不做
if(條件表示式){
  //條件成立執行的程式碼語句
}
//如下
if(3 < 5){
  alert("沙漠之舟")；
}

語句可以理解為一個行為，迴圈語句和分支語句就是典型的語句。

一個程式由很多個語句組成，一般情況下，會分割成一個一個的語句。

2.執行流程

判斷條件

true 執行語句
false 執行其他語句

3.3 if else語句（雙分支語句）

1.語法結構

//條件成立執行程式碼if裡面的程式碼，否則執行else裡面的程式碼
if(條件表示式){
 
  //[如果]條件成立執行的程式碼語句1
} else {
  //[否則]執行的程式碼2
}
//如下
var age = prompt('請輸入你的年齡:');
    if (age >= 18) {
      alert('想帶你一起去網咖偷耳機');
     } else {
      alert('你太嫩了，不帶你');
     }

判斷條件

true 執行語句1
false 執行語句2
然後再執行其他

3.4 if else is語句（多分支語句）

1.語法結構

 //適合用於檢查多重條件
 if (條件表示式1) {
 //執行語句1
  } else if (條件表示式2) {
    //執行語句2
 
  } else if (條件表示式3) {
    //執行語句3
    // ....
  } else {
    // 上述條件都不成立執行此程式碼
  }

2.執行流程

3.判斷成績案例

要求：接收使用者輸入的分數，根據分數輸出對應的等級字母A、B、C、D、E。

其中：

90分（含）以上，輸出：A
80分（含）以上~90分（不含），輸出B
70分（含）以上~80分（不含），輸出C
60分（含）以上~70分（不含），輸出D

60分（不含）以下，輸出：E

    var scroe = prompt('請輸入您的成績');
    if (scroe >= 90) {
      alert('您的成績是：A');
     } else if (scroe >= 80) {
      alert('您的成績是：B')
     } else if (scroe >= 70) {
      alert('您的成績是：C')
     } else if (scroe >= 60) {
      alert('您的成績是：D')
     } else {
      alert('您的成績是：E')
     }

4.三元表示式

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

    //1.語法結構
    //2.條件表示式 ？ 表示式1 ： 表示式2
    //3.執行思路
    //如果條件表示式結果為真 則返回表示式1的值  如果條件表示式結果為假則返回表示式2的值
    // 4.程式碼體驗
    var num = 10;
    var result = num >= 5 ? '是的' : '不是';
    console.log(result);

數字補0案例

使用者輸入數字，如果數字小於10，則在前面補0，比如01、09，如果數字大於10，則不需要補，比如20.

實現思路

使用者輸入0~59之間的一個數字
如果數字小於10，則在這個數字前面補0（加0），否則不做操作
用一個變數接受這個返回值，輸出

    var time = prompt('請輸入0~59之間的任意數字');
    var result = time < 10 ? '0' + time : time;
    alert(result);

5.分支語句流程控制switch語句

5.1語法結構

switch語句也是多分支語句，它用於基於不同的程式碼。當要針對變數設定一系列的特定值的選項時，就可以使用switch。

  //1.switch 語句也是多分支語句 也可以實現多選1
    //2.語法結構 switch 轉換、開關  case 小列子或者選項的意思
    switch (表示式) {
      case value1:
        //表示式等於value1 時要執行的程式碼
        break;
      case value2:
        //表示式等於value2 時要執行的程式碼
        break;
      case value3:
        //表示式等於value3 時要執行的程式碼
        break;
      default:
      //表示式不等於任何一個value時要執行的程式碼
     }
    //3.執行思路 利用我們的表示式的值 和 case後面選項值相匹配 如果匹配上，就執行該case裡面的語句  如果沒     有匹配上  就執行default裡面的語句
    //4.程式碼驗證
        switch (8) {
      case 1:
        console.log('我是1');
        break;
      case 2:
        console.log('我是2');
        break;
      case 3:
        console.log('我是3');
        break;
      default:
        console.log('啥都不是');
     }

注意事項：

        var num = 1;
            switch (num) {
      case 1:
        console.log('我是1');
        break;
      case 2:
        console.log('我是2');
        break;
      case 3:
        console.log('我是3');
        break;

我們開發裡面表示式我們經常寫成變數
我們num的值和 csae裡面的值相匹配的時候是全等，必須是值和資料型別一致才可以 num==1
break 如果當前的case裡面沒有break 則不會退出switch 而是繼續執行下一個case

案例：水果查詢

使用者在彈出框裡面輸入一個水果，如果有就彈出該水果的價格，如果沒有該水果就彈出“沒有此水果”。

案例分析

彈出prompt輸入框，讓使用者輸入水果名稱，把這個值取過來儲存到變數中。
將變數作為switch括號裡面的表示式。
case後面的值寫幾個不同的水果名稱，注意一定要加引號，因為必須是全等匹配。
彈出不同價格即可。同樣注意每個case之後加上break，以便退出switch語句。
將default設定為沒有此水果。

    var fruits = prompt('請輸入水果名稱:');
    switch (fruits) {
      case '榴蓮':
        alert('35一斤');
        break;
      case '提子':
        alert('10元一斤');
        break;
      case '蘋果':
        alert('6元一斤');
        break
      default:
        alert('沒有此水果');
     }