程式寫到一定程度，光靠函式與變數是不夠的，我們需要控制流程，決定程式什麼時候做什麼、重複做多少次，或遇到特定條件時跳過或停止，今天來把之前簡略提到過的再更詳細的說說~~

1. 條件判斷進階

比較與邏輯運算子

程式最重要的能力，就是能比較、能判斷

// 比較運算符
console.log(2 == '2');   // true，因為 JS 自動幫你轉型
console.log(2 === '2');  // false，型別不同
console.log(5 > 3);      // true
console.log(10 <= 7);    // false

// 邏輯運算符
let a = true;
let b = false;

console.log(a && b); // false，兩者都要 true 才行
console.log(a || b); // true，只要有一個 true 就行
console.log(!a);     // false，取反

---↬在 JS 世界裡，盡量用 === 而不是 ==，因為 == 會幫你偷偷轉型，可能造成奇怪的錯誤

if / else if / else

const score = 85;

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

註解：

• else if 可處理多種條件
• 判斷式從上往下執行，符合條件就不再往下

switch / case

switch 關鍵字後面會跟著一個表達式，然後是多個 case 標籤，每個 case 標籤後跟著一個常數值。
如果表達式的值與某個 case 的常數值相符，則會執行該 case 後面的程式碼

const day = '三';

switch(day) {
  case '一':
    console.log('星期一');
    break;
  case '二':
    console.log('星期二');
    break;
  case '三':
    console.log('星期三');
    break;
  default:
    console.log('其他日子');
}

註解：

• break 避免執行到下一個 case
• default 對應 else

2. 邏輯與比較運算符

const age = 20;
const hasID = true;

// 邏輯 AND / OR / NOT
if (age >= 18 && hasID) {
  console.log('可以進場');
}

if (age < 18 || !hasID) {
  console.log('禁止進場');
}

註解：

• &&：兩個條件都 true
• ||：任一條件 true
• !：取反

3. 三元運算子（簡化 if/else）

const isMember = true;
const price = isMember ? 100 : 150;
console.log(price); // 100

註解：

• 條件 ? 條件為真 : 條件為假
• 適合單行條件判斷

4. 迴圈進階

for / for...of / for...in

// 普通 for
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// for...of 遍歷陣列，翻閱
const colors = ['red', 'green', 'blue'];
for (const color of colors) {
  console.log(color);
}

// for...in 遍歷物件屬性，數欄位
const user = {name: 'Hank', age: 25};
for (const key in user) {
  console.log(key, user[key]);
}

註解：

• for...of 適合陣列 → 就像打開水果籃，一顆顆拿出來看
• for...in 適合物件 → 就像看身分證，一欄一欄讀出屬性
• 避免使用 for...in 遍歷陣列（可能會出現原型屬性）
• for：固定次數， while：持續到條件不成立
  ▻▻▻ for 就像「知道要做幾次」，
  ▻▻▻ while 則像「做到某件事為止」

while / do...while

let n = 0;
while (n < 3) {
  console.log(n);
  n++;
}

let m = 0;
do {
  console.log(m);
  m++;
} while (m < 3);

註解：

• while 先判斷條件
• do...while 先執行一次，再判斷條件

5. break / continue

for (let i = 0; i < 5; i++) {
  if (i === 3) break; // 遇到 3 就跳出迴圈
  console.log(i);
}

for (let i = 0; i < 5; i++) {
  if (i === 2) continue; // 遇到 2 就跳過本次
  console.log(i);
}

6. 陣列操作（Array Methods）

const numbers = [1, 2, 3, 4, 5];

// map - 產生新陣列
const squared = numbers.map(n => n * n);
console.log(squared); // [1,4,9,16,25]

// filter - 篩選符合條件
const even = numbers.filter(n => n % 2 === 0);
console.log(even); // [2,4]

// find - 找到第一個符合條件的元素
const firstEven = numbers.find(n => n % 2 === 0);
console.log(firstEven); // 2

// reduce - 累加 / 計算總和
const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(sum); // 15

註解：

• map / filter /reduce不會改變原陣列（非破壞性）
• 常用於資料處理、列表生成

7. 物件操作（Object Methods）

const person = {name: 'Hank', age: 25};

// Object.keys() - 取得屬性名陣列
console.log(Object.keys(person)); // ['name','age']

// Object.values() - 取得屬性值陣列
console.log(Object.values(person)); // ['Hank',25]

// Object.entries() - 取得 [key,value] 陣列
console.log(Object.entries(person)); // [['name','Hank'],['age',25]]

8. 解構（Destructuring）資料

const user = {name: 'Hank', age: 25, city: 'Taipei'};
const {name, age} = user;
console.log(name, age); // Hank 25

const colors = ['red','green','blue'];
const [first, second] = colors;
console.log(first, second); // red green

註解：

• 可以快速取值
• 方便參數傳遞與資料處理

9. 學習心得

• 學會流程控制與邏輯運算，就可以寫出「聰明的程式」~
• 陣列與物件操作是前端資料處理的核心技能
• 結合解構、迴圈、條件判斷，可以快速處理複雜資料
  今天學的東西，都是讓程式「像人類一樣思考」的基礎：
• 會比較大小（成績分數、金額）
• 會做選擇（if/else）
• 會重複（迴圈）
• 會整理清單（map / filter / reduce）
• 會處理資料（物件方法、解構）

其實這些邏輯就跟日常生活很像：
「如果有特價 → 買；沒有 → 等下次」
「拿清單一樣一樣檢查」
「把大家的錢加總」......