不知不覺我們的鐵人賽已經進行到第 15 天，也就是整整過了一半！

在過去的幾天裡，我們跨入了 JavaScript 的世界，學會了變數與 if-else 條件判斷。但隨之而來的問題是：如果今天不是只有一個使用者名字，而是有 100 個使用者的清單、或是整間商店的商品資料，我們該怎麼把這些龐大的資料好好管理呢？
今天我們就要來介紹 JavaScript 裡最重要的兩個資料收納神器——陣列（Array）與物件（Object）！

1. 陣列（Array）：像清單一樣排隊的資料包

1. 什麼是陣列？

• 想像你在 Figma 裡建立了一排整齊的 Icon 清單，或是購物車裡一項一項加入的商品。
• 在 JS 裡，陣列就是用中括號 [] 把多個資料包在一起的清單。

2. 程式:

// 一個放著前端技術清單的陣列
const frontendSkills = ["HTML", "CSS", "JavaScript", "Vue"];

3. 怎麼拿裡面的資料？

• 程式的世界很特別，它是從 0 開始數起（這叫 Index 索引值）。
• 如果寫 frontendSkills[0]，拿到的就會是 "HTML"；寫 frontendSkills[2] 拿到的則是 "JavaScript"。

2. 物件（Object）：像設計圖屬性面板一樣的「鍵值對」

1. 什麼是什麼物件？

• 如果說陣列是一串簡單的清單，那物件就是一個擁有詳細屬性的「複合體」。
• 這跟你在 Figma 右側面板看到的屬性非常像：一個物件裡會包含好幾個 「Key（屬性名稱）: Value（對應數值）」。

2. 程式:

// 用大括號記錄一個人的個人檔案物件
const userProfile = {
    name: "孫小豬",
    role: "UI/UX 設計師轉前端",
    age: 25,
    isLearning: true
};

3. 怎麼拿裡面的資料？

• 你可以用「點」的方式直接拿取屬性，例如寫 userProfile.name，就會得到 "孫小豬"。

陣列與物件的夢幻組合（日常開發的常態）

在真實的網頁開發中（例如你要串接 API 抓資料），我們最常看到的是「陣列裡面包著好幾個物件」的結構，就像這樣：

const articleList = [
    { id: 1, title: "Day 01：前言", tag: "的心得" },
    { id: 2, title: "Day 02：VS Code 環境設定", tag: "工具" },
    { id: 3, title: "Day 03：HTML 角色分工", tag: "觀念" }
];

今日小結

今天我們學會了用陣列來管理清單，用物件來記錄詳細屬性。這兩個工具是 JavaScript 資料結構的基石！

過完今天，我們的 30 天鐵人賽剛好達成半程完賽（完成 15 天）！
明天開始，我們將正式跨入第三週，準備迎來前端互動的核心大魔王——DOM 操作與事件監聽（讓按鈕點了有反應）！