JavaScript Map 和 Set 教程

JavaScript Map 和 Set 教程

Map 数据结构

Map 基本概念

Map 是一种键值对的集合,类似于对象(Object),但是它的键可以是任何数据类型(包括对象、函数等),而不仅限于字符串。Map 提供了一系列方法来操作这些键值对。

Map 的创建和基本操作

// 创建空 Map
const map = new Map();// 使用数组创建 Map
const map2 = new Map([['name', '张三'],['age', 25]
]);// 添加键值对
map.set('key1', 'value1');
map.set(true, 123);
map.set({x: 1}, 'object as key');// 获取值
console.log(map.get('key1')); // 'value1'// 检查键是否存在
console.log(map.has('key1')); // true// 删除键值对
map.delete('key1');// 获取 Map 大小
console.log(map.size);// 清空 Map
map.clear();

Map 的遍历方法

const map = new Map([['name', '张三'],['age', 25],['city', '北京']
]);// 遍历所有键值对
map.forEach((value, key) => {console.log(`${key}: ${value}`);
});// 获取所有键
for (let key of map.keys()) {console.log(key);
}// 获取所有值
for (let value of map.values()) {console.log(value);
}// 获取所有键值对
for (let [key, value] of map.entries()) {console.log(`${key}: ${value}`);
}

Map 与对象的区别

1. 键的类型：Map 的键可以是任何类型,Object 的键只能是字符串或 Symbol
2. 键的顺序：Map 会维护键值对的插入顺序,Object 不保证顺序
3. Size：Map 可以直接获取 size 属性,Object 需要手动计算
4. 迭代：Map 可直接迭代,Object 需要先获取键数组

Set 数据结构

Set 基本概念

Set 是一种值的集合,其中的值都是唯一的。它类似于数组,但成员的值都是唯一的,没有重复的值。

Set 的创建和基本操作

// 创建空 Set
const set = new Set();// 使用数组创建 Set
const set2 = new Set([1, 2, 3, 3, 4]); // 重复值会被自动去除// 添加值
set.add(1);
set.add('text');
set.add({x: 10});// 检查值是否存在
console.log(set.has(1)); // true// 删除值
set.delete(1);// 获取 Set 大小
console.log(set.size);// 清空 Set
set.clear();

Set 的遍历方法

const set = new Set(['A', 'B', 'C']);// forEach 遍历
set.forEach(value => {console.log(value);
});// for...of 遍历
for (let item of set) {console.log(item);
}// 获取所有值
for (let value of set.values()) {console.log(value);
}// 获取所有键（与值相同）
for (let key of set.keys()) {console.log(key);
}// 获取所有键值对（键和值相同）
for (let [key, value] of set.entries()) {console.log(key, value);
}

Set 的常用应用场景

1. 数组去重

const array = [1, 2, 2, 3, 3, 4];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // [1, 2, 3, 4]

2. 并集、交集和差集操作

const setA = new Set([1, 2, 3]);
const setB = new Set([2, 3, 4]);// 并集
const union = new Set([...setA, ...setB]);// 交集
const intersection = new Set([...setA].filter(x => setB.has(x)));// 差集
const difference = new Set([...setA].filter(x => !setB.has(x)));

性能考虑

Map 的性能优势

• 频繁增删键值对场景下，Map 比 Object 性能更好
• 键值对数量很大时，Map 的增删改查性能更优

Set 的性能优势

• 检查值是否存在的性能比数组好
• 处理大量数据去重时性能优于数组方法

最佳实践建议

1. 选择使用 Map 的场景：

• 键需要是非字符串类型
• 需要频繁增删键值对
• 需要维护插入顺序
• 需要频繁获取大小

2. 选择使用 Set 的场景：

• 需要存储唯一值集合
• 需要频繁检查值是否存在
• 需要数组去重
• 需要集合运算（并集、交集、差集）

3. 注意事项：

• Map 和 Set 都不能序列化为 JSON
• WeakMap 和 WeakSet 适用于需要垃圾回收的场景
• 考虑浏览器兼容性，需要时使用 polyfill