switch - 程式碼教學

switch 是另一種寫「條件式」的方式

switch 的寫法

switch 範例程式碼：

🎃 「switch(prefer)」：先設立一個表達式 switch()，且包含一些條件（可以有一個 or 多個條件）

🍋 在「小括號()」裡面，帶「變數」進去，帶「變數」進去後，就一定會執行「大括號{}」的程式碼

🎃 帶「變數」進去後，就會開始比對「case 的值」

🍋 如果帶進去的變數符合「'生菜沙拉'」，就會執行相關連的程式碼：eat('生菜沙拉')

🎃 每個case後方，都要加上「break;」，作用是：阻止已完成的區塊後方繼續執行

🎃 如果帶進去的變數，跟所有的case都“不符合”，那就會執行「default:的程式碼」

🍋 default:不一定要放在最後方，也可以寫在case的前面。原因為：

執行的順序一定是「先跟case比對」–> 「都沒有相符，才執行default:」

🎃 「case、default:」裡面的程式碼，可以用 tab 縮排，程式碼會更好閱讀

var prefer = '生菜沙拉';

function eat(food){
    console.log('我現在要去吃' + food);
}

switch(prefer){
    case '羊肉爐':
        eat('羊肉爐');
        break;

    case '生菜沙拉':
        eat('生菜沙拉');
        break;

    default:
        eat('拉麵');
        break;
}

「switch」跟「if、else if、else」的差異

在「效能」的差異

🎃 使用「if、else if、else」

瀏覽器在編譯時，會把所有「if、else if、else」的「條件、程式碼」都審視一遍（無論有沒有符合條件）–> 這樣，編譯的“速度和效能”是較差的 （尤其是當我寫了很多個else if，效能更差）

🎃 使用「switch」

瀏覽器在編譯時，只需要把「變數」去跟「case」做比對，如果有相符，才會去執行裡面的程式碼–> 在效能方面是較好的

在「使用時機」的差異

🎃 使用「if、else if、else」

• 在不同的條件區間（if、else if），可以執行不同的效果

• 如果“沒有符合”任何條件，就會執行「else」的程式碼

🎃 使用「switch」

適合用在：
🍋 一定會有相符的值

🍋 已經確定「會有哪些狀態」了，就可以針對「不同狀態」，依序去執行不同的程式碼

‼️ 注意！當需要使用過多else if的時候，可以改用「switch」

• 使用「switch」不僅可以讓程式碼更好閱讀，也可以節省一些效能

switch 範例練習

現在，我要寫的是：在不同警戒狀態時，會出現「不同的提示文字」

「不同警戒狀態」所對應的文字，會是固定的–> 這時就很適合使用「switch」來寫

🎃 先宣告一個變數：警戒狀態是紅色的 var light = 'red';

🎃 在switch(){}寫上兩個條件：

var light = 'red';

switch(){
    case 'red':
        alert('紅色警戒');
        break;
    
    case 'blue':
        alert('藍色警戒');
        break;
}

執行 switch

🎃 switch 在「小括號()」帶入變數「light」後，就“一定會”執行「大括號{}」內的程式碼

🎃 帶入變數「light」後，就會開始跟「case的值」做比對依序比對：

• 比對第一個case：light是否有== 'red'）
• 比對第二個case：light是否有== 'blue'）

🎃 變數「light」的值，如果跟這個case的值相符，就會執行「這個case裡面的程式碼」

JS:

var light = 'red';

switch(light){
    case 'red':
        alert('紅色警戒');
        break;
    
    case 'blue':
        alert('藍色警戒');
        break;
}

🎃 可以看到，因為我設定的變數var light = 'red';，因此會執行「alert('紅色警戒');」

default:

🎃 如果變數都沒有找到「相符合的case」，就會執行「default:的程式碼」

JS:

var light = '';

switch(light){
    case 'red':
        alert('紅色警戒');
        break;

    case 'blue':
        alert('藍色警戒');
        break;

    default:
        alert('沒有任何資料');
        break;
}

• 因為我把變數的值拿掉了
• 找不到「相符合的case」
• 就會執行「default:的程式碼」

在switch執行 function

JS:

🎃 在外面先設定好一個 function

function lightFun(str){
    console.log('目前是' + str + '警戒');
}

🎃 在case 'blue':帶入這個 function

var light = 'blue';

function lightFun(str){
    console.log('目前是' + str + '警戒');
}

switch(light){
    case 'red':
        alert('紅色警戒');
        break;

    case 'blue':
        lightFun(light);
        break;

    default:
        alert('沒有任何資料');
        break;
}

🎃 Console 就會顯示出console.log('目前是' + str + '警戒');