跳到主要內容
Cypher's Practical Coding
正在準備工作環境...

陣列與物件

到目前為止,我們的變數都只存「一個值」。 但現實中,資料常常是「一組」的——商品清單、訂單列表、客戶名單。

這時候就需要「陣列」和「物件」。

陣列(Array)——有順序的清單

陣列用方括號 [] 包起來,裡面可以放很多值:

取得特定元素

[索引] 取得指定位置的元素。索引從 0 開始

索引0123
白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 →