JavaScript 基礎：運算子與條件判斷

各位好！

這篇是 JavaScript 系列的第三單元，我們要學習如何用運算子進行計算，以及如何讓程式根據不同條件做出決策。

算術運算子

用於數學計算的基本運算子。

// 基本四則運算
console.log(10 + 5);   // 15（加法）
console.log(10 - 5);   // 5（減法）
console.log(10 * 5);   // 50（乘法）
console.log(10 / 5);   // 2（除法）
console.log(10 % 3);   // 1（取餘數）
console.log(2 ** 3);   // 8（次方，2 的 3 次方）

// 遞增與遞減
let count = 0;
count++;        // 等同於 count = count + 1
console.log(count);  // 1

count--;        // 等同於 count = count - 1
console.log(count);  // 0

// 前置與後置的差異
let a = 5;
console.log(a++);  // 5（先使用，後遞增）
console.log(a);    // 6

let b = 5;
console.log(++b);  // 6（先遞增，後使用）
console.log(b);    // 6

賦值運算子

用於給變數賦值的簡寫方式。

let x = 10;

// 複合賦值運算子
x += 5;   // 等同於 x = x + 5
console.log(x);  // 15

x -= 3;   // 等同於 x = x - 3
console.log(x);  // 12

x *= 2;   // 等同於 x = x * 2
console.log(x);  // 24

x /= 4;   // 等同於 x = x / 4
console.log(x);  // 6

x %= 4;   // 等同於 x = x % 4
console.log(x);  // 2

x **= 3;  // 等同於 x = x ** 3
console.log(x);  // 8

比較運算子

用於比較兩個值，回傳布林值（true 或 false）。

// 相等比較
console.log(5 == 5);      // true（相等，會自動轉型）
console.log(5 == "5");    // true（會把 "5" 轉成數字）
console.log(5 === 5);     // true（嚴格相等，不轉型）
console.log(5 === "5");   // false（型別不同）

console.log(5 != 3);      // true（不相等）
console.log(5 !== "5");   // true（嚴格不相等）

// 大小比較
console.log(5 > 3);       // true（大於）
console.log(5 < 3);       // false（小於）
console.log(5 >= 5);      // true（大於等於）
console.log(5 <= 3);      // false（小於等於）

// 字串比較（按字典順序）
console.log("apple" < "banana");  // true
console.log("a" < "A");           // false（小寫 > 大寫）

重要原則： 永遠使用 === 和 !==，避免使用 == 和 !=，以防止意外的型別轉換。

邏輯運算子

用於組合多個條件。

// && (且)：所有條件都為 true 才回傳 true
console.log(true && true);    // true
console.log(true && false);   // false
console.log(false && false);  // false

const age = 25;
const hasLicense = true;
if (age >= 18 && hasLicense) {
  console.log("可以開車");
}

// || (或)：任一條件為 true 就回傳 true
console.log(true || false);   // true
console.log(false || false);  // false

const isWeekend = false;
const isHoliday = true;
if (isWeekend || isHoliday) {
  console.log("今天不用上班");
}

// ! (非)：反轉布林值
console.log(!true);   // false
console.log(!false);  // true

const isLoggedIn = false;
if (!isLoggedIn) {
  console.log("請先登入");
}

// 短路求值（Short-circuit evaluation）
const user = null;
const name = user && user.name;  // user 為 null，直接回傳 null
console.log(name);  // null

const defaultName = "" || "訪客";  // "" 是 falsy，回傳 "訪客"
console.log(defaultName);  // "訪客"

if 條件判斷

根據條件執行不同的程式碼。

基本 if 語句

const age = 18;

if (age >= 18) {
  console.log("你是成年人");
}

if-else

const score = 75;

if (score >= 60) {
  console.log("及格");
} else {
  console.log("不及格");
}

if-else if-else

const score = 85;

if (score >= 90) {
  console.log("優秀");
} else if (score >= 80) {
  console.log("良好");
} else if (score >= 60) {
  console.log("及格");
} else {
  console.log("不及格");
}

巢狀 if

const age = 20;
const hasTicket = true;

if (age >= 18) {
  if (hasTicket) {
    console.log("可以入場");
  } else {
    console.log("請先購票");
  }
} else {
  console.log("未成年不得入場");
}

多重條件

const username = "admin";
const password = "1234";

if (username === "admin" && password === "1234") {
  console.log("登入成功");
} else {
  console.log("帳號或密碼錯誤");
}

三元運算子（Ternary Operator）

簡潔的條件判斷寫法，適合簡單的 if-else。

// 語法：條件 ? 為 true 時執行 : 為 false 時執行

const age = 20;
const status = age >= 18 ? "成年人" : "未成年";
console.log(status);  // "成年人"

// 等同於：
let status2;
if (age >= 18) {
  status2 = "成年人";
} else {
  status2 = "未成年";
}

// 巢狀三元運算子（不建議過度使用）
const score = 85;
const grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 60 ? "C" : "D";
console.log(grade);  // "B"

使用時機： - 簡單的二選一賦值 - 回傳值的決策

避免使用： - 複雜的邏輯 - 巢狀超過兩層

switch 語句

當需要根據單一變數的不同值執行不同程式碼時使用。

const day = "星期一";

switch (day) {
  case "星期一":
    console.log("工作日");
    break;
  case "星期二":
  case "星期三":
  case "星期四":
  case "星期五":
    console.log("工作日");
    break;
  case "星期六":
  case "星期日":
    console.log("週末");
    break;
  default:
    console.log("無效的日期");
}

// 使用數字
const month = 3;
let season;

switch (month) {
  case 12:
  case 1:
  case 2:
    season = "冬天";
    break;
  case 3:
  case 4:
  case 5:
    season = "春天";
    break;
  case 6:
  case 7:
  case 8:
    season = "夏天";
    break;
  case 9:
  case 10:
  case 11:
    season = "秋天";
    break;
  default:
    season = "無效的月份";
}

console.log(season);  // "春天"

注意： 每個 case 都要加 break，否則會繼續執行下一個 case（稱為 "fall-through"）。

實戰練習

練習 1：BMI 計算與判定

function calculateBMI(weight, height) {
  const bmi = weight / (height ** 2);
  let category;

  if (bmi < 18.5) {
    category = "體重過輕";
  } else if (bmi < 24) {
    category = "正常範圍";
  } else if (bmi < 27) {
    category = "過重";
  } else {
    category = "肥胖";
  }

  return {
    bmi: bmi.toFixed(2),
    category: category
  };
}

const result = calculateBMI(70, 1.75);
console.log(`BMI: ${result.bmi}, 判定: ${result.category}`);

練習 2：成績等級轉換

function getGrade(score) {
  if (score < 0 || score > 100) {
    return "無效分數";
  }

  if (score >= 90) return "A";
  if (score >= 80) return "B";
  if (score >= 70) return "C";
  if (score >= 60) return "D";
  return "F";
}

console.log(getGrade(85));   // "B"
console.log(getGrade(55));   // "F"
console.log(getGrade(150));  // "無效分數"

練習 3：閏年判斷

function isLeapYear(year) {
  // 能被 400 整除，或能被 4 整除但不能被 100 整除
  return (year % 400 === 0) || (year % 4 === 0 && year % 100 !== 0);
}

console.log(isLeapYear(2024));  // true
console.log(isLeapYear(2023));  // false
console.log(isLeapYear(2000));  // true
console.log(isLeapYear(1900));  // false

練習 4：折扣計算

function calculateDiscount(amount, memberType) {
  let discount = 0;

  switch (memberType) {
    case "VIP":
      discount = 0.2;  // 8 折
      break;
    case "金卡":
      discount = 0.15;  // 85 折
      break;
    case "銀卡":
      discount = 0.1;   // 9 折
      break;
    case "一般":
      discount = 0;
      break;
    default:
      return "無效的會員類型";
  }

  const discountAmount = amount * discount;
  const finalAmount = amount - discountAmount;

  return {
    原價: amount,
    折扣: `${(1 - discount) * 10} 折`,
    折扣金額: discountAmount,
    實付金額: finalAmount
  };
}

console.log(calculateDiscount(1000, "VIP"));
// { 原價: 1000, 折扣: '8 折', 折扣金額: 200, 實付金額: 800 }

練習 5：時間問候

function getGreeting() {
  const hour = new Date().getHours();
  let greeting;

  if (hour < 6) {
    greeting = "夜深了，早點休息";
  } else if (hour < 12) {
    greeting = "早安";
  } else if (hour < 18) {
    greeting = "午安";
  } else if (hour < 22) {
    greeting = "晚安";
  } else {
    greeting = "夜深了，早點休息";
  }

  return greeting;
}

console.log(getGreeting());

常見陷阱與最佳實踐

1. 比較運算子的選擇

// 不好
if (age == "18") {  // 會自動轉型，可能造成意外
  console.log("成年了");
}

// 好
if (age === 18) {  // 明確型別比較
  console.log("成年了");
}

2. 條件判斷的簡化

// 不好
if (isActive === true) {
  console.log("啟用中");
}

// 好
if (isActive) {
  console.log("啟用中");
}

// 不好
if (count > 0) {
  return true;
} else {
  return false;
}

// 好
return count > 0;

3. 避免過深的巢狀

// 不好
if (user) {
  if (user.age) {
    if (user.age >= 18) {
      console.log("成年人");
    }
  }
}

// 好（提早返回）
if (!user) return;
if (!user.age) return;
if (user.age >= 18) {
  console.log("成年人");
}

4. switch 的 break

// 危險：忘記 break
switch (level) {
  case 1:
    console.log("等級 1");
    // 沒有 break，會繼續執行
  case 2:
    console.log("等級 2");
    break;
}
// 輸入 1 會印出「等級 1」和「等級 2」

// 正確
switch (level) {
  case 1:
    console.log("等級 1");
    break;
  case 2:
    console.log("等級 2");
    break;
}

小結

這篇我們學習了：

• 算術運算子：基本數學計算
• 賦值運算子：簡化變數賦值
• 比較運算子：比較兩個值
• 邏輯運算子：組合多個條件
• if-else：條件分支
• 三元運算子：簡潔的條件表達式
• switch：多分支選擇

下一步：

完成這篇後，你已經能夠： - 進行各種運算和比較 - 讓程式根據條件做決策 - 選擇適合的條件判斷語法

前往下一篇：單元四：函式

在那裡，我們會學習如何組織可重複使用的程式碼。