娶了UI設計師的Python工程師-北歐生活

今天的JavaScript課程,要分享的是switch條件式,還不熟悉的朋友可要把握機會啦!

switch 條件式

在 JavaScript 中，若你有多個條件需要測試的話，為每個條件編寫 if...else 語句可能不是那麼有效率。此時，前端工程師們可以使用 switch 敘述式，就可以依據不同的條件而執行所指定的程式。 switch 用法如下面代碼所示：

See the Pen JavaScript8-switch-1 by Tedutw (@Tedutw) on CodePen.

switch 敘述式只運算一次，我們需要看看敘述是否符合各個情況(case)所指定的條件。當有條件成立時，就會執行該情況(case)所對應的程式。

如以下例子：變數「day」若為 1 時則輸出「Mon」、為 2 時，則輸出「Tue」、為 3 則輸出「Wed」、為 4 則輸出「Thu」、為 5 則輸出「TGIF」，都不符合就輸出「Weekend day」。

See the Pen JavaScript8-switch-2 by Tedutw (@Tedutw) on CodePen.

註1：以上例子，前端工程師們也可以使用 if...else 條件式 來寫，但不如 switch 來的精簡。

註2：每一個 case 中的「break」語句，作用是讓 JavaScript 跳出該 switch 程式區塊，以阻止更多的程式碼執行、或是繼續在該區塊內繼續測試的動作。通常一種情況（case）的條件陳述中，會放一個「break」。

switch 條件式中的「default」

當所有條件都不成立時，「default」關鍵字指定 JavaScript 要執行的動作。

如下例，若變數「member」的值都不符合所有情況（case）的條件陳述時，JavaScript 就跑到「default」，顯示「不是Stratovarius的現任團員」。

以下的變數（var）「member」的值為 「Tokki」，讓我們來看看是否符合每個情況（case）的條件陳述。

See the Pen JavaScript8-switch-3 by Tedutw (@Tedutw) on CodePen.