在昨天的文章中，我們引進了變數（var、let、const）的概念，成功幫JavaScript大腦打造了能夠牢牢記住數據的「資料置物櫃」。

不過，一個只會死記資料的大腦還稱不上聰明，現代網頁必須具備隨機應變的智慧：例如當會員滿18歲時允許進入網站，未滿則導向警示頁面，或者當購物車有多件商品時，能自動一件件拿出來加總總金額。

今天，我們要賦予大腦「抉擇」與「重複執行」的超能力，進入前端邏輯的核心分水嶺：條件判斷式（Conditional Statements） 與 迴圈控制（Loops）。

什麼是流程控制

在預設狀態下，JavaScript的程式碼是由上而下一行行嚴格執行的，而我們今天學的工具，就像是在這條筆直的公路上建造「收費站分流」與「圓環繞圈圈」：

• 條件判斷式（if-else/switch）：幾何上的分流點，根據條件的真假（true/false），決定程式要向左走還是向右走。
• 迴圈控制（for/while）：幾何上的循環圓環。只要條件符合，程式就會在同一個區塊內反覆轉圈執行，直到條件破裂為止。

條件判斷式

1.if與else（二分法或多向分流）

這是最經典的判斷工具，會先檢查小括號() 裡的布林條件，如果是true就執行第一個大括號{}的程式，如果是false，就跳過並執行else後方的區塊。
如果有很多種情況，中間還可以用else if來無限擴充分支。

2.switch（定值精準判定）

當你要判斷的變數是「非常精準的固定數值」（像星期一到星期日），使用switch會比寫一堆if-else還要好讀，但每個分支後面記得加上break;，否則大腦會像失控一樣一路往下執行。

迴圈

1.for 迴圈（計數型循環）

當你明確知道程式必須重複執行幾次時，for迴圈是你的最佳首選，它的語法結構將「起點、終點、進值」一次寫完，結構非常嚴謹：

for (變數起點; 結束條件; 每圈的增減變化) {
    // 重複執行的程式碼
}

2. while 迴圈（條件型循環）

當你**不知道具體要重複幾次，只知道「只要某個條件成立，就一直做下去」**時使用。
提醒：請務必在迴圈內部動手腳讓條件有機會變成false，否則大腦會陷入「死迴圈（無窮迴圈）」，導致瀏覽器直接當機。

實作範例

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>Day23 條件判斷式與迴圈控制</title>
</head>
<body>

    <h1 style="text-align: center;">請打開 Console 觀察大腦的決策與循環輸出</h1>

    <script>
        // 條件判斷式 (if-else)：VIP 折扣檢查
        console.log("1. 條件判斷分流");
        
        let totalCost = 1200; // 消費總金額
        let memberClass = "Gold"; // 會員等級: Gold, Silver, Normal

        if (totalCost >= 1000 && memberClass === "Gold") {
            console.log("恭喜！解鎖黃金尊榮大禮：享有8折優惠！");
            totalCost = totalCost * 0.8;
        } else if (totalCost >= 1000) {
            console.log("享有滿千送百優惠！折扣100元。");
            totalCost = totalCost - 100;
        } else {
            console.log("未達折扣門檻，維持原價。");
        }
        console.log("結帳總金額為：" + totalCost + "元");
        // 迴圈控制 (for) 實戰：購物車商品自動打包
        console.log("For 迴圈重複算力");

        // 假設我們要連續打包 3 件商品 (從第 1 件到第 3 件)
        for (let i = 1; i <= 3; i++) {
            console.log("正在打包第 " + i + " 件商品，貼上安全封條...");
        }
        console.log("所有商品打包完畢！");

        // 迴圈控制 (while) ：倒數計時防禦
        console.log("While迴圈條件循環");

        let countDown = 3;
        while (countDown > 0) {
            console.log("火箭發射倒數：" + countDown);
            countDown--; // 關鍵步驟！每次減 1，防止陷入當機無窮迴圈
        }
        console.log("發射！");
    </script>
</body>
</html>

可以嘗試更改裡面的數字，我就不一一做演示了

介紹

將這段程式碼在瀏覽器中運行並打開控制台（Console），你會明顯看到以下三段大腦的思考軌跡：

• 分流軌跡：大腦捕獲到了總金額1200大於千元，且會員等級為"Gold"，因此走入了第一個if分支，印出黃金八折提示，自動計算出金額為960元。
• 計數軌跡：在for迴圈中，控制台整整齊齊地印出了3次打包指令，變數i從1開始遞增，直到超過3的那一瞬間，大腦便離開這個迴圈，執行最後的完工通告。
• 倒數軌跡：在while迴圈中，大腦緊盯著countDown變數，因為我們在內部寫了countDown--，讓數值逐步遞減，當數值歸零不再大於0時，迴圈便完美落幕，成功發射火箭。

總結

今天我們成功幫JavaScript解鎖了流程控制，現在程式不再只會死板地直線走到底，而是能根據數據條件進行幾何分流，還能用零點幾毫秒的速度幫我們處理成千上萬次的重複作業。

有了抉擇能力與重複算力，接下來我們要把這些零散的指令打包成可以重複使用的「方式」。

明天（Day 24），我們將跨入前端模組化的核心：函式Function與陣列（Array），去看看如何把一段段的邏輯封裝起來，並一口氣管理海量資料，明天見。