傳統對象的局限性催生 Map?

1. 鍵類型單一性?

傳統對象（Object）的鍵只能是?字符串或 Symbol?，無法直接使用對象、函數等復雜類型作為鍵名。而 Map 允許?任意數據類型作為鍵?（包括對象、函數等），解決了鍵類型受限的問題?。

// 傳統對象鍵名被強制轉為字符串 ?:ml-citation{ref="4" data="citationList"}
const objKey = { id: 1 };
const data = {};
data[objKey] = 'value'; // 鍵名實際存儲為 "[object Object]"
console.log(data['[object Object]']); // 輸出 "value"// Map 直接使用對象作為鍵 ?:ml-citation{ref="4,6" data="citationList"}
const map = new Map();
map.set(objKey, 'value');
console.log(map.get(objKey)); // 直接輸出 "value"

2. 有序性與迭代支持?

Map ?保持鍵值對的插入順序?，支持通過 forEach、for...of 等方法遍歷，且提供 size 屬性快速獲取鍵值對數量，彌補了傳統對象無法保證順序和統計大小的不足?。

const map = new Map();
map.set('a', 1).set('b', 2);
for (const [key, val] of map) {console.log(key, val); // 輸出順序：a 1 → b 2
}

3. 性能優化場景?

在頻繁增刪鍵值對或需要大量非字符串鍵的場景下，Map 的性能優于傳統對象（尤其在處理對象鍵時）?。

內存管理需求催生 WeakMap?

1.弱引用機制?

WeakMap 的鍵必須是?對象?，且對鍵是?弱引用?（不阻止垃圾回收）。當鍵對象被外部代碼釋放后，WeakMap 會自動清理對應的鍵值對，避免內存泄漏?。

2. 私有數據存儲?

WeakMap 適合存儲與對象生命周期綁定的私有數據，例如 Vue3 中管理組件響應式數據?。

// 模擬 Vue3 響應式系統使用 WeakMap ?:ml-citation{ref="1" data="citationList"}
const reactiveMap = new WeakMap();
function createReactiveObject(target) {if (reactiveMap.has(target)) {return reactiveMap.get(target);}const proxy = new Proxy(target, { /* 處理邏輯 */ });reactiveMap.set(target, proxy);return proxy;
}
// 組件銷毀后，target 對象被回收，WeakMap 自動清理對應代理

3. 規避循環引用問題?

在復雜對象關聯場景中，WeakMap 的弱引用特性可避免因相互引用導致的內存無法回收問題?。

總結