★文章內容學習來源：拉勾教育大前端就業集訓營

本篇學習目標：
1.掌握各個條件分支陳述句的用法；
2.理解常見案例實作思路，

一、if 陳述句

1. 介紹

• if 陳述句是最常用的條件分支陳述句；
• 作用：通過某個指定的判斷條件，決定走哪個分支的代碼，

2. 語法

<script>
      if (condition expression) {
          statement1;
      } else {
          statement2;
      }
</script>

• condition expression：條件運算式，可以是任意的代碼或者運算式，參與程式程序都會強制得到一個布林值執行結果，（運算式，js 中遇到任何運算式都會先計算出一個結果然后才能繼續參與程式，）

• statement：結構體，js 中可以用 {} 包括一行到多行陳述句，這些陳述句整體組成了一個結構體，結構體中的陳述句要執行就都執行，要不執行就都不執行，

• if關鍵字：如果；

• else關鍵字：否則；

• 總結：如果條件運算式為真 true，執行 statement1，否則執行statement2，

3. 注意事項

(1)實作選擇功能

• if 陳述句可以實作選擇的功能，兩個分支可以選擇一個執行，不會都執行，

(2)殊途同歸

• if 陳述句能夠控制自己內部的流程，但是不論走哪個分支，結束后都要繼續執行 if 陳述句后面的其他陳述句，叫做殊途同歸現象，

<script>
         //if陳述句殊途同歸現象，舉例
           var a ;
           var s = prompt("請輸入一個整數","100");
           if (s >= 60) {
               a = s;
           } else {
               a = 60;
           }
           alert("等級為"+a); //最后都會繼續執行這個陳述句，殊途同歸
</script>

(3)不建議省略大括號

• if 陳述句后面的結構體如果是單行陳述句組成，可以省略 {} 不寫，但是不建議省略大括號，容易出現程式錯誤，

<script>
           var a ;
           var s = prompt("請輸入一個整數","100");
           if (s >= 60) a = s;else a = 60;
           alert("等級為"+a);
</script>

(4)可以不寫 else 分

• if 陳述句可以不寫 else 分支，表示條件成立就執行后面的結構體，如果條件不成立，直接跳出 if 陳述句不執行，

<script>
           var a ;
           var s = prompt("請輸入一個整數","100");
           if (s >= 60) {
              a = s;
              alert("等級為"+a);
           }
 </script>

4. 案例

用if陳述句，讓用戶輸入考試成績，反饋其是否及格，

 <script>
        var testScores = prompt("請輸入您的考試成績","60");
        if (testScores >= 60) {
            alert("恭喜您，及格了");
        } else {
            alert("很遺憾沒有及格，請繼續加油！");
        }
 </script>

二、多分支 if 陳述句

1. 介紹

• 包含多個判斷條件，對應多個分支；
• 語法：if……else if……else if……else……
• 如果……否則如果……否則如果…… 否則……

2. 語法

<script>
   if (條件1) {
        滿足條件1，執行的結構體
    } else if (條件2) {
        不滿足條件1，滿足條件2，執行的結構體
    } else if (條件3) {
        不滿足條件1/2，滿足條件3，執行的結構體
    } else {
        不滿足前面所有條件，執行的結構體
    }
</script>

3. 注意事項

(1) else 分支只能有一個，必須出現在最后，可以省略

• 多分支 if 陳述句中可以有多個 else if 的分支，但是 else 分支只能有一個，必須出現在最后，作為備用的選項，而且 else 也可以省略不寫，表示前面條件如果都不滿足，直接跳出不走任何分支，

(2) “跳樓現象”

• 多分支 if 陳述句有“跳樓現象”：條件從上往下依次驗證，如果滿足了某個條件，會立即執行后面的結構體，執行完之后，不會再往后驗證其他的條件了，而是從這一層直接跳樓跳出if陳述句，

4. 案例

利用多分支 if 陳述句細分班級成績區間，
優秀：85-100；
良好：75-84；
及格：60-74；
不及格：60以下，

<script>
         //多分支if陳述句案例
         //(不用設定比如(s >= 75 && s < 85) 這樣的條件)
         //因為如果陳述句會往下走，表示上面的不符合，所以可以相對比較簡化寫成如下形式：
         var s = prompt("請輸入您的成績","100");
         if (s >= 85) {
             alert("您的成績區間為優秀");
         } else if (s >= 75) {
            alert("您的成績區間為良好");
         }else if (s >= 60) {
            alert("您的成績區間為及格");
         } else {
            alert("您的成績區間為不及格");
         }
</script>

三、if 陳述句嵌套

1.介紹

• if 陳述句的結構體部分，代碼可以是任意的代碼，甚至是另外一組 if 陳述句，
• 也就是 if 陳述句內部嵌套了 if 陳述句，
• 如果想執行內部 if 陳述句的某個分支，必須滿足外部 if 陳述句的條件，同時還要滿足內部 if 陳述句的某個條件，
• 優點：可以簡化多分支 if 陳述句，

2.案例

利用 if 陳述句嵌套判斷一個人是否退休，
男性：60 歲退休；
女性：55 歲退休，

<script>
    //if 陳述句嵌套，判斷一個人是否退休，男性：60 歲退休；女性：55 歲退休，
          var age = parseInt(prompt("請輸入您的年齡","55"));
          var sex = prompt("請輸入您的性別","女");
          if (sex === "女") {
              if (age >= 55) {
                  alert("恭喜您可以享受退休生活啦！");
              } else {
                  alert("還要繼續奮斗"+ (55 - age)+ "年，加油！");
              }
          } else  {
              if (age >= 60) {
                alert("恭喜您可以享受退休生活啦！");
              }else {
                alert("還要繼續奮斗"+ (60 - age)+ "年，加油！");
              }
          }
</script>

四、三元運算式

1.介紹

• 又叫三元運算子，必須有三個運算元參與的運算，
• 運算子號：? :
• 運算式：在參與JS程式時，都必須先計算出運算式結果，才能參與后續程式，
• 由于三元運算式具備了一些選擇的效果，所以也是一種條件分支陳述句，
• 作用：根據布爾運算式的結果，如果為真，三元運算式結果就是真值；如果為假，三元運算式結果就是假值，

2.語法

<script>
   boolean_expression ? true_value : false_value;
</script>

(1)布爾運算式

• boolean_expression:布爾運算式，運算式在參與三元運算中必須求得一個布爾型別的值，要么是 true，要么是 false，結果作為判斷依據，判斷到底去：前面的值還是后面的值，

(2)true_value

• true_value：布爾運算式的值為真時，三元運算式的結果，

(3) false_value

• false_value：布爾運算式的值為假時，三元運算式的結果，

3.優點

• 雖然if陳述句可以模擬三元運算式，但是三元運算式有自己的優點：

（1）結構更加簡單

• 二選一的情況下，三元運算式結構更加簡單，

<script>
        //三元運算式 
        console.log(true ? 1 : 0);  //1
        console.log(false ? 1 : 0); //0
</script>

（2）可以賦值給一個變數

• 三元運算式作為一個運算式參與程式時必須運算出結果才能參與，可以利用這個特點，將二選一結果賦值給一個變數，遇到給一個變數根據條件二選一賦值的情況，可以使用三元運算式，

4.案例

用三元運算式，讓用戶輸入一個整數，反饋給用戶判斷此整數大于等于3還是小于3，

<script>
  //三元表達優點：可以賦值給變數
  var a = 3;
  var b = parseInt(prompt("請輸入一個整數","4")) >= a ? "大于等于3" : "小于3";
  alert(b);
</script>

五、switch 陳述句

1.介紹

• 開關陳述句允許一個程式求一個運算式的值，并且嘗試去匹配運算式的值到一個 case 標簽，
• 如果匹配成功，這個程式執行相關的陳述句，

2.語法

<script>
    switch (運算式) {
	case 值1:
		結構體1;
		break;
	case 值2:
		結構體2;
		break;
	……
	default: 
		結構體n；
		break;
     }
 </script>

• switch：關鍵字表示開始進入一個開關陳述句，
• 運算式：會求出一個具體的值，將這個值去與 {} 內部的 case 后面的值進行對比、匹配;
• 如果值相等表示匹配成功，匹配相等時，方式是進行全等于匹配，不止值要相等，資料型別也要相等，
• case：示例的意思，作為關鍵字后面必須跟一個空格，書寫匹配的值，
• case 后面的結構體：每個 case 匹配成功之后要執行的陳述句，
• break：用于打斷結構體，直接跳出程式，模擬跳樓現象，
• default：相當于if陳述句中的 else，否則的情況，如果前面的 case 都不匹配，執行 default 后面的陳述句，

3.運行機制

(1)運算式→結果

• switch 陳述句首先會將小括號內的運算式計算出一個結果；

(2)匹配

• 用結果去匹配結構體內部的 case；

(3)執行

• 從上往下進行匹配，如果匹配成功，會立即執行這個 case 后面的陳述句，直到遇到一個 break 跳出整個 switch 陳述句；
• 如果前面的 case 沒有匹配成功，會跳過 case 之間的陳述句，去匹配下一個 case，直到匹配成功；
• 如果都不成功就執行 default 后面的陳述句，

4.案例1

輸出星座性格，

<script>
       //switch陳述句
       //案例1:輸出星座運勢
       var star = prompt("請輸入您的星座，為您分析性格","白羊座");
       switch (star) {
       case "白羊座":
           alert("優點：朝氣蓬勃、熱情坦率、熱愛自由、慷慨真誠、勇敢直率，缺點：自我中心太強、缺乏耐心、好斗、三分鐘熱度、粗枝大葉、有時過于感性、記性差");
           break;
        case "金牛座":
            alert("優點：踏實靠譜、善于財務的管理、藝術細胞強、思維縝密、腳踏實地，缺點：固執、不懂變通、缺乏自信、容易敏感、容易被人誤解、反應過慢，");
            break;
        case "雙子座":
            alert("優點：搞怪機靈、反應靈敏、充滿好奇心、風趣幽默、口才良好、積極主動、豁達開朗，缺點：低迷、耐力差、孩子氣、缺乏安全感、容易敏感、敷衍了事、缺乏耐性，");
        break;
        case "巨蟹座":
            alert("優點：謹慎、創造力強、有堅強的意志力、組織能力強、富有同情心、善解人意，缺點：心軟、苛刻、占有欲強、天性多疑且情緒化致難以取悅，");
        break;
        case "獅子座":
             alert("優點：思想開闊、熱心、慷慨、有領導能力、不多疑、、樂觀、思考、保護他人、為人慷慨、具幽默感，缺點：自以為是、剛愎自用、勢利、能伸不能屈、喜歡接受奉承、喜歡要求別人、缺乏節儉的精神、死要面子活受罪，");
        break;
        case "處女座":
             alert("處女座追求完美，吹毛求疵是他們的特性，多數的處女座都很謙虛，但也因此給自己造成很大的壓力，處女座的人不喜歡閑著，對別人常常樂于服務，缺乏自信的處女座有時候組織能力較差，需要家人與朋友們的鼓勵去推動他們，，");
        break;
        case "天秤座":
             alert("優點： 責任心強、溫婉善良、有求知欲、善解人意、因事制宜、適應力強、大度、與世無爭、審美能力 、能屈能伸，缺點：優柔寡斷、容易受人影響、比較懶惰、糾結，");
        break;
        case "天蝎座":
             alert("優點：現實至上、善于保守秘密、任勞任怨、不畏挫折、悟力快、洞悉能力強、專一、愛恨分明、舍己為人，缺點：個性倔強、蠻橫、愚昧、遠離人群的關懷和熱情、外表堅強、內心脆弱、表里不一、孤僻自憐，");
        break;
        case "射手座":
             alert("優點：幽默感、心胸開闊，誠懇寬厚、行動力強、行事認真、講義氣，有正義感，缺點：心直口快、固執獨斷、偏激、過度理想化、反復無常、喜怒太形于色，");
        break;
        case "摩羯座":
             alert("優點：心地祥和仁慈、行動敏銳、愛好和平、愛恨分明、心覺敏銳、做事沉著、思想優越，缺點：過于壓抑、不善表達、自我、容易陷入困境、孤獨感太重、思想躁動，");
        break;
        case "水瓶座":
             alert("優點：樂于發掘真相、博學多思、理性的智慧、獨立，有個人風格、創意十足，缺點：不按常理出牌、喜歡多管閑事、過于理想化、太相信自己的判斷、思想多變，缺乏恒心、缺乏熱情、我行我素，");
        break;  
        case "雙魚座":
             alert("優點：不自私、善解人意、具有想象力、浪漫、感情豐富、溫和有禮、直覺力強、天真、富有同情心，缺點：粗心、浮躁、散漫、不切實際，幻想太多、缺乏理性，感情用事，");
        break;  
        default :
             alert("沒有找到您的星座，請檢查是否輸入有誤哦！");
         break;
       }
</script>

5. 注意事項

(1) default 可以不寫

• default 可以不寫，相當于 if 陳述句沒有 else，

(2) break靈活處理

• break 關鍵字：根據結構需要有時必須在每個 case 后面都要寫，為了模擬跳樓現象，如果不寫break，對應的 case 后面的陳述句執行之后，不會跳出結構體，會繼續想下執行其他 case 的后面的陳述句，直到遇到一個 break，
• 可以利用 break 不寫的情況制作一些特殊的案例（如下案例2），

6.案例2

用戶輸入一個月份的數字，請回傳給用戶對應月份的天數，

<script>
     //案例2：輸入月份數字，輸出對應月份天數
       var m = prompt("請輸入月份數字","1");
       switch (m) {
           case "1" :
           case "3" :
           case "5" :
           case "7" :
           case "8" :
           case "10" :
           case "12" :
               alert("2021年" + m + "月有31天");
            break;
           case "2" :
               alert("2021年" + m + "月有28天");
           break;
           default :
               alert("2021年" + m + "月有30天");
           break;
       }
</script>

六、總結

• 總結：實際作業中使用三種陳述句的情景，
• if 陳述句：最常用的陳述句，所有的判斷情況都能夠書寫，
• 三元運算式：多用于給變數賦值根據條件二選一的情況，
• switch 陳述句：多用于給一個運算式去匹配多種固定值可能性的情況，

下篇繼續：【69】JS(4)——運算式和陳述句②流程控制陳述句(2)回圈陳述句