--- # System prepended metadata title: 第三堂：物件跟陣列資料處理之術 tags: [2026-後端-JS] --- # 第三堂：物件跟陣列資料處理之術 ## 開課提醒 1. 錄影 2. 開啟 Notion 會議軟體、ZOOM AI 摘要 3. [提醒] 觀看 [Git、GitHub 環境建置](https://courses.hexschool.com/courses/2020111311111/lectures/65186460) ## 今日上課知識點 1. 陣列 2. 物件 3. 陣列與物件整合運用 4. JSON --- ## 為什麼要學 JSON？ ## 陣列 Array - ✨陣列寫法：用中括號 `[]` 包住，逗號分隔 ```jsx let colors = ["red", "black", "pink"]; console.log(colors); ``` - ✨length：抓取陣列長度 ```jsx console.log(colors.length); // 3 ``` - ✨push()：在陣列末端加入一個新的值 ```jsx colors.push('blue'); console.log(colors); // ["red", "black", "pink", "blue"] ``` - ✨用索引值讀取特定的值（從 0 開始數） ```jsx const colors = ['red', 'yellow', 'black']; // 索引值： 0 1 2 console.log(colors[0]); // 'red' console.log(colors[1]); // 'yellow' ``` - ✨取得陣列最後一個值 ```jsx colors[colors.length - 1]; ``` --- **題目：** 小華去飲料店，菜單上有這些飲料： ```jsx let drinks = ["珍珠奶茶", "綠茶", "紅茶拿鐵", "冬瓜茶", "檸檬汁"]; ``` 1. 請問菜單上有幾種飲料？（用 `.length`） 2. 小華想點「紅茶拿鐵」，要怎麼取出來？ 3. 小華看到最後一杯「檸檬汁」賣完了，想改點最後一杯的前一杯，怎麼取？ 4. 飲料店新推出「芒果冰沙」，怎麼加到菜單最後面？ --- ## 物件 Object - ✨物件寫法：用大括號 `{}` 包住 ```jsx const house = {}; ``` 👀 觀察跟陣列不同的地方： 1. 物件用 `{}`，陣列用 `[]` 2. 前面是「屬性」，後面是「值」 3. 用來描述一個東西的細節或特徵 4. 沒有順序（沒有索引值） - ✨新增物件屬性 ```jsx const obj = {}; obj.age = 18; console.log(obj); // { age: 18 } ``` - ✨物件取值 ```jsx const obj = { myName: 'yinmin', money: 3000, 123: '456' }; ``` 方法一：點記法 ```jsx console.log(obj.myName); // 'yinmin' console.log(obj.123); // ❌ 報錯！數字開頭不能用點記法 ``` 方法二：括弧記法 ```jsx console.log(obj['myName']); // 'yinmin' console.log(obj['123']); // '456' ✅ ``` > 括弧記法用在「特殊字元」或是「帶入變數」時 --- **題目：** 小美養了一隻貓，名字叫咪咪，3 歲，品種是橘貓 ```jsx const cat = { name: "咪咪", age: 3, breed: "橘貓" }; ``` 1. 用點記法取出咪咪的年齡 2. 咪咪過生日了，怎麼把 age 改成 4？ 3. 小美想幫咪咪加上體重 4.5 公斤的資料，怎麼新增？ --- ## 中場休息 ## 陣列與物件使用時機 - **陣列**使用時機：當資料是`大量`且`同性質`的東西 → 用 `[]` 裝起來 - **物件**使用時機：要描述一個東西的`特徵和細節` → 用 `{}` 裝起來 > 簡單記：一群同類用陣列，描述一個東西用物件 ### 題目區 **第一題：** 前鎮區有兩戶人家，第一戶家庭爸爸叫 Tom、兒子叫 Mark，第二戶家庭爸爸叫 John、兒子叫 Jack ```jsx // 選項 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 個 ```jsx // 選項 A let fruitStandData = [ { fruitName: 'banana', num: 8 }, { fruitName: 'apple', num: 10 } ]; // 選項 B let fruitStandData = { fruitType: [ { fruitName: 'banana', num: 8 }, { fruitName: 'apple', num: 10 } ] }; ``` **第三題：** Mark 有間旅館，房型有單人房與雙人房，並提供游泳服務 ```jsx // 選項 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 物件的差異 ```jsx // ✅ 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： ```jsx [ { "機構名稱": "健安藥局", "機構地址": "高雄市三民區建工路 100 號", "機構電話": "07-3456789" }, { "機構名稱": "康是美新崛江門市", "機構地址": "高雄市新興區中山一路 200 號", "機構電話": "07-2345678" } ] ``` 1. 最外層是 `[]` → 這是一個**陣列** 2. 裡面每一筆都是 `{}` → 每間藥局是一個**物件** 3. 請問：怎麼取出「康是美新崛江門市」的電話？ ```jsx let data = [ /* 上面那包資料 */ ]; data[1]["機構電話"]; // "07-2345678" ``` > 因為屬性名稱是中文（特殊字元），所以要用括弧記法 --- **情境二：高雄輕軌即時資訊** 小明想查輕軌到站時間，API 回傳的 JSON 長這樣： ```jsx { "updateTime": "2026-03-17 10:30:00", "stations": [ { "stationName": "籬仔內", "nextTrain": "2 分鐘" }, { "stationName": "凱旋中華", "nextTrain": "5 分鐘" } ] } ``` 1. 最外層是 `{}` → 這是一個**物件** 2. `stations` 屬性裡面是 `[]` → 站點資料是**陣列** 3. 請問：怎麼取出「凱旋中華」的下班車時間？ ```jsx data.stations[1].nextTrain; // "5 分鐘" ``` --- **情境三：Imgur 圖片服務** 小美想做一個圖片上傳功能，她看到 Imgur API 回傳的資料長這樣： ```jsx { "data": { "id": "abc123", "title": "我的貓咪", "link": "https://i.imgur.com/abc123.jpg", "width": 1920, "height": 1080 }, "success": true, "status": 200 } ``` 1. 最外層是 `{}` → 物件 2. 真正的圖片資料藏在 `data` 屬性裡，`data` 本身也是一個**物件** 3. 請問：怎麼取出圖片的連結？ ```jsx 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 就好 | ![2026-03-19_10_17_20](https://hackmd.io/_uploads/Bkz4pHccZe.png) ![截圖 2026-03-20 中午12.29.44](https://hackmd.io/_uploads/HkBvTHq9Zx.png) * Skill [Muse](https://muse.cheyuwu.com/) ## 模擬面試：順序 * RobertLin792252 * Norman * Jason Good * mizuren * JackyXiang [六角人],