iT邦幫忙

2025 iThome 鐵人賽

DAY 11
0
Modern Web

Modern Web學習札記:初學者的探索系列 第 24

Day 24:物件 (Object) 操作——用鍵值管理資料

  • 分享至 

  • xImage
  •  

在學完陣列之後,我們知道它非常適合儲存「多筆同類型資料」,例如一串數字或一系列商品名稱。
但當資料需要更多結構化資訊時,例如「一位使用者的姓名、年齡、電子郵件」,或「一項商品的名稱、價格、庫存量」,就該使用物件(Object)這個更靈活的資料型別。

物件的基本概念
物件是一種「鍵值配對(Key-Value Pair)」的資料結構。
簡單來說,每一個「鍵(Key)」對應一個「值(Value)」,用來描述某個資料的屬性。
舉例來說,一位使用者的資料可以這樣表示:
姓名 → Amy
年齡 → 19
信箱 → amy@example.com
在程式中,這樣的資料就能用物件清楚呈現各欄位的關係。
物件的好處在於結構清楚、可讀性高,也方便擴充。當我們想新增一項資料,只要再加一組鍵值即可。

建立與存取物件
建立物件時,可以用大括號 {} 包住所有鍵值內容。
例如,建立一個使用者的物件,可包含姓名、年齡與信箱等屬性。
要讀取其中的資料,只要使用「點(.)」或「中括號([])」即可存取對應的值。
同樣地,我們也能修改或刪除物件內的屬性,這讓物件非常適合用來儲存會變動的資料。
像是使用者登入後更改暱稱、商品折扣後更新價格,這些動態變化都能輕鬆處理。

物件與函式、迴圈的結合
物件不只是靜態資料,也能與函式或迴圈搭配使用,處理更複雜的情境。
例如:
可以用函式自動建立多個物件,代表不同使用者或商品。
使用迴圈(例如 for...in)逐一讀取物件屬性,用來顯示資料或進行分析。
可以在物件內定義方法(method),讓物件能「自己執行動作」,例如計算總價或顯示資訊。
這樣的設計不僅讓資料更有結構,也讓程式邏輯更容易擴充與維護。

物件的應用情境
物件幾乎可以說是所有網頁與應用程式的核心資料結構之一。
例如:
使用者資料(帳號、密碼、生日、會員等級)
商品資訊(名稱、價格、庫存、分類)
感測裝置數據(心率、血氧、時間戳記)
API 傳回的 JSON 格式資料
在實務應用中,我們常會處理「物件的陣列」,例如多個使用者的清單,每個人都是一個物件。
這種結構非常直觀,方便整合資料與動態生成網頁內容。

學習心得
透過學習物件,我更能理解資料結構在程式中的重要性。
以前我只會用變數或陣列儲存資料,常常讓程式顯得雜亂又難以維護。
但學會物件之後,我能用更有條理的方式描述資料,清楚地表達每個欄位的意義。
我特別覺得「鍵值配對」的概念很實用,不論是管理使用者、商品,或是串接外部 API,都離不開物件的運用。
未來我希望能更熟悉物件與 JSON 的關聯,並嘗試將物件應用在實際的前端專案中,例如資料渲染或即時資料更新。
學會物件之後,我感受到程式不再只是單純執行指令,而是能「理解資料之間的關係」,
這讓我離真正的網頁互動設計又更進一步。


上一篇
Day 23:陣列 (Array) 進階操作——資料一次管理
下一篇
Day 25:字串 (String) 操作——讓文字更靈活
系列文
Modern Web學習札記:初學者的探索30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言