下面给你一份 超清晰、可直接运行的 JavaScript Set 与 Map 示例详解，从基础到高级应用，包含常见用法、容易忽略的细节、以及工程级场景示例。适合学习、面试、项目引用。
🚀 一、Set 的示例详解（唯一值集合）
1️⃣ Set 基本用法
const set = new Set();
set.add(1);
set.add(2);
set.add(2); // 重复值会被忽略
console.log(set); // Set { 1, 2 }
console.log(set.size); // 2
console.log(set.has(1)); // true
set.delete(1);
console.log(set.has(1)); // false
特点：
- 自动去重
- 只能存放唯一值
2️⃣ 用 Set 进行数组去重（最常见）
const arr = [1, 2, 3, 2, 1];
const unique = [...new Set(arr)];
console.log(unique); // [1, 2, 3]
这是前端最常见的 Set 使用场景之一。
3️⃣ Set 对 NaN 的处理示例
const set = new Set([NaN, NaN]);
console.log(set.size); // 1 （NaN === NaN 在 Set 中为 true）
对比数组：
[NaN].includes(NaN); // false
4️⃣ Set 可以存储对象（按引用判断是否相同）
const set = new Set();
const obj = { a: 1 };
set.add(obj);
set.add({ a: 1 }); // 引用不同，被当作新元素
console.log(set.size); // 2
5️⃣ Set 遍历示例
const set = new Set(["a", "b", "c"]);
for (const v of set) {
console.log(v);
}
set.forEach(v => console.log("foreach:", v));
🔥 6️⃣ 使用 Set 做集合运算（高级示例）
并集
const a = new Set([1, 2]);
const b = new Set([2, 3]);
const union = new Set([...a, ...b]);
console.log(union); // Set {1,2,3}
交集
const intersection = new Set([...a].filter(x => b.has(x)));
console.log(intersection); // Set {2}
差集
const difference = new Set([...a].filter(x => !b.has(x)));
console.log(difference); // Set {1}
🚀 二、Map 的示例详解（键值对哈希结构）
1️⃣ 基本用法
const map = new Map();
map.set("name", "Jack");
map.set("age", 18);
console.log(map.get("name")); // Jack
console.log(map.has("age")); // true
map.delete("age");
console.log(map.size); // 1
2️⃣ Map 的 key 可以是任意类型（重点）
const map = new Map();
const obj = { id: 1 };
map.set(obj, "this is object");
map.set(() => {}, "function key");
map.set(NaN, "NaN key");
console.log(map);
Object 不能做到这一点（只能用字符串当 key）。
3️⃣ Map 遍历示例
const map = new Map([
['a', 1],
['b', 2]
]);
for (const [key, value] of map) {
console.log(key, value);
}
map.forEach((value, key) => {
console.log("foreach:", key, value);
});
4️⃣ 使用 Map 来统计词频（工程中最常见场景）
const text = "banana";
const freq = new Map();
for (const ch of text) {
freq.set(ch, (freq.get(ch) || 0) + 1);
}
console.log([...freq]);
// [ ['b',1], ['a',3], ['n',2] ]
5️⃣ 学会用对象当 key（强大示例）
const user = { id: 1 };
const map = new Map();
map.set(user, { loginTime: Date.now() });
console.log(map.get(user));
// 删除对象不会误删其他 key
map.delete(user);
Object 当 key 时按引用判断。
🔥 6️⃣ 实现 LRU Cache（Map 的经典应用）
class LRU {
constructor(limit = 3) {
this.limit = limit;
this.cache = new Map();
}
get(key) {
if (!this.cache.has(key)) return null;
const value = this.cache.get(key);
this.cache.delete(key); // 移除旧位置
this.cache.set(key, value); // 插到末尾（最新）
return value;
}
set(key, value) {
if (this.cache.has(key)) {
this.cache.delete(key);
}
this.cache.set(key, value);
if (this.cache.size > this.limit) {
const firstKey = this.cache.keys().next().value;
this.cache.delete(firstKey);
}
}
}
const lru = new LRU(2);
lru.set("a", 1);
lru.set("b", 2);
lru.set("c", 3); // a 被淘汰
console.log([...lru.cache]); // [["b",2],["c",3]]
Map 的 “保持插入顺序” + “快速查询” 完美适合做 LRU。
🚀 三、Set 与 Map 合作示例（高级）
1️⃣ 根据 Map 中的值过滤 Set
const ids = new Set([1, 2, 3, 4]);
const info = new Map([[1, "ok"], [3, "ok"]]);
const filtered = new Set([...ids].filter(id => info.has(id)));
console.log(filtered); // Set {1, 3}
2️⃣ 用 Set 去重 Map 的 value
const users = new Map([
['a', 'Tom'],
['b', 'Jack'],
['c', 'Tom']
]);
const uniqueNames = new Set(users.values());
console.log(uniqueNames); // Set {'Tom','Jack'}
🚀 四、Set 与 Map 的常见陷阱示例
❗1️⃣ Set 对对象不去重（按引用判断）
new Set([{a:1}, {a:1}]).size; // 2
❗2️⃣ Map 中 key 是对象时必须保留引用
const map = new Map();
map.set({a:1}, 123);
map.get({a:1}); // undefined，因为不是同一个引用
❗3️⃣ JSON 无法直接序列化 Set/Map
JSON.stringify(new Set([1,2])); // {}
正确做法：
JSON.stringify([...new Set([1,2])]); // [1,2]