iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 13
0
Modern Web

JavaScript 初心者筆記系列 第 13

JavaScript 初心者筆記: 判斷式 - if...else / switch 篇

接續昨天學到的比較運算子跟邏輯運算子,今天終於進入正題:判斷式。判斷式是 JavaScript 用來控制流程的,當指定的條件成立時,就會執行後續的指令。判斷式的語法有兩種:if...elseswitch

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 的用法

switchif...else 很像,都是拿來設條件、比對、跑結果用的,但因為 switch 會先將所有條件(case)先跑過一遍,找到符合的條件才會執行程式碼,因此網頁渲染的效能比較好。通常是有很多條件的時候才需要用到 switch

switch(參數){
case 條件一 :
  參數與條件一符合,執行相關的程式碼;
  break;
  // 每個 case: 後方都會補上 break; 來阻止已完成的區塊在後方繼續執行
case 條件二 :
  參數與條件二符合,執行相關的程式碼;
  break;
default:
  如果沒有任何一個 case: 符合參數,就執行相關的程式碼;
  break;
}

switch 後面小括號內的參數,是跟各條件比較的基準,如果參數剛好與 case 後面的值一樣,就面執行 case 區塊內的指令。而 default 的區塊就是當上面所有 case 都不成立的時候會執行。每個 case 區塊都應該加上 break 作為結束,break 的用途是停止執行後面的程式碼。如果不加 breakswitch 中的每一個 case 都會執行。


昨天太累了所以忘記祝大家中秋節快樂,今年中秋連假我帶媽媽一起到金門玩,所以我昨天跟今天的文章都是在金門的民宿裡發的。
帶長輩出門自助真的很累(好在國內旅遊至少語言相通),而且還要不忘鐵人賽,也算是渡過一個難忘的中秋節吧~


上一篇
JavaScript 初心者筆記: 判斷式 - 運算子篇
下一篇
JavaScript 初心者筆記: 迴圈簡介
系列文
JavaScript 初心者筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言