iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Modern Web

從零開始的JS學習之路系列 第 8

[Day08] 流程判斷:if else 與 switch

「如果怎樣就做某件事,否則做另一件事。」這個在聊天時都會拿來用的“程式語法”,來看看在 JS 上怎麼運作。
當指定的條件為 true,就會執行後續的指令,JavaScript 條件語法有:if...else 和 switch 兩種。

1. if else

if (條件式) { // 如果怎樣
 // 就做某件事
}
else { // 否則
  // 做另一件事
}  
else if (條件式 2) { // 新增條件式 2 的狀況
  // 做另一件事
}
else if (條件式 3) { // 新增條件式 3 
  // 做另一件事
} 
// p.s. else 可以有也可以沒有

在 Visual Studio Code 上的範本

用來判斷某月份是第幾季度,用上前面介紹過的 ===||

var month = 3;
if ( month === 1 || month === 2 || month === 3 ) {
  console.log("第一季");
}
else if ( month === 4 || month === 5 || month === 6 ) {
  console.log("第二季");
}
else if ( month === 7 || month === 8 || month === 9 ) {
  console.log("第三季");
}
else if ( month === 10 || month === 11 || month === 12 ) {
  console.log("第四季");
}
else {
  console.log("月份錯誤");
}
第一季

因為符合條件式 1,所以回傳第一季。

Math.ceil() 函式會回傳大於等於所給數字的最小整數。 -- MDN

因為判斷式太多不好維護,可以用 Math.ceil 改成:

var month = 3;
if ( Math.ceil( month / 3 ) === 1 ) {
  console.log("第一季");
}
else if ( Math.ceil( month / 3 ) === 2 ) {
  console.log("第二季");
}
else if ( Math.ceil( month / 3 ) === 3 ) {
  console.log("第三季");
}
else if ( Math.ceil( month / 3 ) === 4 ) {
  console.log("第四季");
}
else {
  console.log("月份錯誤");
}
第一季 // 結果相同,也更簡潔

而雖然已經變得簡短,但如果 month 剛好是第四季,那就要做到第四次判斷才會跑出結果,所以這時候可以改用 switch 的語法。

2. Switch

switch 語句會比對表達式裡頭的值是否符合 case 條件,然後執行跟這個條件相關的陳述式, 以及此一符合條件以外,剩下其他條件裡的陳述式。

switch (表達式或變數) {
  case value: // 表達式的值
    
    break; // 每次都要加,不然程式會一路跑到底

  default: // 預設值,如果 case 條件都不成立就執行 
    break;
}

在 Visual Studio Code 上的範本 switch MDN 說明

剛剛的條件改寫成 switch 後變得更簡潔。

var month = 11;
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;
}
第四季 //

上一篇
[Day07] 賦值運算子、逗號運算子、邏輯運算子筆記
下一篇
[Day09] while、for 迴圈
系列文
從零開始的JS學習之路30

尚未有邦友留言

立即登入留言