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

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]

• 因為 [1, 2, 3] 跟 key1 是兩個不同記憶體位址因為 Map 有用 set 設定 key 為 key1，其 value 為 "hello"，所以後面用 get 方法取 key1 的 value 是 "hello"

總結：

Object：

• key 限制字串或 Symbol
• 沒有順序
• 不支援 for...of 、forEach 迭代方法

Map：

• key 可以是任何型別
• 有順序
• 支援 for...of 、forEach 迭代方法
• 注意指向的記憶體位址，使用物件/函式作為 key 時要同一個參考