iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
0
自我挑戰組

這些日子我學到的JavaScript 系列 第 13

這些日子我學到的JavaScript:Day13-if...else / switch

  • 分享至 

  • xImage
  •  

if...else
if 後面的小括號內,為條件式;當條件成立時會執行大括號內的程式碼,稱為陳述式。如果在條件不成立的時候,也想要執行特定的動作,就在 if 大括號外面使用 else 語法。

if (條件,由比較運算子或邏輯運算子組成){
如果條件成立,就會執行這裡的程式碼;
} else {
如果條件不成立,就會執行這裡的程式碼;
}
else if
當判斷情境更複雜時,這時 if...else 就可以搭配 else if,用來新增條件判斷。

if(條件一){
如果條件一成立,就執行選項A;
} else if (條件二){
如果條件一不成立但條件成立,就執行選項B;
} else{
如果條件一跟二都不成立,就執行選項C;
}
再次提醒,括號內的條件需要透過運算子來進行兩次判斷,例如:else if (18.5 <= BMI && BMI < 25)。或是也可以省略 && 左邊的判斷運算子,為什麼呢?
以這個例子來說,如果 BMI 小於 18.5,那在第一條判斷是否小於 18.5 就會通過,並執行第一個條件判斷的內容了,所以如果程式跑到第二個條件,代表他一定大於 18.5 了。(參考資料:條件判斷.30 天 JavaScript 從入門到進階)

if...else + else if 範例
var full = 8
// 飽足程度 1~10
function eat(food){
console.log('我現在要吃'+food);
}
if (full<=3){
eat('披薩');
//飽足程度小於等於 3 時,呼叫帶入'披薩'作為參數的 eat 函式
} else if (full<=7 && full>3){
eat('沙拉');
//飽足程度小於等於 7 且大於 3 時,呼叫帶入'沙拉'作為參數的 eat 函式
} else{
console.log('我超飽不想吃東西');
}
switch 的用法
switch 跟 if...else 很像,都是拿來設條件、比對、跑結果用的,但因為 switch 會先將所有條件(case)先跑過一遍,找到符合的條件才會執行程式碼,因此網頁渲染的效能比較好。通常是有很多條件的時候才需要用到 switch。

switch(參數){
case 條件一 :
參數與條件一符合,執行相關的程式碼;
break;
// 每個 case: 後方都會補上 break; 來阻止已完成的區塊在後方繼續執行
case 條件二 :
參數與條件二符合,執行相關的程式碼;
break;
default:
如果沒有任何一個 case: 符合參數,就執行相關的程式碼;
break;
}
switch 後面小括號內的參數,是跟各條件比較的基準,如果參數剛好與 case 後面的值一樣,就面執行 case 區塊內的指令。而 default 的區塊就是當上面所有 case 都不成立的時候會執行。每個 case 區塊都應該加上 break 作為結束,break 的用途是停止執行後面的程式碼。如果不加 break,switch 中的每一個 case 都會執行。


上一篇
這些日子我學到的JavaScript:Day12-運算子
下一篇
這些日子我學到的JavaScript:Day13-迴圈
系列文
這些日子我學到的JavaScript 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言