探索 ES6 中 Set 和 Map 的强大功能

2023-10-22 19:56:06

Set 和 Map：JavaScript 中集合和映射的革命

引言：

在 JavaScript 的世界中，数据结构一直扮演着至关重要的角色。ES6 的出现带来了 Set 和 Map 两种数据结构，彻底改变了我们管理数据集合和映射的方式。本文将深入探讨 Set 和 Map 的功能、区别以及如何在现实项目中应用它们。

Set：独一无二的集合

定义：

Set 是一种数据结构，它存储一组唯一的值。这意味着集合中不能包含重复项。Set 的一个关键特性是它保持插入顺序，这意味着按插入顺序可以访问元素。

使用场景：

确保数据集中没有重复项： 例如，收集一组不重复的 ID 或名称。
过滤数组，删除重复值： Set 可以轻松地从数组中删除重复项，提供一个唯一的元素集合。
检查一个值是否在集合中： Set 提供了一个快速且高效的方式来检查一个值是否在集合中，即使该值不是原始类型。

Map：键值对的集合

定义：

Map 是一种数据结构，它存储键值对。与 Set 类似，Map 也保持插入顺序。然而，Map 的键可以是任何类型，包括对象。

使用场景：

存储对象和相关信息的映射： 例如，用户 ID 和个人资料数据之间的映射。
作为配置对象： Map 可以作为配置对象，存储设置或偏好项。
根据键查找复杂对象： Map 允许我们根据键高效地检索对象，即使键不是字符串或数字。

Set 和 Map 之间的区别

特征	Set	Map
值类型	唯一值	键值对
键类型	无	任意类型
插入顺序	保持	保持
值的重复性	不允许	不允许
用途	唯一元素集合	键值对映射

实践应用

应用 1：消除数组重复项

示例：

const numbers = [1, 2, 3, 4, 5, 1, 2, 3];

const uniqueNumbers = new Set(numbers);
const result = Array.from(uniqueNumbers);

console.log(result); // [1, 2, 3, 4, 5]

解释：

Set 去除了重复项，返回了一个只包含唯一元素的新数组。

应用 2：根据键从对象中检索数据

示例：

const users = {
  alice: { id: 1, name: 'Alice' },
  bob: { id: 2, name: 'Bob' },
  charlie: { id: 3, name: 'Charlie' },
};

const usersMap = new Map();
usersMap.set('alice', users.alice);
usersMap.set('bob', users.bob);
usersMap.set('charlie', users.charlie);

const alice = usersMap.get('alice');

console.log(alice); // { id: 1, name: 'Alice' }