揭秘 ES6 Set 和 Map 数据结构：特性、运用与实现

前端

2023-09-11 06:51:48

Set 和 Map：ES6 的数据操作利器

ES6 的出现为 JavaScript 语言带来了革命性的变革，其中 Set 和 Map 两个数据结构尤为引人注目。它们凭借无与伦比的数据操作能力，极大地扩展了 JavaScript 的功能，让开发者能够更高效、更灵活地处理数据。

Set：独一无二的集合

Set 是一种无序集合，它只允许存储唯一元素，这就意味着每个元素都独一无二，不会出现重复。这种特性使得 Set 在很多场景中都非常实用，例如存储用户 ID 集合、产品 ID 集合等。

想象一下，你正在开发一个电商网站，你需要跟踪用户在网站上的购买记录。使用 Set，你可以创建一个包含所有用户 ID 的集合，这样一来，你就可以快速检查某个用户是否已经购买过某个商品，而不必遍历整个用户数据库。

Set 的强大之处在于它高效的查找、添加和删除操作，时间复杂度均为 O(1)。这意味着，无论 Set 中包含多少元素，这些操作都可以飞速完成。

Map：键值对的天堂

Map 是一种键值对集合，它允许你使用键来查找和存储值。键必须是唯一的，而值可以是任意类型。Map 的特性非常适合存储对象集合，例如用户对象集合、产品对象集合等。

假设你正在开发一个博客平台，你需要存储所有博文的标题和内容。使用 Map，你可以创建一个键为博文 ID，值为博文对象的 Map。这样一来，你就可以快速根据博文 ID 获取对应的博文内容。

Map 也具有极高的查找效率，时间复杂度同样为 O(1)。无论 Map 中包含多少键值对，你都可以闪电般地找到所需的数据。

实现机制：哈希表的秘密

ES6 Set 和 Map 的实现机制依赖于哈希表。哈希表是一种数据结构，它将键映射到值，并允许快速查找。Set 和 Map 使用数组和链表来实现哈希表。

在 Set 中，哈希表中的每个桶都是一个链表，每个链表中的节点存储着一个元素。当向 Set 中添加一个元素时，该元素会被哈希到哈希表中的某个桶中。如果该桶中已经存在一个与该元素相同的元素，则该元素将被忽略。否则，该元素将被添加到链表的末尾。

在 Map 中，哈希表中的每个桶也是一个链表，每个链表中的节点存储着一个键值对。当向 Map 中添加一个键值对时，该键值对会被哈希到哈希表中的某个桶中。如果该桶中已经存在一个与该键相同的键值对，则该键值对将被覆盖。否则，该键值对将被添加到链表的末尾。

Set 和 Map 的应用场景

Set 和 Map 在实际开发中有着广泛的应用场景，它们可以极大地简化代码并提高效率。

Set 的应用场景：

存储唯一元素的集合，例如：用户 ID 集合、产品 ID 集合
检查元素是否存在于集合中
求两个集合的交集、并集和差集

Map 的应用场景：

存储键值对集合，例如：用户对象集合、产品对象集合
根据键快速查找值
遍历键值对
检查 Map 中是否包含某个键

代码示例

下面是一个使用 Set 和 Map 的代码示例：

// 创建一个 Set，存储唯一元素
const uniqueSet = new Set([1, 2, 3, 4, 5]);

// 添加一个元素到 Set 中
uniqueSet.add(6);

// 检查 Set 中是否包含某个元素
console.log(uniqueSet.has(3)); // true

// 创建一个 Map，存储键值对
const userMap = new Map([
  ["name", "John"],
  ["age", 30],
  ["city", "New York"]
]);

// 根据键获取值
console.log(userMap.get("name")); // John

// 添加一个键值对到 Map 中
userMap.set("country", "USA");

// 检查 Map 中是否包含某个键
console.log(userMap.has("country")); // true

常见问题解答

Set 和 Array 有什么区别？
- Set 存储唯一元素，而 Array 可以存储重复元素。
- Set 没有索引，而 Array 有索引。
- Set 的查找、添加和删除操作时间复杂度为 O(1)，而 Array 的操作时间复杂度取决于数组的长度。
Map 和 Object 有什么区别？
- Map 的键必须是唯一值，而 Object 的键可以是任何类型。
- Map 的查找、添加和删除操作时间复杂度为 O(1)，而 Object 的操作时间复杂度取决于对象的属性数量。
如何将 Array 转换为 Set？
- 使用 new Set(array)
如何将 Object 转换为 Map？
- 使用 new Map(Object.entries(object))
Set 和 Map 是可迭代的吗？
- 是的，它们都是可迭代的，你可以使用 for...of 循环遍历它们。