[觀念筆記] JavaScript 中 Object 和 Map 的差別是什麼？

更新於 2025/06/04發佈於 2025/06/04閱讀時間約 7 分鐘

Object 是什麼？

Object 就是 {}
內容元素會是屬性 (key) 和值 (value)

範例：

const obj = {
  name: "小明",
  age: 28
};

Object 的 key 只能是字串或 Symbol
如果用數字或物件當 key，JavaScript 會自動把它轉成字串

範例：

const obj = {
  1: "one",
  true: "yes",
  [ {a: 1} ]: "object"
};

console.log(obj);
// 實際上 key 變成：
// {
//   "1": "one",
//   "true": "yes",
//   "[object Object]": "object"
// }

Map 是什麼？

Map 也是一種用 key-value pair 儲存資料的資料結構它解決了 Object 的 key 只能是字串或 Symbol 的限制
Map 的 key 可以是任何型別：
- 字串
- 數字
- 布林
- 物件
- 陣列
- 函式

Object 與 Map 差異

key 型別限制：

Object：只能字串或 Symbol
Map：任何型別（含物件、陣列、函式）

順序性：

Object：沒有嚴格順序
Map：有順序，按照插入順序迭代

可迭代性：

Object：不可直接用 for...of 或 forEach 迭代
Map：可直接用 for...of 或 forEach 迭代

常用方法：

Object：Object.keys、Object.values
Map：set、get、has、delete、clear、size

Object 的元素沒有順序性；Map 的有順序

Map 會按照插入的順序記錄 key-value，迭代時順序固定

範例：

const map = new Map();
map.set("b", 2);
map.set("a", 1);
console.log([...map.keys()]); // ["b", "a"]

Map 的常用方法

set(key, value)：設定 key 對應的 value
get(key)：取得 key 對應的 value
has(key)：檢查 Map 是否有某個 key
delete(key)：刪除某個 key-value
clear()：清空所有 key-value
size：Map 內部的資料筆數

範例：

const map = new Map();
map.set("a", 1);
map.set("b", 2);

console.log(map.get("a")); // 1
console.log(map.has("b")); // true
console.log(map.size);     // 2
map.delete("a");
console.log(map.size);     // 1
map.clear();
console.log(map.size);     // 0

Map 的可迭代性

Map 可以直接用 for...of 迭代

範例：

const map = new Map();
map.set("a", 1);
map.set("b", 2);

for (let [key, value] of map) {
  console.log(key, value);
}
// a 1
// b 2

使用 Map 方法的重點觀念 — 物件傳參考

物件是「傳參考」，意思是：

即使定義的兩個物件內容一樣，兩個值都是 { a: 1 } 也會指向不同記憶體位置
Map 在使用 set 和 get 的時候，會依照記憶體位置來找值
因此使用 set 和 get 時，若 key 是物件型別，會宣告一個變數來儲存同一個參考 (同一個記憶體位置)
若 get 方法的 key 參數直接用物件型別(如 { })，value 會是 undefined

範例：

const map = new Map();
const objKey = { a: 1 }; // 透過變數賦值物件
map.set(objKey, "hello"); // 再透過變數為 key，設定 value

console.log(map.get({ a: 1 })); // undefined
console.log(map.get(objKey));   // hello

要用同一個變數 (記憶體位址) 才找得到資料
雖然 get 用 { a: 1 } 當 key，值和變數 objKey 一樣，但這樣使用會指向另一個記憶體位置，而非 objKey 指向的記憶體位置，所以結果 undefined

小測驗題 & 解答

const map = new Map();const key1 = [1, 2, 3];map.set(key1, "hello");console.log(map.get([1, 2, 3])); // undefinedconsole.log(map.get(key1));      // "hello"console.log(key1);               // [1, 2, 3]