JavaScript 中的 Map 和 Set

Source: Dev.to

什么是 Map？

Map 是一种 键‑值对 的集合，类似于对象，但有多项改进：

• 键可以是 任意类型（对象、函数、原始值）
• 保留 插入顺序
• 内置方法用于 获取、设置、删除和检查 条目

Map 示例

const map = new Map();

map.set("name", "Rahul");
map.set("age", 22);
map.set(true, "Boolean key");

console.log(map.get("name")); // Rahul
console.log(map.has("age"));  // true
console.log(map.size);        // 3

Map 可视化

Key → Value
"name"  → "Rahul"
"age"   → 22
true    → "Boolean key"

Map 与 Object 对比

什么是 Set？

Set 是一种 唯一值 的集合——重复的值会被自动移除。

• 可以存放任意类型的值
• 提供快速查找和唯一性检查

Set 示例

const set = new Set([1, 2, 3, 2, 1]);

console.log(set);          // Set(3) { 1, 2, 3 }
console.log(set.has(2));   // true

set.add(4);
console.log(set);          // Set(4) { 1, 2, 3, 4 }

Set 可视化

[1, 2, 3, 2, 1] → Set → {1, 2, 3}

Set 与 Array 对比

何时使用 Map 与 Set

使用 Map 的场景：

• 需要 任意类型的动态键
• 想要 有序的键‑值存储
• 需要内置的遍历条目功能

使用 Set 的场景：

• 只想要 唯一值
• 需要 快速检查是否存在
• 想要 从数组中去除重复项

去重示例

const numbers = [1, 2, 3, 2, 4, 3];
const uniqueNumbers = [...new Set(numbers)];

console.log(uniqueNumbers); // [1, 2, 3, 4]

使用 Map 计数出现次数

const arr = ["apple", "banana", "apple"];
const countMap = new Map();

arr.forEach(item => {
  countMap.set(item, (countMap.get(item) || 0) + 1);
});

console.log(countMap);
// Map(2) { "apple" => 2, "banana" => 1 }

关键要点

• Map → 灵活的键‑值存储，有序，键可以是任意类型
• Set → 唯一值集合，查找快，轻松去重
• 两者都解决了 对象和数组的常见局限。