09-JavaScript基礎-流程控制-if

流程控制基本概念

• 預設情況下，程式的執行流程是這樣的：執行程式後，系統會按書寫從上至下順序執行程式中的每一行程式碼,但是這並不能滿足我們所有的開發需求

• 實際開發中, 我們需要根據不同的條件執行不同的程式碼或者重複執行某一段程式碼

• 為了方便我們控制程式的執行流程，JavaScript提供3種流程結構，不同的流程結構可以實現不同的執行流程。這3種流程結構分別是順序、選擇、迴圈三種基本控制結構構造.

  • 順序結構：預設的流程結構。按照書寫順序從上至下執行每一條語句。

    
    
    

  • 選擇結構：對給定的條件進行判斷，再根據判斷結果來決定執行哪一段程式碼。

    
    
    

  • 迴圈結構：在給定條件成立的情況下，反覆執行某一段程式碼。

    
    
    
    
    
    

---

選擇結構-if基本概念

.if第一種形式

• 表示如果條件表示式為真,執行語句塊1,否則不執行。

if(條件表示式)
{
    語句塊1
}
後續語句;

• 示例:

if(age > 18)
{
    console.log("開網路卡");
}

---

2.if第二種形式

• 如果條件表示式為真,則執行語句塊1,否則執行語句塊2

if(條件表示式)
{
    語句塊1
}else{
    語句塊2
}

• 示例:

if(age > 18)
{
    console.log("開網路卡");
}else{
    console.log("喊你媽來");
}

• 特點:
  • if和else後面的程式碼塊({})只有一個會被執行

3.if第三種形式

• 如果條件表示式1為真,則執行語句塊1,否則判斷條件表示式2,如果為真執行語句塊2,否則再判斷條件表示式3,如果真執行語句塊3, 當表示式1、2、3都不滿足,會執行最後一個else語句。

if(條件表示式1)
{
    語句塊1
}else if(條件表示式2){
    語句塊2
}else if(條件表示式3){
    語句塊3
}else{
    語句塊4
}

• 示例:

if(age>18)
{
    console.log("給網路卡");
}else if(age>25){
    console.log("給名片");
}else if(age>40){
    console.log("給房卡");
}else{
    console.log("給好人卡");
}

• 特點：
  • 這麼多大括號中只有一個大括號中的內容會被執行
  • 當執行到後面條件的時候證明前面的條件不滿足
  • else if可以只有一個, 也可以有多個, 但是都必須新增在if和else之間

---

選擇結構-if注意點

• 如果只有一條語句時if後面的大括號可以省略

if(age > 18)
    console.log("開網路卡");

• 注意點:
  • 受到if管制的只有緊跟其後的那條語句
  • 在企業開發中儘量不要省略大括號

    if(false)
        console.log("語句1");
    console.log("語句2"); // 語句2會被輸出
    

---

• 分號“;”也是一條語句, 空語句

if(10 > 2);
{
    console.log("10 > 2");
}
// 輸出結果: 10 > 2, if管制的緊跟其後的那個分號

// 如上語句相當於
if(10 > 2)
  ;
{
    console.log("10 > 2");
}

// 如上語句相當於
if(10 > 2) {
      ;
}
// {}在JS中僅僅代表告訴系統裡面的語句是一個整體, 沒有別的用途,不會影響程式碼的執行
{
    console.log("10 > 2");
}

---

• if else是一個整體， else匹配if的時候匹配離它最近的一個if

    if(0)
        if(1)
            console.log("A");
        else // 這個else會匹配上面的 if(1)
            console.log("B");
    else // 這個else會匹配上面的 if(0)
        if (1)
            console.log("C"); // 最終輸出C
        else
            console.log("D");

---

• 對於非Boolean型別的值,會先轉換為Boolean型別後再判斷

    if (0) {
        console.log("123\n"); // 不會被執行
    }

---

• 判斷變數與常量問題
  • 但凡遇到比較一個變數等於或者不等於某一個常量的時候，把常量寫在前面

    // if(a = 0)  // 錯誤寫法, 但不會報錯
    /*
    本來是先判斷變數a儲存的值是否等於0,
    但是如果不小心寫成a=0,代表把0儲存到a中.
    為了避免這種問題判斷是否相等時把常量寫前面,
    因為等號左邊只能是變數, 所以如果少寫一個等號會報錯
    */
    if (0 == a) {
        console.log("a的值是0\n");
    }else{
       console.log("a的值不是0\n");
    }

---

• if語句可以巢狀使用

    var num = 8;
    if (num >= 5)
    {
        if(num <= 10)
        {
            console.log("一個5~10之間的數")
        }
    }

---

選擇結構-if練習

• 從鍵盤輸入一個整數，判斷其是否是偶數，如果是偶數就輸出YES，否則輸出NO；

//    1.定義一個變數儲存使用者輸入的整數
    var temp;
//    2.利用window.prompt()接收使用者輸入資料
//     window.prompt返回給我們的是一個字串, 需要轉換為Number
    temp = +(window.prompt("請輸入一個整數"));
//    3.對使用者輸入的資料進行安全校驗
    if(isNaN(temp)){
        alert("你是SB嗎?");
    }else{
//    3.判斷使用者輸入的資料是否是偶數, 然後根據判斷結果輸出YES/NO
        /*
        if(temp % 2 == 0){
            alert("YES");
        }else{
            alert("NO");
        }
        */
        (temp % 2 == 0) ? alert("YES") :  alert("NO");
    }

---

• 接收使用者輸入的1～7的整數，根據使用者輸入的整數，輸出對應的星期幾

//    1.定義變數儲存使用者輸入的資料
    var day;
//    2.利用window.prompt()接收使用者輸入資料
    day = +(window.prompt("輸入的1～7的整數"));
//    3.判斷當前是星期幾
    if(day == 1){
        console.log("星期一");
    }else if(day == 2){
        console.log("星期二");
    }else if(day == 3){
        console.log("星三");
    }else if(day == 4){
        console.log("星期四");
    }else if(day == 5){
        console.log("星期五");
    }else if(day == 6){
        console.log("星期六");
    }else if(day == 7){
        console.log("星期日");
    }else{
        console.log("滾犢子");
    }

---

• 接收使用者輸入的一個整數month代表月份，根據月份輸出對應的季節

//    1.定義變數儲存使用者輸入的資料
    var month;
//    2.利用window.prompt()接收使用者輸入資料
    month = +(window.prompt("請輸入一個1-12的月份"));
//    3.資料安全校驗
    if(isNaN(month)){
        alert("火星SB?");
    }else{
//    4.根據輸入的資料判斷輸出對應的月份即可
        if(month >= 3 && month <= 5){
            alert("春季 ");
        }else if(month >=6 && month <= 8){
            alert("夏季");
        }else if(month >=9 && month <= 11){
            alert("秋季");
        }else if(month == 12 || month == 1 || month == 2){
            alert("冬季");
        }else{
            alert("火星季節");
        }
  }

//    1.定義變數儲存使用者輸入的資料
    var month;
//    2.利用window.prompt()接收使用者輸入資料
    month = +(window.prompt("請輸入一個1-12的月份"));
//    3.資料安全校驗
    if(isNaN(month)){
        alert("火星SB?");
    }else{
//    4.根據輸入的資料判斷輸出對應的月份即可
        if(month < 1 || month > 12){
            alert("火星季節");
        }else if(month >= 3 && month <= 5){
            alert("春季 ");
        }else if(month >=6 && month <= 8){
            alert("夏季");
        }else if(month >=9 && month <= 11){
            alert("秋季");
        }else{
            alert("冬季");
        }
    }

//    1.定義變數儲存使用者輸入的資料
    var month;
//    2.利用window.prompt()接收使用者輸入資料
    month = +(window.prompt("請輸入一個1-12的月份"));
//    3.資料安全校驗
    if(isNaN(month)){
        alert("火星SB?");
    }else{
//    4.根據輸入的資料判斷輸出對應的月份即可
        if(month == 12 || month == 1 || month == 2){
            alert("冬季");  // 沒有進入, 剩下的必然是3-11
        }else if(month >=9){ 
            alert("秋季"); // 沒有進入, 剩下的必然 3-8
        }else if(month >=6){ 
            alert("夏季"); // 沒有進入, 剩下的必然 3-5
        }else if(month >= 3){
            alert("春季 ");
        }else{ // 12 1 2
            alert("火星季節");
        }
    }

---

• 從鍵盤輸入2個整數，判斷大小後輸出較大的那個數

//    1.定義變數儲存三個整數
    var a, b;
//    2.利用window.prompt接收使用者輸入的資料
    a =  +(window.prompt("請輸入內容")); 
    b =  +(window.prompt("請輸入內容")); 
//    3.利用if進行兩兩比較
    if(a > b){
        console.log(a);
    }else{
        console.log(b);
    }
    /*
    三元運算子好處：可以簡化if else程式碼
    弊端                  ：因為是一個運算子所以運算完必要要有一個結果。  
    簡單用三元 複雜用if(閱讀性好)
    */
    console.log(a > b? a: b);

---

• 從鍵盤輸入3個整數，排序後輸出
  • 如下做法程式碼嚴重沒有擴充套件性,數值越多程式碼越多

//    1.定義變數儲存三個整數
    var a, b, c;
//    2.利用window.prompt接收使用者輸入的資料
    a =  +(window.prompt("請輸入內容"));
    b =  +(window.prompt("請輸入內容"));
    c =  +(window.prompt("請輸入內容"));
    //     方式1 寫出所有方式
    if (a >= b && b >=c) {
        console.log(a, b, c);
    }else if (a >= c && c >= b) {
        console.log(a, c, b);
    }else if (b >= a && a >= c) {
        console.log(b, a, c);
    }else if (b >= c && c >= a) {
        console.log(b, c, a);
    }else if (c >= a && a >= b) {
        console.log(c, a, b);
    }else if (c >= b && b >= a) {
        console.log(c, b, a);
    }

• 如下做法將來可以利用迴圈結構簡化程式碼

  • 選擇排序, 每排完一次最值出現在第一位

    
    
    
    
    
    
    
    
    

//    1.定義變數儲存三個整數
    var a, b, c;
//    2.利用window.prompt接收使用者輸入的資料
    a =  +(window.prompt("請輸入內容"));
    b =  +(window.prompt("請輸入內容"));
    c =  +(window.prompt("請輸入內容"));
//     方式2 選擇排序
    var temp;
    if (a > b) {
        temp = a;
        a = b;
        b = temp;
    }
    if (a > c) {
        temp = a;
        a = c;
        c = temp;
    }
    if ( b > c) {
        temp = b;
        b = c;
        c = temp;
    }
    console.log(a, b, c);

• 氣泡排序, 每排完一次最值出現在最後一位

//    1.定義變數儲存三個整數
    var a, b, c;
//    2.利用window.prompt接收使用者輸入的資料
    a =  +(window.prompt("請輸入內容"));
    b =  +(window.prompt("請輸入內容"));
    c =  +(window.prompt("請輸入內容"));
//     方式3 氣泡排序
    var temp;
    if (a > b) {
        temp = a;
        a = b;
        b = temp;
    }
    if (b > c) {
        temp = b;
        b = c;
        c = temp;
    }
    if ( a > b) {
        temp = a;
        a = b;
        b = temp;
    }
    console.log(a, b, c);

---

• 石頭剪子布實現

    // 定義 0.剪刀 1.石頭 2.布
    // 1、定義變數 玩家和電腦
    var player,computer = 0;
    
    // 2、讓電腦先出拳
    var temp = Math.random() * 3;
    // 3、使用者出拳
    var player = window.prompt("請出拳:0.剪刀 1.石頭 2.布");
    // 資料合法性的校驗
    if (player<0||player>2) {
        window.prompt("請重新出拳:0.剪刀 1.石頭 2.布");
    }else{
        // 4、判斷比較 //先判斷使用者贏的情況
        if((player==0&&computer==2)||
                (player==1&&computer==0)||
                (player==2&&computer==1)){
            window.alert("我靠,你贏了!\n");

        }else if((computer==0&&player==2)||
                (computer==1&&player==0)||
                (computer==2&&player==1)){
            window.alert("很遺憾,你輸了!\n");

        }else{
            window.alert("平局\n");
        }
    }

---

學習交流方式:
1.微信公眾賬號搜尋: 李南江(配套視訊,程式碼,資料各種福利獲取)
2.加入前端學習交流群:
302942894 / 289964053 / 11550038