Set和Map有什么区别？

在 JavaScript 中，Set 和 Map 是两种常用的集合类型，它们都用于存储数据，但设计目的和应用场景截然不同。以下是两者的核心区别及适用场景：

一、核心差异概览

二、具体差异详解

1. 存储结构与元素类型

• Set：
  仅存储值，且每个值必须唯一。

  const set = new Set([1, 2, 2, 3]);
  console.log([...set]); // [1, 2, 3]（自动去重）
  
          
  
            
          
          
          
  
            
  
            AI 代码解读
          
        
        

• Map：
  存储键值对，键的唯一性由引用或值决定。

  const map = new Map();
  map.set("name", "John");
  map.set(1, "one"); // 键可以是任意类型
  console.log(map.get("name")); // "John"
  
          
  
            
          
          
          
  
            
  
            AI 代码解读
          
        
        

2. 键的类型与唯一性

• Set：
  无键概念，元素本身即值，重复值会被自动过滤。

  const set = new Set();
  set.add({
       });
  set.add({
       }); // 两个空对象引用不同，均被添加
  console.log(set.size); // 2
  
          
  
            
          
          
          
  
            
  
            AI 代码解读
          
        
        

• Map：
  键可以是任意类型（包括对象、函数），重复键会覆盖旧值。

  const map = new Map();
  const key1 = {
       };
  const key2 = {
       };
  map.set(key1, "value1");
  map.set(key2, "value2"); // 两个空对象引用不同，视为不同键
  console.log(map.size); // 2
  
  // 重复键覆盖示例
  map.set("name", "Alice");
  map.set("name", "Bob"); // 覆盖前一个值
  console.log(map.get("name")); // "Bob"
  
          
  
            
          
          
          
  
            
  
            AI 代码解读
          
        
        

3. 常用方法对比

三、应用场景对比

四、性能差异

• Set：

  • 添加、删除、检查存在性的时间复杂度均为 O(1)，适合频繁操作。
  • 遍历时按插入顺序返回元素。

• Map：

  • 键值对操作（set、get、delete）的时间复杂度也为 O(1)。
  • 遍历时按键的插入顺序返回键值对。

五、示例对比

1. 数组去重

// 使用 Set
const arr = [1, 2, 2, 3];
const unique = [...new Set(arr)];
console.log(unique); // [1, 2, 3]

        

          
        
        
        

          

          AI 代码解读
        
      
      

2. 统计字符出现次数

// 使用 Map
const str = "hello";
const charCount = new Map();

for (const char of str) {
   
  charCount.set(char, (charCount.get(char) || 0) + 1);
}

console.log(charCount); // Map(4) { 'h' => 1, 'e' => 1, 'l' => 2, 'o' => 1 }

        

          
        
        
        

          

          AI 代码解读
        
      
      

3. 缓存计算结果

// 使用 Map 缓存斐波那契数列结果
const cache = new Map();

function fib(n) {
   
  if (n <= 1) return n;
  if (cache.has(n)) return cache.get(n);

  const result = fib(n - 1) + fib(n - 2);
  cache.set(n, result);
  return result;
}

console.log(fib(10)); // 55（仅计算一次，后续直接从缓存获取）

        

          
        
        
        

          

          AI 代码解读
        
      
      

六、总结：如何选择？

• 使用 Set：

  • 需要存储唯一值集合。
  • 频繁检查元素是否存在。
  • 无需键值映射，只需维护值的集合。

• 使用 Map：

  • 需要建立键值对映射关系。
  • 键的类型可能是对象或其他引用类型。
  • 需要按插入顺序遍历键值对。

理解两者差异后，可根据具体需求灵活选择数据结构，提升代码效率和可读性。