物件 Object 與 key-value
物件就是一組「鍵 (key)」與「值 (value)」的集合。
你可以把它想像成「字典」或「小資料庫」。

建立物件
name、age、hobby 是「屬性名稱 (key)」
"Sunny"、20、"跳舞" 是對應的「值 (value)」

let person = {
  name: "Sunny",
  age: 20,
  hobby: "跳舞"
};

存取物件屬性
點語法 (Dot notation)
console.log(person.name); // Sunny

中括號語法 (Bracket notation)
console.log(person["age"]); // 20

💡 當 key 是變數或有特殊字元（例如空白），只能用 []。

修改與新增

person.age = 21; // 修改
person.school = "輔仁大學"; // 新增
console.log(person);

結果：
{ name: "Sunny", age: 21, hobby: "跳舞", school: "輔仁大學" }

刪除屬性

delete person.hobby;
console.log(person);

巢狀物件（Nested Objects）
物件裡面可以再放物件。

let student = {
  name: "Sunny",
  grade: {
    math: 90,
    english: 85
  }
};


console.log(student.grade.math); // 90

物件 + 陣列

常見情境：一個班級有很多學生（用陣列），每個學生是一個物件。

let students = [
  { name: "Sunny", age: 20 },
  { name: "小明", age: 19 },
  { name: "小美", age: 21 }
];

console.log(students[1].name); // 小明

走訪物件
for…in

for (let key in person) {
  console.log(key, ":", person[key]);
}

結果：

name : Sunny
age : 21
hobby : 跳舞
school : 輔仁大學

Object.keys() / Object.values() / Object.entries()

console.log(Object.keys(person));   // ["name","age","hobby","school"]
console.log(Object.values(person)); // ["Sunny",21,"跳舞","輔仁大學"]
console.log(Object.entries(person));
// [["name","Sunny"],["age",21],["hobby","跳舞"],["school","輔仁大學"]]

物件的方法（函式當屬性）
物件不只能存資料，還能存「行為」。

let dog = {
  name: "小白",
  bark: function() {
    console.log("汪汪！");
  }
};

dog.bark(); // 汪汪！

💡 如果用箭頭函式，也可以簡寫：

let cat = {
  name: "小黑",
  meow() {
    console.log("喵喵！");
  }
};

cat.meow(); // 喵喵！

🔹 小練習
範例 1：顯示學生資料

<div id="info"></div>

<script>
let student = {
  name: "Sunny",
  age: 20,
  major: "醫學資訊"
};

let html = `
  <h2>${student.name}</h2>
  <p>年齡：${student.age}</p>
  <p>科系：${student.major}</p>
`;

document.getElementById("info").innerHTML = html;
</script>

範例 2：列出多位學生

<div id="list"></div>

<script>
let students = [
  { name: "Sunny", age: 20 },
  { name: "小明", age: 19 },
  { name: "小美", age: 21 }
];

let html = "<ul>";
students.forEach(s => {
  html += `<li>${s.name} - ${s.age} 歲</li>`;
});
html += "</ul>";

document.getElementById("list").innerHTML = html;
</script>