JavaScript 原理
Map 和 Set 的使用方式
通过分步骤讲解，让前端小白轻松理解并掌握 ES6 新增的 Map 和 Set 数据结构及其常用操作。
🎯 引言
学完这篇文章，你能理解 Map 和 Set 各自的特点，掌握它们的基础用法和典型场景，避免使用传统对象和数组时遇到的限制，让你的代码更简洁高效。
🔍 Map —— 灵活的键值对容器
1. 创建 Map
创建一个 Map 非常简单，直接调用构造函数即可。
const map = new Map();
console.log(map.size); // 0，初始化时空的
还可以用一个二维数组初始化 Map，数组内每个元素是一个键值对。
const map2 = new Map([
['name', '小明'],
['age', 18],
]);
console.log(map2.size); // 2
console.log(map2.get('name')); // 小明
2. 添加和获取元素
用 set(key, value) 给 Map 添加元素。
const map = new Map();
map.set('color', 'red');
map.set(10, '数字键');
console.log(map.get('color')); // red
console.log(map.get(10)); // 数字键
Map 的键可以是任意类型，不像对象只能用字符串或 Symbol。
3. 判断和删除元素
判断 Map 是否含有某个键，用 has(key)。
console.log(map.has('color')); // true
console.log(map.has('size')); // false
删除元素用 delete(key)。
map.delete('color');
console.log(map.has('color')); // false
4. 遍历 Map
Map 支持多种遍历方式，for...of 是最常用的。
const map = new Map([
['a', 1],
['b', 2],
]);
for (const [key, value] of map) {
console.log(key, value);
}
你也可以只遍历键或值：
for (const key of map.keys()) {
console.log(key);
}
for (const value of map.values()) {
console.log(value);
}
✨ Set —— 唯一值的集合
1. 创建 Set
Set 也是用构造函数创建。
const set = new Set();
console.log(set.size); // 0
使用数组初始化：
const set2 = new Set([1, 2, 3, 2]);
console.log(set2.size); // 3，自动去重
2. 添加元素
用 add(value) 添加。
const set = new Set();
set.add(1);
set.add(2);
set.add(2); // 重复添加无效
console.log(set.size); // 2
3. 判断和删除元素
用 has(value) 判断是否存在：
console.log(set.has(1)); // true
console.log(set.has(3)); // false
删除元素用 delete(value)：
set.delete(2);
console.log(set.has(2)); // false
4. 遍历 Set
Set 支持 for...of 遍历：
for (const val of set) {
console.log(val);
}
🧩 Map 和 Set 的应用场景
Map 实例：统计字符串出现次数
const words = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const map = new Map();
for (const word of words) {
if (map.has(word)) {
map.set(word, map.get(word) + 1);
} else {
map.set(word, 1);
}
}
for (const [word, count] of map) {
console.log(`${word}: ${count}`);
}
Set 实例：数组去重
const arr = [1, 2, 3, 2, 4, 1, 5];
const set = new Set(arr);
const uniqueArr = [...set];
console.log(uniqueArr); // [1, 2, 3, 4, 5]
🧾 小结
- Map 是灵活的键值对集合，键支持任意类型，适合存储复杂关联数据。
- Set 是唯一值集合，适合快速去重和判断唯一性。
- 了解它们的基本用法，有助于写出更高效简洁的代码。
❓ 知识问答
Q：Map 的键只能是字符串吗？
A：不，Map 的键可以是任意类型，包括对象和函数。
Q：Set 怎么判断值是否唯一？
A：用的是 Same-value-zero 算法，NaN 被认为等于自身。
Q：Map 和对象的性能差异在哪里？
A：Map 在频繁增删和大量数据时性能更好，且方便遍历和获取大小。
🧪 小练习
- 编写函数，传入字符串数组，返回统计每个字符串出现次数的 Map。
function countOccurrences(arr) {
// 在这里编写你的代码
}
- 写函数，传入任意数组，返回去重后的新数组（用 Set 实现）。
function removeDuplicates(arr) {
// 在这里编写你的代码
}
🎉 你已经掌握了 Map 和 Set 的逐步使用方法，接下来多练习提升技能吧！