iT邦幫忙

1

[JavaScript學習筆記] - if 判斷式

  • 分享至 

  • xImage
  •  

情境一:自動販賣機買飲料
你有 50 元,一瓶飲料要 35 元。進入販賣機時,機器要判斷你的錢夠不夠。

https://ithelp.ithome.com.tw/upload/images/20260628/20182927qLmGxPEPpb.png

const myMoney = 50;
const drinkPrice = 35;
if (myMoney >= drinkPrice) {
  console.log("購買成功!找回 " + (myMoney - drinkPrice) + " 元");
} else {
  console.log("餘額不足,請再投入 " + (drinkPrice - myMoney) + " 元");
} 
// 輸出 購買成功!找回 15 元

情境二:考試成績評級
考試結果出來了,根據分數判斷是及格、良好、還是優秀。

https://ithelp.ithome.com.tw/upload/images/20260628/20182927dY5ouFxSiE.png

const score = 85;
if (score >= 90) {
  console.log("⭐ 優秀!繼續保持");
} else if (score >= 70) {
  console.log("👍 良好,還有進步空間");
} else {
  console.log("📚 待加強,加油!");
}
// 輸出👍 良好,還有進步空間

情境三:點餐系統
根據顧客點的餐點名稱,輸出對應的價格
https://ithelp.ithome.com.tw/upload/images/20260628/20182927D2ldC52u2K.png

const order = "滷肉飯";
if (order === "牛肉麵") {
  console.log("牛肉麵,價格:120 元");
} else if (order === "滷肉飯") {
  console.log("滷肉飯,價格:60 元");
} else if (order === "排骨飯") {
  console.log("排骨飯,價格:80 元");
} else {
  console.log("查無此餐點,請重新點餐");
}// 輸出滷肉飯,價格:60 元

情境四:捷運驗票閘門
乘客刷卡時,系統判斷票種是否有效,才決定是否開門放行
https://ithelp.ithome.com.tw/upload/images/20260628/20182927TB4cwJUxqz.png

const ticket = "一日票";
if (ticket === "一日票" || ticket === "定期票" || ticket === "單程票") {
  console.log("票種有效,閘門開放,請進!");
} else {
  console.log("票種無效,請洽服務台");
} // 輸出 票種有效,閘門開放,請進!
  • if與 else 只能只有一組(頭跟尾)
  • else if 可以很多組
  • else 後面不能加小括號 (),只能直接接大括號 {}
  • 當條件超過兩種時,就往中間插入 else if 來處理,JS 會依序從上往下檢查,命中第一個符合條件就停下來,後面的不再執行。

當你的 else if 數量過多(例如超過 5-6 個)時,程式碼容易變得難以閱讀。
可以考慮以下寫法來優化架構

  1. switch / case
    當條件都是針對「同一個變數」做一對一的值比對時,switch 比一串 else if 更清楚易讀

  2. 物件查表法(Object Lookup)
    把對應關係直接存進一個物件,用 key 去取值,完全不需要判斷式。適合「輸入對應輸出」這類固定映射的場景

  3. 陣列 + find / filter
    當條件有規律可循(例如分數落在某個區間),可以把規則存成陣列,再用 find() 找到第一個符合的項目

  4. 提早 return(Early Return)
    在函式裡把「特殊狀況」先各自 return 掉,讓主流程只處理正常情況,減少巢狀結構與 else if 的堆疊.

  5. 策略模式(Strategy Pattern)
    把每個條件分支的邏輯各自包成獨立的函式,再用物件或 Map 對應起來,呼叫時直接取出對應函式執行。屬於較進階的做法,適合每個分支邏輯較複雜的情況。

選擇哪種方式,主要看兩件事:條件的性質(是精確比對、還是範圍判斷)以及每個分支的複雜度(只是回傳一個值、還是有一段邏輯要執行)。

else 並不是必須的,只有在「不符合條件時也需要做某件事」才需要加
情境五:購物車折扣系統
結帳時,滿額就自動折扣,不滿額就照原價,兩種情況最後都要印出總金額

let total = 1500; // 購物車金額
if (total >= 1000) {
  total = total * 0.9; // 打九折
  console.log("滿千折扣已套用!");
}
console.log("您的結帳金額:" + total + " 元");
//輸出 滿千折扣已套用!
//輸出 您的結帳金額:1350 元

圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言