跳至主要内容

本章為 JavaScript 核心重構的第九天，將帶領你告別手動、容易出錯的傳統 for 迴圈，引進全自動化生產線 map、filter 與 reduce 等現代化陣列魔法。透過「熱血傳令兵」、「嚴格篩選機」與「全能加工廠」三大陣列職位，你將學會如何以「聲明式」的語法來篩選、加工與歸納資料，並深刻體會不可變性（Immutability）在實戰專案維護中的巨大價值。

Day 09: 原理篇 —— 陣列大戰：從傳統 for 到自動化生產線 map / filter

本文同步分享於2026鐵人賽：JS 核心重構：勇者轉職傳說

📜 這裡的修煉規則

孩子，在踏上今日的領地前，先坐下來喝杯酒吧。 修煉的路很長，別急著奔跑，先聽聽這份卷軸裡的古老叮嚀。

我在每一站的盡頭都為你鋪設了 「實戰演武場 CodePen」。那不只是程式碼的拼湊，而是你在這場暴風雨中，試圖用邏輯點燃的一顆星火。 成功突圍後，別忘了帶著你的戰利品回到 「QuestBoard 佈告欄」。在那裡，你會發現自己從不孤單，公會的夥伴們都正舉杯等待你的歸來。

記住...

「 導師看重的從來不是你的劍法有多華麗，而是當你被邏輯擊潰、滿身泥濘後，依然選擇握緊理性的劍柄，再次向真相發起衝鋒的勇氣。 」

🛡️ 【公會大廳：導師的修煉導讀】​

「一、二、三... 數到這裡，把壞掉的零件丟掉，再把剩下的拿去磨光。」在公會的物資中心，我看到你正拿著一把「舊式鐵鏟 (for 迴圈)」，手動在名單裡挖資料。

這種操作不僅累人，最危險的是容易數錯編號（索引），導致重要資料被漏掉。今天，我要帶你引進公會最新科技：「全自動化生產線 (map/filter)」。你只需要設定好「規則」，剩下的煩瑣細節，陣列會自己幫你完成。記住，真正的強者，是告訴陣列「我要什麼」，而不是教它「怎麼走路」。

💡 【導師講義：底層真相探究】​

1. 陣列魔法的三大職位​

現代陣列方法的核心思維：「用聲明取代指令。」 所有的職位都不會改動原始陣列，而是專注於產生乾淨的新結果。

🛠️ 陣列三劍客手冊​

  1. forEach()：熱血傳令兵 (Side Effect) 傳令兵只負責「跑腿」，對每個人做事，但不帶回結果（回傳 undefined）。適合用於更新 DOM 或印出日誌。

    app.js
    warriors.forEach((name, i) => console.log(`第 ${i + 1} 位：${name}`));

  2. filter()：嚴格篩選機 (The Gatekeeper) 這是公會的「審查員」。只有通過測試（回傳 true）的資料，才能進入下一張名單。

    app.js
    const survivors = team.filter((m) => m.hp > 0);

  3. map()：全能加工廠 (The Transformer) 這是最強大的職位。進去多少人，出來就有多少人。適合用來從複雜物件中「抽取特定資訊」或「重生新樣貌」。

    app.js
    const expGains = monsters.map((m) => m.exp * 1.5);
🏹 導師的辨析圖：生產線職位對照
方法回傳值原始陣列長度核心用途
forEachundefined不變執行動作 (印 Log / 發信)
filterNew Array縮短或相同剔除不合格資料
mapNew Array必定相同轉換資料格式 / 加工

2. 進階連鎖技：Method Chaining​

你可以像堆疊積木一樣，把這些職位串起來：「先篩選，後加工。」

app.js
// 任務：找出品質不是 Bad 的武器，並通通打 9 折
const finalSale = shopItems
  .filter((item) => item.quality !== "Bad") // 1. 篩選
  .map((item) => ({
    // 2. 加工
    ...item,
    salePrice: item.price * 0.9,
  }));

3. 邏輯流向圖解​

💡 導師講評：圖解心法

陣列方法就像是一條 「全自動鍊金生產線」。filter 是生產線上的篩選閘門（擋住廢鐵），map 是生產線上的鍛造爐（將素材加工成兵刃）。你可以讓素材在不同的機器間連鎖流動，最後一次收穫最純淨的成果。

陣列工廠流程圖

⚔️ 【戰術對抗：學長與學弟的代碼對決】​

招式示範：批量更新冒險者狀態​

❌ 冒險學弟：手動搬運工人 (for loop)​

  • 負能量評級：🔴 體力活過多 / 🔴 索引容易出錯
app.js
const result = [];
for (let i = 0; i < items.length; i++) {
  if (items[i].active) {
    result.push(items[i].name);
  }
}

✅ 勇者學長：生產線連發 (Filter + Map)​

  • 利潤評級：🟢 邏輯極簡 / 🟢 充滿維護彈性
app.js
const result = items.filter((item) => item.active).map((item) => item.name);
💡 導師講評

學長的程式碼讀起來就像在讀人類的指令：「過濾活動中的項目，然後取名」。這就是 「聲明式 (Declarative)」 的魅力，你不需要分心去管 i++ 這種瑣事。

🏰 【勇者精英課：邁向職人的進階架構】​

終極鍊金術：reduce()​

如果你想把一整袋名單的資料 「歸納、縮減」 成一個具體的東西（例如統計總血量），那你需要 reduce()。

app.js
const totalAtk = party.reduce((sum, member) => sum + member.atk, 0);

核心心法： 如果你只需要一個「最終結果」（而非一條名單），這就是你的終極武器。它不論是過濾、加工還是計算，都能一招完成。

🛖 營火叮嚀：為什麼「不可變性」很重要？

孩子，導師看過太多冒險者因為 i <= length 的細節，導致整個咒語崩潰。

「細節越多，陷阱越多。」 使用 map 或 filter 的核心價值就在於 「不可變性 (Immutability)」：原版資料永遠不動，我們產出的永遠是新的、乾淨的結果。這能保證你的系統不會因為某次意外的修改，而影響到其他正在使用資料的人。

天色微亮，營火雖已燃盡，但你眼中卻閃爍著領悟的光芒。在前往演武場挑戰關卡前，我已經幫你把靈魂碎片精煉成了這份「戰術錦囊」。拿好它，今日的任務不再是負擔，而是你證明自我的舞台。去吧，公會的英雄榜在等著你的戰報。

📝 【夥伴筆記：今日修煉精華】​

這份筆記是你的隨身護身符，卡關時看一眼，真相就在裡面。

  • map()：長度不變，樣貌改變（轉化）。
  • filter()：長度變短，內容不變（篩選）。
  • forEach()：單純執行任務，不留任何產出。
  • 不可變性：不修改原陣列，永遠回傳新結果。

🎯 【實戰演武場】​

⚔️ 任務鑑定條件：​

  1. 完成 📜 本日實戰任務 (CodePen)。
  2. 將 CodePen 網址貼至 QuestBoard，並回填鑑定報告：
    • 初心者：自動化解放感 (成就感發掘)：
        1. 第一次試著把 filter 跟 map 連在一起寫時，你有沒有感受到一種「邏輯連鎖」的快快感？
    • 冒險者：職位選擇權 (理性挑戰)：[⚡ 觀念辨析]
        1. 如果我們只想「清空桌上的垃圾 (刪除 DOM)」而不打算產生新資料，你會建議用 map 還是 forEach？為什麼？
  3. 任務完成後，你的名字將永遠標記在公會的英雄榜上！

📚 【圖書館卷軸與前後站連結】​