JavaScript Map 与 Set

学习 ES6 的 Map 和 Set 数据结构 · 难度：进阶 · +15XP

JavaScript Map 与 Set — 现代集合类型详解

学习前的准备

在开始学习之前，你需要一台安装了最新版本浏览器的电脑（推荐 Chrome 或 Firefox），以及一个代码编辑器（如 VS Code）。打开浏览器的开发者工具（按 F12），切换到 Console（控制台）标签页，即可跟随本教程一起练习。本教程假设你已经掌握了 JavaScript 的基本语法，包括变量声明、数组和对象的基本使用。

什么是 Map？为什么需要它？

Map 是 ES6（ECMAScript 2015）引入的一种新的键值对集合类型。在学习 Map 之前，我们通常使用普通对象（Object）来存储键值对。但 Object 有一个限制——它的键只能是字符串或 Symbol 类型。Map 则不同：Map 的键可以是任意类型的值，包括数字、布尔值、对象、函数，甚至另一个 Map。此外，Map 还保留了键值对的插入顺序，并且可以直接迭代。

// 创建你第一个 Map
const myMap = new Map();
console.log(myMap);  // Map(0) {}
// 使用 set() 方法添加键值对
myMap.set('name', '张三');
myMap.set('age', 25);
myMap.set(true, '这是一个布尔键');
// 查看 Map 中有多少个元素
console.log(myMap.size);  // 3

Map 的常用增删改查 API

Map 提供了一套完整的方法来操作数据。最常用的是：set() 用于添加或更新键值对，get() 用于获取值，has() 用于检查键是否存在，delete() 用于删除指定键，clear() 用于清空所有元素。size 属性用于获取元素个数。

const user = new Map();
user.set('id', 1001).set('email', 'zhangsan@example.com').set('city', '北京');
console.log(user.get('id'));       // 1001
console.log(user.get('phone'));    // undefined（键不存在时返回 undefined）
console.log(user.has('email'));    // true
console.log(user.has('phone'));    // false
user.delete('email');
console.log(user.size);            // 2
user.clear();
console.log(user.size);            // 0

遍历 Map 的三种方式

Map 提供了三种遍历方法：keys() 返回键的迭代器，values() 返回值的迭代器，entries() 返回 [键, 值] 对的迭代器。Map 默认就是 entries() 的迭代器，所以你可以直接用 for...of 遍历。

const scores = new Map([
  ['语文', 90],
  ['数学', 85],
  ['英语', 92]
]);
for (let [subject, score] of scores) {
  console.log(subject + ': ' + score + '分');
}
scores.forEach((value, key) => {
  console.log(key + ' => ' + value);
});

Map 与 Object 的对比

特性	Map	Object
键的类型	任意类型（对象、函数、数字等）	仅字符串和 Symbol
获取大小	map.size（O(1)复杂度）	Object.keys(obj).length（O(n)复杂度）
迭代	直接可迭代，有 forEach	需要 Object.keys()/values()/entries()
性能	频繁增删场景更优	适合少量或静态属性
默认键	没有默认键	有原型链上的默认属性

认识 Set — 唯一值的集合

Set 是 ES6 引入的另一个重要集合类型。它类似于数组，但有一个核心区别——Set 中的所有值必须是唯一的，不允许重复。当你尝试添加一个已经存在的值时，Set 会自动忽略它。Set 也保留了元素的插入顺序。

const mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(3);
mySet.add(1);  // 这个 1 已存在，不会被添加
console.log(mySet.size);  // 3（不是 4！）

Set 的实际应用

Set 最常见的用途是数组去重。一行代码就能完成以前需要写循环才能实现的功能。

const arr = [1, 2, 2, 3, 3, 3, 4, 5, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr);  // [1, 2, 3, 4, 5]
const tags = new Set(['js', 'css', 'html']);
console.log(tags.has('css'));   // true
tags.delete('css');

小结

这节课我们学习了 JavaScript 中两个强大的集合类型。Map 解决了 Object 键类型受限的问题，适合存储关联数据。Set 确保了集合中的元素唯一性，是数组去重的利器。掌握它们后，你可以在合适的场景选择合适的数据结构，写出更优雅的代码。建议你现在就打开浏览器控制台，动手试一试！

JavaScript Map 与 Set