到目前為止，我們學了變數、邏輯運算子、物件、陣列，今天我們來試試看把這些東西組合起來處理吧!
物件陣列就是一個陣列裡面放了好幾個物件，這是前端最常遇到的資料型態，像是從後端API抓回來的使用者列表、商品列表、貼文列表，幾乎都是這樣的結構

物件陣列

const users = [
  { id: 1, name: 'Alice', age: 23 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 18 }
];

這是一個典型的 API 回傳資料，每個元素都是一個物件，裡面有多個屬性
稍微複習一下，如果我們要讀取某一筆資料的特定屬性可以這樣寫

console.log(users[0].name); // 'Alice'

用for...of或forEach來遍歷屬性則是如此

for (const user of users) {
  console.log(user.name);
}

users.forEach(user => console.log(user.age));

使用陣列的方法來轉換篩選/轉換/找資料

// 篩選年齡 >= 20 的使用者
const adults = users.filter(user => user.age >= 20);
console.log(adults);

// 只取出名字形成一個新陣列
const names = users.map(user => user.name);
console.log(names); // ['Alice','Bob','Charlie']

// 找到 id = 2 的使用者
const bob = users.find(user => user.id === 2);
console.log(bob); // {id:2,name:'Bob',age:30}

用reduce做統計

// 計算所有使用者的平均年齡
const averageAge = users.reduce((acc, user) => acc + user.age, 0) / users.length;
console.log(averageAge); // 23.666...

實戰練習

先假設有一個商品清單：

const products = [
  { name: 'T-shirt', price: 500, inStock: true },
  { name: 'Jeans', price: 1200, inStock: false },
  { name: 'Socks', price: 100, inStock: true }
];

1.篩選出有庫存（inStock 為 true）的商品。
2.把所有商品的價格 +10%。
3.計算所有商品的總價。

const available = products.filter(p => p.inStock);
console.log('有庫存：', available);

const plus10 = products.map(p => ({ ...p, price: p.price * 1.1 }));
console.log('加10%後：', plus10);

const total = products.reduce((acc, p) => acc + p.price, 0);
console.log('總價：', total);

練習結束，今天就先這樣啦!