# 第三堂：物件跟陣列資料處理之術

## 開課提醒

1. 錄影
2. 開啟 Notion 會議軟體、ZOOM AI 摘要
3. [提醒] 觀看 [Git、GitHub 環境建置](https://courses.hexschool.com/courses/2020111311111/lectures/65186460)

## 今日上課知識點

1. 陣列
2. 物件
3. 陣列與物件整合運用
4. JSON

---

## 為什麼要學 JSON？

## 陣列 Array

- ✨陣列寫法：用中括號 `[]` 包住，逗號分隔

    let colors = ["red", "black", "pink"];
    console.log(colors);

- ✨length：抓取陣列長度

    console.log(colors.length); // 3

- ✨push()：在陣列末端加入一個新的值

    colors.push('blue');
    console.log(colors); // ["red", "black", "pink", "blue"]

- ✨用索引值讀取特定的值（從 0 開始數）

    const colors = ['red', 'yellow', 'black'];

    // 索引值：        0        1        2

    console.log(colors[0]); // 'red'
    console.log(colors[1]); // 'yellow'

- ✨取得陣列最後一個值

    colors[colors.length - 1];

---

**題目：** 小華去飲料店，菜單上有這些飲料：

let drinks = ["珍珠奶茶", "綠茶", "紅茶拿鐵", "冬瓜茶", "檸檬汁"];

1. 請問菜單上有幾種飲料？（用 `.length`）
2. 小華想點「紅茶拿鐵」，要怎麼取出來？
3. 小華看到最後一杯「檸檬汁」賣完了，想改點最後一杯的前一杯，怎麼取？
4. 飲料店新推出「芒果冰沙」，怎麼加到菜單最後面？

---

## 物件 Object

- ✨物件寫法：用大括號 `{}` 包住

    const house = {};

👀 觀察跟陣列不同的地方：

1. 物件用 `{}`，陣列用 `[]`
2. 前面是「屬性」，後面是「值」
3. 用來描述一個東西的細節或特徵
4. 沒有順序（沒有索引值）

- ✨新增物件屬性

    const obj = {};
    obj.age = 18;

    console.log(obj); // { age: 18 }

- ✨物件取值

    const obj = {
      myName: 'yinmin',
      money: 3000,
      123: '456'
    };

方法一：點記法

console.log(obj.myName);  // 'yinmin'
console.log(obj.123);     // ❌ 報錯！數字開頭不能用點記法

方法二：括弧記法

console.log(obj['myName']); // 'yinmin'
console.log(obj['123']);    // '456' ✅

> 括弧記法用在「特殊字元」或是「帶入變數」時

---

**題目：** 小美養了一隻貓，名字叫咪咪，3 歲，品種是橘貓

const cat = {
  name: "咪咪",
  age: 3,
  breed: "橘貓"
};

1. 用點記法取出咪咪的年齡
2. 咪咪過生日了，怎麼把 age 改成 4？
3. 小美想幫咪咪加上體重 4.5 公斤的資料，怎麼新增？

---

## 中場休息

## 陣列與物件使用時機

- **陣列**使用時機：當資料是`大量`且`同性質`的東西 → 用 `[]` 裝起來
- **物件**使用時機：要描述一個東西的`特徵和細節` → 用 `{}` 裝起來

> 簡單記：一群同類用陣列，描述一個東西用物件

### 題目區

**第一題：** 前鎮區有兩戶人家，第一戶家庭爸爸叫 Tom、兒子叫 Mark，第二戶家庭爸爸叫 John、兒子叫 Jack

// 選項 A
let data = [
  {
    fatherName: "Tom",
    sonName: "Mark"
  },
  {
    fatherName: "John",
    sonName: "Jack"
  }
];
// 選項 B
let data = {
  father1Name: "Tom",
  son1Name: "Mark",
  father2Name: "John",
  son2Name: "Jack"
};

**第二題：** 一個水果攤有 2 種水果，香蕉有 8 個，蘋果有 10 個

// 選項 A
let fruitStandData = [
  {
    fruitName: 'banana',
    num: 8
  },
  {
    fruitName: 'apple',
    num: 10
  }
];
// 選項 B
let fruitStandData = {
  fruitType: [
    {
      fruitName: 'banana',
      num: 8
    },
    {
      fruitName: 'apple',
      num: 10
    }
  ]
};

**第三題：** Mark 有間旅館，房型有單人房與雙人房，並提供游泳服務

// 選項 A
let hotelData = {
  singleRoomNormalDayPrice: 1380,
  singleRoomHolidayPrice: 1500,
  singleRoomName: "單人房",
  doubleRoomHolidayPrice: 2380,
  doubleRoomHolidayPrice: 2500,
  doubleRoomName: "雙人房",
  swimming: true,
  boss: "Mark"
};

// 選項 B
let hotelData = {
  items: [
    {
      normalDayPrice: 1380,
      holidayPrice: 1500,
      name: "單人房"
    },
    {
      normalDayPrice: 1380,
      holidayPrice: 1500,
      name: "雙人房"
    }
  ],
  swimming: true,
  boss: "Mark"
};

---

## JSON

### JSON 是什麼？

JSON（JavaScript Object Notation）是一種**資料交換格式**，長得跟 JS 的物件和陣列幾乎一模一樣。

為什麼需要 JSON？因為不同系統之間要互相傳資料，需要一個**大家都看得懂的共同格式**。JSON 就是這個共同語言——輕量、好讀、幾乎所有程式語言都支援。

### JSON 跟 JS 物件的差異

// ✅ JS 物件：屬性名稱不用加引號
const obj = {
  name: "小華",
  age: 18
};

// ✅ JSON 格式：屬性名稱「一定要」加雙引號
{
  "name": "小華",
  "age": 18
}

> JSON 的規則更嚴格：屬性名一定要雙引號、不能有註解、不能有多餘的逗號

### 好用工具

[JSON Editor Online](https://jsoneditoronline.org/) — 把拿到的 JSON 貼進去，自動幫你整理成好讀的格式

---

## 情境拆解：看懂真實世界的 JSON

學會陣列跟物件之後，你就有能力看懂各種服務回傳的 JSON 資料了。我們來練習！

### 讀 JSON 的步驟引導

1. **看最外層**：最外面是 `[]` 還是 `{}`？→ 判斷是陣列還是物件
2. **觀察結構**：裡面包了什麼？物件裡有陣列？陣列裡有物件？
3. **找到目標資料**：我要的資訊在哪個屬性裡？
4. **取值**：用索引值 + 點記法 / 括弧記法組合取出來

---

**情境一：高雄市藥局資料**

小華打開高雄市 open data，拿到一包藥局資料的 JSON：

[
  {
    "機構名稱": "健安藥局",
    "機構地址": "高雄市三民區建工路 100 號",
    "機構電話": "07-3456789"
  },
  {
    "機構名稱": "康是美新崛江門市",
    "機構地址": "高雄市新興區中山一路 200 號",
    "機構電話": "07-2345678"
  }
]

1. 最外層是 `[]` → 這是一個**陣列**
2. 裡面每一筆都是 `{}` → 每間藥局是一個**物件**
3. 請問：怎麼取出「康是美新崛江門市」的電話？

let data = [ /* 上面那包資料 */ ];

data[1]["機構電話"]; // "07-2345678"

> 因為屬性名稱是中文（特殊字元），所以要用括弧記法

---

**情境二：高雄輕軌即時資訊**

小明想查輕軌到站時間，API 回傳的 JSON 長這樣：

{
  "updateTime": "2026-03-17 10:30:00",
  "stations": [
    {
      "stationName": "籬仔內",
      "nextTrain": "2 分鐘"
    },
    {
      "stationName": "凱旋中華",
      "nextTrain": "5 分鐘"
    }
  ]
}

1. 最外層是 `{}` → 這是一個**物件**
2. `stations` 屬性裡面是 `[]` → 站點資料是**陣列**
3. 請問：怎麼取出「凱旋中華」的下班車時間？

data.stations[1].nextTrain; // "5 分鐘"

---

**情境三：Imgur 圖片服務**

小美想做一個圖片上傳功能，她看到 Imgur API 回傳的資料長這樣：

{
  "data": {
    "id": "abc123",
    "title": "我的貓咪",
    "link": "https://i.imgur.com/abc123.jpg",
    "width": 1920,
    "height": 1080
  },
  "success": true,
  "status": 200
}

1. 最外層是 `{}` → 物件
2. 真正的圖片資料藏在 `data` 屬性裡，`data` 本身也是一個**物件**
3. 請問：怎麼取出圖片的連結？

response.data.link; // "https://i.imgur.com/abc123.jpg"

> 真實 API 常常會把資料包在 `data` 屬性裡面，外層再加上 `success`、`status` 這些狀態資訊

---

### 搞懂 JSON 格式後，你可以看懂

- [Imgur 圖片上傳 API](https://apidocs.imgur.com/)
- [即時路況停車資訊](https://traffic.transportdata.tw/)
- [新聞 API](https://newsapi.org/)
- [高雄 open data](https://data.kcg.gov.tw/dataset?res_format=JSON)
- [台南 open data](https://data.tainan.gov.tw/DataSet)
- [TDX 交通 API](https://tdx.transportdata.tw/api-service/swagger)

---

## 本週任務

必做：
1. [主線任務連結](https://rpg.hexschool.com/#/training/12063182914161572765/board/content/12063182914161572766_12063182914161572788?tid=12063182914167567603)

選作：
2. 課程筆記分享或延伸文章
- 物件淺拷貝(Shallow Copy)、深拷貝(Deep Copy)
- 陣列常用方法：`unshift`、`pop`、`shift`、`splice`

---

## 正課結束，下方為加碼環節
## AI 實驗室

上禮拜我只寫 .md，這禮拜我改成 skill 技能
| | 散裝 .md | SKILL.md |
|---|---|---|
| 檔案數量 | 一個任務拆 5~6 個檔案 | 一個任務一份 SKILL.md |
| AI 遺忘問題 | 讀 2~3 個就忘前面的 | 一次讀完一份，不會忘 |
| 執行順序 | AI 自己猜，常跳步 | 明確定義 Step 1→2→3 |
| 輸出品質 | 每次格式不一樣 | 輸出格式固定，品質穩定 |
| 重複提醒 | 每次對話都要說「去讀 XXX」 | 觸發詞自動載入 |
| 維護成本 | 改一個邏輯要動好幾個檔案 | 改一份 SKILL.md 就好 |


* Skill [Muse](https://muse.cheyuwu.com/)
## 模擬面試：順序

* RobertLin792252
* Norman
* Jason Good
* mizuren
* JackyXiang [六角人],