在昨天的文章中，我們學習了如何使用「陣列」把一大堆資料整齊地排成一個清單，但是陣列有一個缺點，它只適合放同一種類型的單純資料（例如一整串價格：[1000, 2500, 300]）。

在實際開發中，我們常常需要描述一個很具體、有很多種特徵的東西，例如在網頁遊戲裡，一個「遊戲角色」同時會有名字、等級、血量、是否上線等等，如果把這些資料拆開成好幾個獨立變數，程式碼會變得非常凌亂，大腦很難把它們聯想在一起。

為了解決這個問題，JavaScript提供了一個資料封裝工具：物件（Object）。

什麼是物件(Object)？

簡單來說，物件就是一個用來存放「屬性」與「數值」的百寶箱。

它使用一組大括號{ }把所有相關的資料包在一起，在物件內部，我們會用「鍵值對（Key-Value）」的方式來記錄資料，也就是：名字:資料值，每筆特徵之間用逗號隔開。

物件的標準結構

我們直接用一個遊戲角色來寫一個物件：

const character={
    name: "亞瑟",     // 名字 (字串)
    level: 15,       // 等級 (數字)
    hp: 450,         // 血量 (數字)
    isAlive: true    // 是否存活 (布林值)
};

這樣一來，只要看到character這個物件，就能立刻知道這個角色的所有狀態，資料結構變得非常清晰。

如何讀取與修改物件裡的資料

把資料打包進物件之後，我們要怎麼把特定的特徵拿出來用，或是更新它，最常用的方法叫做 點記法（Dot Notation）。

• 讀取資料：使用物件名稱.屬性名稱，例如想知道血量，就寫character.hp。
• 修改資料：直接用等號重新賦值，例如角色升級了，就寫 character.level=16;。

實作範例

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>Day25 JavaScript 物件基礎</title>
</head>
<body>

    <h1 style="text-align: center;">請打開 Console 觀察遊戲角色的數據變化</h1>

    <script>
        // 建立遊戲角色物件
        console.log("角色初始狀態");

        const hero = {
            name: "聖騎士",
            level: 1,
            hp: 100,
            mp: 50
        };

        // 讀取物件內部的資料
        console.log("角色名稱：" + hero.name); // 印出聖騎士
        console.log("初始等級：" + hero.level + " 級"); // 印出1級
        console.log("初始血量：" + hero.hp + " HP"); // 印出100 HP

        // 修改物件內部的資料 (模擬遊戲事件)
        console.log("遊戲事件觸發");

        // 擊敗怪物，角色升級了
        hero.level = 2; // 將 level修改為2
        hero.hp = 150;  // 升級後最大血量提升為150

        console.log("(系統提示)恭喜升級");
        console.log("目前等級：" + hero.level + " 級"); // 印出2級
        console.log("目前血量：" + hero.hp + " HP");   // 印出150HP

        // 踩到陷阱，角色受到40點傷害
        hero.hp = hero.hp - 40; // 拿現有的血量150扣掉40，再存回去

        console.log("(系統提示)你踩到毒氣陷阱，受到40點傷害");
        console.log("剩餘血量：" + hero.hp + " HP");   //印出110HP
    </script>
</body>
</html>

介紹

將這段程式碼在瀏覽器中運行並打開控制台（Console），你會清晰地看到這個遊戲角色的生命軌跡：

• 初始讀取：大腦透過hero.name和hero.hp成功抓到了初始設定值，把英雄的基本狀態呈現在畫面上。
• 即時修改更新：當執行了hero.level=2和減血的數學運算後，同一個物件內部的數值被精準改寫，我們不需要宣告好幾個零散的變數，只需要管理hero這一個物件，就能完美追蹤所有動態變化。

總結

今天我們學會了用 物件（Object） 來打包複雜的現實世界資料，物件透過一對大括號與鍵:值的格式，讓我們能把不同的特徵綁在同一個變數身上，並用「點記法（.）」輕鬆地進行存取與修改。
到目前為止，我們學到的JavaScript都是在控制台（Console）裡默默進行運算，網頁畫面本身根本沒有產生任何變化。
明天（Day 26），我們即將迎來網頁前後端串接的橋樑：DOM（文件物件模型），我們要學習讓JavaScript伸出手，直接去抓HTML的標籤，讓網頁上的字體與顏色隨著JS的變數真正動起來，明天見。