js中Map和Set的用法及区别是什么

# JS中Map和Set的用法及区别是什么

## 目录
1. [引言](#引言)
2. [Map的基本用法](#map的基本用法)
   - [创建与初始化](#创建与初始化)
   - [常用操作方法](#常用操作方法)
   - [遍历方式](#遍历方式)
3. [Set的基本用法](#set的基本用法)
   - [创建与初始化](#创建与初始化-1)
   - [常用操作方法](#常用操作方法-1)
   - [遍历方式](#遍历方式-1)
4. [核心区别对比](#核心区别对比)
   - [数据结构本质](#数据结构本质)
   - [API差异](#api差异)
   - [使用场景](#使用场景)
5. [性能比较](#性能比较)
6. [实际应用案例](#实际应用案例)
   - [Map的应用场景](#map的应用场景)
   - [Set的应用场景](#set的应用场景)
7. [常见误区](#常见误区)
8. [总结](#总结)

## 引言
在JavaScript的ES6规范中，新增了`Map`和`Set`两种数据结构，它们为开发者提供了更高效的键值对存储和唯一值管理方案。本文将深入解析它们的用法、区别以及实际应用场景。

---

## Map的基本用法

### 创建与初始化
```javascript
// 空Map
const map1 = new Map();

// 带初始值
const map2 = new Map([
  ['key1', 'value1'],
  [2, 'value2']
]);

常用操作方法

遍历方式

// 遍历键值对
map.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

// for...of遍历
for (const [key, value] of map) {
  console.log(key, value);
}

Set的基本用法

创建与初始化

// 空Set
const set1 = new Set();

// 带初始值（自动去重）
const set2 = new Set([1, 2, 2, 3]); // 最终存储1,2,3

常用操作方法

遍历方式

// forEach遍历
set.forEach(value => {
  console.log(value);
});

// for...of遍历
for (const value of set) {
  console.log(value);
}

核心区别对比

数据结构本质

API差异

// Map特有的API
map.keys()    // 返回键的迭代器
map.values()  // 返回值的迭代器
map.entries() // 返回键值对迭代器

// Set特有的API
set.keys()    // 同values()（为保持一致性）
set.values()  // 返回值的迭代器

使用场景

• 选择Map的情况：

  • 需要键值对关联数据
  • 键需要非字符串类型（如对象键）
  • 需要频繁根据键查找值

• 选择Set的情况：

  • 需要确保值的唯一性
  • 需要快速判断值是否存在
  • 集合运算（并集/交集/差集）

性能比较

在V8引擎中的表现： 1. 查找效率： - Map的has()和Set的has()均为O(1)复杂度 - 比数组的includes()（O(n)）快10倍以上

1. 插入/删除：
   • Map的set/delete和Set的add/delete都是O(1)
   • 比普通对象操作略慢（但更安全）

实际应用案例

Map的应用场景

1. DOM节点元数据存储

const nodeMap = new Map();
const div = document.querySelector('div');

nodeMap.set(div, { clickCount: 0 });
div.addEventListener('click', () => {
  const meta = nodeMap.get(div);
  meta.clickCount++;
});

1. 复杂键值缓存

const cache = new Map();
function deepClone(obj) {
  if (cache.has(obj)) return cache.get(obj);
  // ...克隆逻辑
  cache.set(obj, clone);
  return clone;
}

Set的应用场景

1. 数组去重

const arr = [1,2,2,3,4,4];
const unique = [...new Set(arr)]; // [1,2,3,4]

1. 标签系统

const tags = new Set();
tags.add('JavaScript');
tags.add('CSS');
tags.add('JavaScript'); // 自动忽略

// 检查标签是否存在
if (tags.has('HTML')) {
  // ...
}

常见误区

1. 与普通对象混淆： “`javascript // 错误：用对象模拟Map const fakeMap = {}; fakeMap[{id:1}] = ‘value’; // 键会被转为”[object Object]”

// 正确：使用真正的Map const realMap = new Map(); realMap.set({id:1}, ‘value’); // 支持对象键

2. **忽略遍历顺序**：
   ```javascript
   // Map和Set都保持插入顺序（与普通对象不同）
   const map = new Map();
   map.set('a', 1);
   map.set('b', 2);
   [...map.keys()]; // 保证返回['a','b']

总结

最佳实践建议： 1. 需要键值对关联时优先选择Map而非普通对象 2. 需要保证唯一性时使用Set代替数组 3. 大型数据集合操作时，Map/Set的性能优势更明显 “`