Back
PQCHub

JavaScript 基礎 (III) – 條件判斷、迴圈

學會條件判斷與迴圈。掌握 JavaScript 核心邏輯，讓程式能做選擇並重複執行任務。

1 JavaScript 條件判斷

在程式中，條件判斷用來根據不同狀況決定程式的執行流程。JavaScript 提供 if...else 來完成這個功能。

1.1 if...else 基本語法

if (條件) {
    // 條件為 true 時執行
} 
else {
    // 條件為 false 時執行
}

範例：

let score = 85;

if (score >= 60) {
    console.log("及格");
} 
else {
    console.log("不及格");
}
  • if 判斷條件是否成立
  • else 處理不成立的情況

1.2 if...else if...else 範例

多個條件可以使用 else if：

let score = 78;

if (score >= 90) {
    console.log("優秀");
} 
else if (score >= 80) {
    console.log("良好");
} 
else if (score >= 60) {
    console.log("及格");
} 
else {
    console.log("不及格");
}
  • 條件會從上到下依序判斷
  • 第一個符合的條件成立就執行，後面條件不再判斷

1.3 邏輯運算（Logical Operators）

當條件判斷逐漸複雜時，常常需要同時檢查多個布林表達式。JavaScript 提供三種主要的邏輯運算符：&&（AND）、||（OR）、!（NOT）。下表整理它們的行為：

運算子 中文名稱 運算規則 範例 結果
&& AND 左右兩邊都為 true，結果才為 true；否則為 false true && false false
|| OR 任一邊為 true，結果就為 true；兩邊都為 false 才為 false false || true true
! NOT 將後方布林值取反，!true 變 false，!false 變 true ! (score >= 60) true 或 false

1.3.1 AND 範例：範圍內判斷

let score = 75;

if (score >= 60 && score <= 80) {
  console.log("成績 60~80 之間");   // 75 >= 60 且 75 <= 80
} 
else {
  console.log("不在此範圍");
}

1.3.2 OR 範例：多條件或判斷

let score = 95;

if (score < 60 || score > 90) {
  console.log("分數不及格或非常優秀"); // 95 > 90
} 
else {
  console.log("一般分數區間");
}

1.3.3 NOT 範例：反向檢查

let passed = (score >= 60);

if (!passed) {
  console.log("需要重考");   // passed 為 false 時
} 
else {
  console.log("已通過");
}

1.4 比較運算子（Comparison Operators）

在條件判斷中，我們需要比較運算子來檢查兩個值的關係。JavaScript 提供多種比較運算子：

運算子 名稱 說明 範例 結果
> 大於 左邊值大於右邊值 85 > 60 true
< 小於 左邊值小於右邊值 45 < 60 true
>= 大於等於 左邊值大於或等於右邊值 60 >= 60 true
<= 小於等於 左邊值小於或等於右邊值 55 <= 60 true
=== 嚴格相等 值和型別都相同 "5" === 5 false
!== 嚴格不等 值或型別不同 "5" !== 5 true
== 寬鬆相等 值相同（會自動轉型） "5" == 5 true
!= 寬鬆不等 值不同（會自動轉型） "5" != 5 false

1.4.1 數值比較範例

let score = 85;

console.log(score > 80);   // true
console.log(score < 90);   // true
console.log(score >= 85);  // true
console.log(score <= 100); // true

1.4.2 相等比較的重要差異

嚴格比較（推薦使用）：

let score = 80;
let scoreStr = "80";

console.log(score === 80);        // true（數值相等，型別也相同）
console.log(score === scoreStr);  // false（值相同但型別不同）
console.log(score !== scoreStr);  // true（值相同但型別不同）

寬鬆比較（容易出錯）：

console.log(score == scoreStr);   // true（自動轉型後比較）
console.log(score != scoreStr);   // false（自動轉型後比較）

// 容易出錯的例子
console.log(0 == false);     // true（自動轉型）
console.log("" == false);    // true（自動轉型）
console.log(null == undefined); // true（自動轉型）

👉 建議：總是使用 === 和 !==，避免意外的型別轉換！

1.4.3 字串比較

let name1 = "Alice";
let name2 = "Bob";
let name3 = "Alice";

console.log(name1 === name3);  // true
console.log(name1 !== name2);  // true
console.log(name1 > name2);    // false（按字典順序比較）
console.log(name2 > name1);    // true（B > A）

1.4.4 實務應用範例

分數等級判斷：

let score = 78;

if (score >= 90) {
  console.log("A級 - 優秀");
} 
else if (score >= 80) {
  console.log("B級 - 良好");
} 
else if (score >= 70) {
  console.log("C級 - 尚可");
} 
else if (score >= 60) {
  console.log("D級 - 及格");
} 
else {
  console.log("F級 - 不及格");
}
// 輸出：C級 - 尚可

年齡範圍檢查：

let age = 19;

if (age >= 18 && age <= 25) {
  console.log("青年組");
} 
else if (age >= 26 && age <= 40) {
  console.log("壯年組");
} 
else {
  console.log("其他組別");
}
// 輸出：青年組

1.4.5 常見陷阱與注意事項

1. 浮點數比較問題：

let result = 0.1 + 0.2;
console.log(result);           // 0.30000000000000004
console.log(result === 0.3);   // false

// 正確的浮點數比較方式
console.log(Math.abs(result - 0.3) < 0.0001); // true

2. undefined 和 null 的比較：

let score;
console.log(score === undefined); // true
console.log(score === null);      // false
console.log(score == null);       // true（寬鬆比較會轉換）

3. 字串和數值的混合：

let input = "85";  // 來自使用者輸入
let passingScore = 60;

// 錯誤的比較方式
console.log(input > passingScore);  // true（字串會轉為數值）

// 正確的比較方式
console.log(Number(input) > passingScore);  // true
console.log(parseInt(input) > passingScore); // true

2 JavaScript 迴圈

迴圈用來重複執行相同程式碼，在資料處理中特別常用。

2.1 for 迴圈

語法：

for (初始值; 條件; 變化) {
    // 每次迴圈執行的程式
}

範例：

for (let i = 1; i <= 5; i++) {
    console.log("第 " + i + " 次迴圈");
}
  • i=1 從 1 開始
  • i <= 5 條件成立時迴圈持續
  • i++ 每次迴圈後增加 1

2.2 for...of 迴圈（陣列）

用來遍歷陣列元素：

let scores = [90, 85, 78, 92];

for (let score of scores) {
    console.log("分數:", score);
}
  • 適合用於處理資料集合
  • 簡化索引操作

2.3 for...in 迴圈（物件）

let data = { 
    a: 90,
    b: 85, 
    c: 78, 
    d: 92
};

for (let keys in scores) {
    console.log(`${keys} 的分數`:, score);
}

2.4 while 迴圈

條件成立就持續執行：

let i = 0;
let scores = [90, 85, 78, 92];

while (i < scores.length) {
    console.log("分數:", scores[i]);
    i++;
}

2.4 小練習

  1. 建立一個陣列 myScores，存放三科分數
  2. 用 for 迴圈列印每個分數
  3. 用 for...of 再次列印每個分數

3 成績處理實務範例

本週練習目標：計算平均分數與最高分

3.1 平均分數範例

let scores = [90, 85, 78, 92];
let sum = 0;

for (let score of scores) {
    sum += score;
}

let avg = sum / scores.length;
console.log("平均分數:", avg);

3.2 最高分範例

let scores = [90, 85, 78, 92];
let max = scores[0];

for (let score of scores) {
    if (score > max) {
        max = score;
    }
}

console.log("最高分:", max);

3.3 小練習

  1. 建立一個陣列 myScores，放入 5 科分數
  2. 計算平均分數並印出
  3. 找出最高分並印出

4 條件判斷的應用

4.1 判斷是否及格

我們可以用 if 判斷分數是否及格：

let score = 72;

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

4.2 與迴圈結合

對多個分數判斷是否及格：

let scores = [90, 45, 78, 60, 88];

for (let score of scores) {
    if (score >= 60) {
        console.log(score, "=> 及格");
    } else {
        console.log(score, "=> 不及格");
    }
}

4.3 小練習

  1. 建立一個陣列 scores
  2. 用 for 迴圈逐一判斷每個分數是否及格
  3. 把結果印出來

---新身分

5 成績計算進階

5.1 找出最高分與最低分

除了最高分，我們也能找到最低分：

let scores = [90, 85, 78, 92, 66];

let max = scores[0];
let min = scores[0];

for (let score of scores) {
    if (score > max) {
        max = score;
    }
    if (score < min) {
        min = score;
    }
}

console.log("最高分:", max);
console.log("最低分:", min);

5.2 計算平均並判斷結果

我們可以同時計算平均分數，並判斷「全班平均是否及格」。

let scores = [90, 85, 78, 92, 66];

let sum = 0;
for (let score of scores) {
    sum += score;
}

let avg = sum / scores.length;
console.log("平均分數:", avg);

if (avg >= 60) {
    console.log("全班平均及格");
} else {
    console.log("全班平均不及格");
}

5.3 小練習

  1. 建立一個陣列 scores，存放 6 個分數
  2. 用迴圈計算平均
  3. 用條件判斷全班平均是否及格
  4. 額外：找出最高分與最低分

6 綜合練習：成績報表

現在我們要整合所學內容，產生一個「成績報表」。

6.1 範例程式

let scores = [90, 45, 78, 60, 88];
let sum = 0;
let max = scores[0];
let min = scores[0];

for (let score of scores) {
    sum += score;

    if (score > max) {
        max = score;
    }
    if (score < min) {
        min = score;
    }

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

let avg = sum / scores.length;

console.log("平均分數:", avg);
console.log("最高分:", max);
console.log("最低分:", min);

6.2 預期輸出

90 => 及格
45 => 不及格
78 => 及格
60 => 及格
88 => 及格
平均分數: 72.2
最高分: 90
最低分: 45

7 多位學生的成績處理

7.1 建立學生資料陣列

假設班上有三位學生，每位學生有三科分數，我們可以用陣列的陣列表示：

let students = [
    ["Alice", 90, 85, 78],
    ["Bob", 80, 75, 88],
    ["Charlie", 60, 70, 65]
];
  • 每個子陣列第一個元素是姓名
  • 後面是各科分數

7.2 計算每位學生的平均分數

for (let student of students) {
    let name = student[0];
    let scores = student.slice(1); // 取出分數
    let sum = 0;

    for (let score of scores) {
        sum += score;
    }

    let avg = sum / scores.length;
    console.log(name, "平均分數:", avg);
}

7.3 判斷及格與不及格

我們可以同時判斷每位學生是否及格（平均分數 ≥ 60）：

for (let student of students) {
    let name = student[0];
    let scores = student.slice(1);
    let sum = 0;

    for (let score of scores) {
        sum += score;
    }

    let avg = sum / scores.length;
    let result = avg >= 60 ? "及格" : "不及格";

    console.log(name, "平均分數:", avg, "=>", result);
}
  • 使用 ? : 三元運算子判斷及格與否
  • 可快速在一行程式內完成條件判斷

8 全班最高分與最低分

8.1 找出全班最高分

let highest = students[0][1]; // 初始化為第一個學生第一科
for (let student of students) {
    let scores = student.slice(1);
    for (let score of scores) {
        if (score > highest) {
            highest = score;
        }
    }
}
console.log("全班最高分:", highest);

8.2 找出全班最低分

新身分

let lowest = students[0][1];
for (let student of students) {
    let scores = student.slice(1);
    for (let score of scores) {
        if (score < lowest) {
            lowest = score;
        }
    }
}
console.log("全班最低分:", lowest);

9 綜合報表

我們可以整合以上內容，生成完整的成績報表：

for (let student of students) {
    let name = student[0];
    let scores = student.slice(1);
    let sum = 0;

    for (let score of scores) {
        sum += score;
    }

    let avg = sum / scores.length;
    let result = avg >= 60 ? "及格" : "不及格";
    console.log(name, "分數:", scores.join(","), "平均:", avg, "=>", result);
}

// 計算全班最高分與最低分
let allScores = [];
for (let student of students) {
    allScores = allScores.concat(student.slice(1));
}

let max = allScores[0];
let min = allScores[0];

for (let score of allScores) {
    if (score > max) max = score;
    if (score < min) min = score;
}

console.log("全班最高分:", max);
console.log("全班最低分:", min);
SNPQ © 2025