紅寶書第十四講：詳解JavaScript集合類型：Map、Set、WeakMap
資料取自《JavaScript高級程序設(shè)計（第5版）》。
查看總目錄：紅寶書學(xué)習(xí)大綱
一、Map：鑰匙任選的“保險箱”
Map的鍵可以是任意數(shù)據(jù)類型（如對象、函數(shù)），不像普通Object只能用字符串/符號作為鍵。適合需要復(fù)雜鍵的場景 [1]。
示例：員工信息管理
// 創(chuàng)建Map（支持鏈?zhǔn)讲僮鳎?const employeeMap = new Map();
const emp1 = { id: 1001 };
employeeMap.set(emp1, { name: '小明', age: 25 });
employeeMap.set('default', '未分配員工');
// 獲取值
console.log(employeeMap.get(emp1)); // {name: '小明', age: 25}
console.log(employeeMap.get('default')); // "未分配員工"
// 遍歷
employeeMap.forEach((value, key) =>
console.log(`鍵類型：${typeof key} → 值：${JSON.stringify(value)}`)
);
// 輸出：
// 鍵類型：object → 值：{"name":"小明","age":25}
// 鍵類型：string → 值："未分配員工"
[1]: 參考資料1指出Map的鍵類型靈活性優(yōu)于普通對象
二、Set：自動去重的“篩子”
Set存儲唯一值，重復(fù)添加會被自動過濾。常用于統(tǒng)計不重復(fù)項或去重操作 [2]。
示例：統(tǒng)計不同城市用戶
const cities = new Set();
cities.add('北京');
cities.add('上海').add('北京'); // 重復(fù)添加無效
console.log(cities.size); // 2
console.log([...cities]); // ['北京', '上海']
// 數(shù)組去重（經(jīng)典用法）
const nums = [1, 2, 2, 3, 3, 3];
const uniqueNums = [...new Set(nums)]; // [1, 2, 3]
[2]: 參考資料1說明Set的自動去重特性
三、WeakMap & WeakSet：環(huán)保的“臨時掛鉤”
WeakMap的鍵必須為對象且弱引用（不阻止垃圾回收），適合臨時關(guān)聯(lián)數(shù)據(jù)而不造成內(nèi)存泄漏 [3]。
示例：記錄DOM元素的附加數(shù)據(jù)
// 存儲按鈕點擊次數(shù)（按鈕消失后自動刪除記錄）
const clickCountMap = new WeakMap();
const btn = document.querySelector('#loginBtn');
btn.addEventListener('click', () => {
const count = (clickCountMap.get(btn) || 0) + 1;
clickCountMap.set(btn, count);
console.log(`點擊次數(shù)：${count}`);
});
// 若btn從DOM移除 → btn對象將被回收，clickCountMap中的條目自動消失
[3]: 參考資料3和6強(qiáng)調(diào)WeakMap鍵的弱引用特性
flowchart LR
WeakMap -->|鍵為對象| 對象A(emp1)
WeakMap -->|鍵為對象| 對象B(btn)
WeakMap -->|弱引用| 垃圾回收(Garbage Collector)
垃圾回收 --> 對象被回收時自動清除WeakMap條目
對比普通Map與WeakMap：
- 內(nèi)存管理：WeakMap自動釋放無引用鍵的數(shù)據(jù)，避免內(nèi)存泄漏（如移除的DOM元素）[4]
- 限制：WeakMap不可遍歷，鍵只能是對象（原始類型報錯?）
[4]: 參考資料6通過DOM節(jié)點示例說明WeakMap的自動清理優(yōu)勢
總結(jié)與適用場景
| 類型 | 特點 | 使用場景 |
|---|---|---|
| Map | 鍵類型靈活、可遍歷 | 替代復(fù)雜鍵的Object |
| Set | 值唯一性保證 | 數(shù)組去重、集合運算 |
| WeakMap | 弱引用鍵、內(nèi)存自動回收 | 緩存DOM元素相關(guān)數(shù)據(jù) |
重要提醒：
- WeakMap的鍵只能是對象，否則報錯（如
wm.set('key', 123)?）[5] - WeakSet用法類似，但存儲對象集合且不可遍歷
目錄：總目錄
上篇文章：紅寶書第十三講：詳解JavaScript核心對象：Array、Object、Date、RegExp
腳注
-
《JavaScript高級程序設(shè)計（第5版）》（第6章Map類型）指出Map的鍵類型靈活性。 ? ?
-
《JavaScript高級程序設(shè)計（第5版）》（第6章Set類型）說明Set的自動去重。 ? ?
-
《JavaScript高級程序設(shè)計（第5版）》示例WeakMap的弱引用清理機(jī)制。 ? ?
-
《JavaScript高級程序設(shè)計（第5版）》通過DOM節(jié)點示例WeakMap的自動清理。 ? ?
-
《JavaScript高級程序設(shè)計（第5版）》示例WeakMap初始化時的類型錯誤。 ?
