正在準備工作環境...
陣列與物件
到目前為止,我們的變數都只存「一個值」。 但現實中,資料常常是「一組」的——商品清單、訂單列表、客戶名單。
這時候就需要「陣列」和「物件」。
陣列(Array)——有順序的清單
陣列用方括號 [] 包起來,裡面可以放很多值:
取得特定元素
用 [索引] 取得指定位置的元素。索引從 0 開始:
| 索引 | 0 | 1 | 2 | 3 |
|---|---|---|---|---|
| 值 | 白T | 牛仔褲 | 帽子 | 背包 |
陣列的長度
.length 可以知道陣列有幾個元素:
新增元素
.push() 可以在陣列最後面加入新元素:
搭配迴圈走訪
物件(Object)——有名字的資料組合
物件用大括號 {} 包起來,每筆資料都有「名稱(key)」和「值(value)」:
物件就像一張資料卡:
product.name→ 商品名稱product.price→ 商品價格product.inStock→ 是否有庫存
修改物件的值
陣列 + 物件 = 真實資料
在實際系統中,資料通常是「一組物件的陣列」:
這就是 API 回傳的資料格式——JSON(JavaScript Object Notation),名字裡就有 JavaScript!
實際應用:找出最高金額訂單
AI 協作:學了這個,跟 AI 怎麼配合?
陣列和物件是 JavaScript 處理資料的基礎結構——API 回傳的資料幾乎都是這兩種。
你的人類優勢:
- 你能看懂 AI 回傳的資料結構(這是一個物件的陣列?還是巢狀物件?)
- 你能指出你需要的是「陣列裡的第幾個」或「物件裡的哪個 key」
可以這樣跟 AI 說:
我有一個商品陣列,每個元素是 { name, price, category },幫我找出 category 是「配件」的所有商品。
練習題
互動示範
DEMO 1可以修改程式碼試玩
DEMO 2可以修改程式碼試玩
DEMO 3可以修改程式碼試玩
DEMO 4可以修改程式碼試玩
DEMO 5可以修改程式碼試玩
DEMO 6可以修改程式碼試玩
DEMO 7可以修改程式碼試玩
DEMO 8可以修改程式碼試玩
DEMO 9可以修改程式碼試玩
挑戰任務
Task 1
請宣告陣列 fruits = ["蘋果", "香蕉", "橘子"],用 console.log 印出第二個元素(索引 1)。
Task 2
請宣告物件 product = { name: "防曬乳", price: 450 },用 console.log 印出「防曬乳 售價 450 元」。
Task 3
請宣告 nums = [10, 20, 30, 40],用 for 迴圈計算總和並印出。
← BackTake the Exam →