[Day09] JavaScript - 流程判斷

13th鐵人賽

yashienxxxx

2021-09-09 18:45:26

951 瀏覽

if...else

當條件成立的時候執行 if 內的陳述式，不成立時則執行else的陳述式。

語法

if (條件式) {
    //條件成立時執行內容
}
else {
    //否則執行此區塊內容(else也可不寫，只單獨用if)
}

若有多個判斷條件，可用else if 來增加條件:

if (條件式) {
    //條件成立時執行內容
}

else if (條件式2) {
    //條件式2成立時執行內容
}

else if (條件式3) {
    //條件3式成立時執行內容
}

else {
    //以上條件都不成立時，則執行此區塊內容
}

巢狀迴圈

在符合某個判斷式的情況下，裡面再增加另一個if...else語句，如下:

語法

if (條件式) {
    //條件成立時執行內容
}

else if (條件式2) {
    //條件式2成立時執行內容
    
    if (條件式2-1)
        //條件式2-1成立時執行內容
    else {
        //否則執行此區塊內容
    }
}

else if (條件式3) {
    //條件3式成立時執行內容
}

else {
    //以上條件都不成立時，則執行此區塊內容
}

範例
以下範例，有點像我們在玩的終極密碼的觀念，假設要猜一個1~1000的數字，就可以用以下巢狀迴圈來縮小範圍，再去猜該數字是多少。

這邊要注意的是:

如果要使用兩個判斷條件要加上邏輯運算子 "&&" 或 "||":
Ex.
else if (500 < num && num <= 750) {
console.log('num: 500 ~ 750');
}

X 不能寫成:
Ex.
else if (500 < num <= 750) {
console.log('num: 500 ~ 750');
}

let num = 355;  //假如設定的數字為355

if (num <= 250) {
    console.log('num: <= 250'); 
}
else if ( 250 < num && num <= 500) {     /*這裡其實也可以省略 &&左邊的判斷式，改為(num <= 500)，
                                           因為第一個判斷式已先過濾掉小於250的數字，
                                           代表到了第二個判斷式一定會大於250*/
    if (num <= 400) {
        console.log('num: 250 ~ 400');
    }
    else {
        console.log('num: 401~500')
    }
}

else if (500 < num && num <= 750) {     /*可省略 &&左邊的判斷式，改為(num <= 750)，
                                          原因同上*/
    console.log('num: 500 ~ 750');
}

else {
    console.log('num: 750 ~ 1000');
}

switch...case

透過 if...else，可以判斷很多不同的狀態。但如果判斷式只有一個變數或者是簡單的邏輯資訊，那就可以透過數值切換 (switch) 的方式來處理，讓整體程式看起來更簡潔。

switch 語句會比對"表達式"裡的值是否符合 case 條件，然後執行跟這個條件符合的陳述式。

語法

switch(expression){
case value1 :
  //當 expression 的值符合 value1時，要執行的陳述句
  break;   // 每個 case後方都會補上 break; 來阻止已完成的區塊在後方繼續執行
case value2 :
  //當 expression 的值符合 value2時，要執行的陳述句
  break;
default:
  //當 expression 的值都不符合上述條件時，要執行的陳述句
  break;
}

範例

用一個常見的例子-以月份判斷季節，如果用if..else的方式，以最精簡的方式大概會是這樣:

var month = 10;
var count = Math.ceil(month/3)

if (count === 1  ) {
    console.log('春天');
}

else if (count === 2  ) {
    console.log('夏天');
}

else if (count === 3  ) {
    console.log('秋天');
}

else if (count === 4  ) {
    console.log('冬天');
}

else {
  console.log('月份錯誤');
}

但若用switch的方法，可以這樣寫:
看起來比較簡潔，同時也比較好維護，效能也比較好。

var month = 10;

switch ( Math.ceil(month/3) ){
  case 1:
    console.log('春天');
    break;

  case 2:
    console.log('夏天');
    break;

  case 3:
    console.log('秋天');
    break;

  case 4:
    console.log('冬天');
    break;

  default:
    console.log('月份錯誤');
    break;
}