前端JS: Set与Map

Set 和 Map 详解

一、Set（集合）

1. 核心特性

• 存储唯一值的集合（自动去重）
• 值可以是任意类型
• 没有键，只有值
• 插入顺序就是迭代顺序

2. 常用方法

const set = new Set()

// 基本操作
set.add(1)           // 添加值
set.has(1)           // 检查存在
set.delete(1)        // 删除值
set.size             // 元素个数
set.clear()          // 清空

// 遍历
set.forEach(value => {})
for (let value of set) {}
for (let value of set.keys()) {}     // 同 values()
for (let value of set.values()) {}   // 同 keys()
for (let [key, value] of set.entries()) {}  // key = value

3. 去重应用

// 数组去重
const arr = [1, 2, 2, 3, 4, 4]
const unique = [...new Set(arr)]  // [1, 2, 3, 4]

// 字符串去重
const str = 'abbacd'
const uniqueStr = [...new Set(str)].join('')  // 'abcd'

4. WeakSet（弱集合）

• 只能存储对象引用
• 不可遍历
• 不会阻止垃圾回收

const ws = new WeakSet()
ws.add({})  // 只能添加对象

---

二、Map（映射）

1. 核心特性

• 键值对集合

• 键可以是任意类型（对象、函数、基本类型）

• 保持插入顺序

• 相比 Object 的优势：

  • 键的类型不受限
  • 有 size 属性
  • 可遍历
  • 性能更好（频繁增删）

2. 常用方法

const map = new Map()

// 基本操作
map.set('key', 'value')  // 设置键值
map.get('key')           // 获取值
map.has('key')           // 检查键
map.delete('key')        // 删除
map.size                 // 元素个数
map.clear()              // 清空

// 遍历
map.forEach((value, key) => {})
for (let [key, value] of map) {}
for (let [key, value] of map.entries()) {}
for (let key of map.keys()) {}
for (let value of map.values()) {}

3. 与 Object 对比

特性	Map	Object
键类型​	任意类型	字符串/Symbol
顺序​	插入顺序	无序（ES6后有序但特殊）
size​	✅ 有	❌ 无（需计算）
遍历​	直接可遍历	需要 Object.keys()
性能​	增删频繁时好	静态数据时好
JSON​	❌ 不支持	✅ 支持

4. 使用场景

// 1. 键需要是对象
const objKey = { id: 1 }
const map = new Map()
map.set(objKey, 'value')

// 2. 需要保持顺序
const orderedMap = new Map()
orderedMap.set('z', 1)
orderedMap.set('a', 2)
// 遍历顺序: 'z' → 'a'

// 3. 缓存实现
class Cache {
  constructor() {
    this.cache = new Map()
  }
  
  set(key, value, ttl = 1000) {
    this.cache.set(key, { value, expire: Date.now() + ttl })
  }
  
  get(key) {
    const item = this.cache.get(key)
    if (!item || item.expire < Date.now()) {
      this.cache.delete(key)
      return null
    }
    return item.value
  }
}

5. WeakMap（弱映射）

• 键必须是对象
• 值可以是任意类型
• 不可遍历
• 不会阻止垃圾回收

const wm = new WeakMap()
const obj = {}
wm.set(obj, 'private data')

---

---

一句话总结

Set 是值唯一的集合，用于去重和集合运算；Map 是键值对集合，键可以是任意类型，用于需要复杂键或保持顺序的场景。