ES6 中的 Map 与 Set 的使用及其差异-JavaScript中文网-JavaScript教程资源分享门户

ES6 中的 Map 与 Set 的使用及其差异

随着前端技术的不断更新和发展，ES6 带来了很多新的特性和 API，其中的 Map 和 Set 数据结构也是其中之一。Map 和 Set 均为 ES6 中新增的集合类型，这两种类型的操作和优化方法主要基于哈希表来实现，可以提供非常高效的查找和添加操作。但是它们之间还有一些差异，本文将详细介绍这些差异。

Map 和 Set 是什么？

Map 是一种键值对集合，其中每个键对应一个唯一的值，可以使用任何 JavaScript 数据类型作为它的键和值。Set 是一种值的集合，其中每个值都是唯一的，也可以使用任何 JavaScript 数据类型作为它的值。因此，两者的最大区别在于它们的数据结构：Map 为键值对结构，而 Set 只是一个值的集合。

Map 的使用

Map 用于保存键值对，并可以根据键获取值，同一个键可以映射到不同的值。Map 和 Object 最大的区别是 Map 可以使用任何类型（包括对象）作为键，而 Object 只能使用字符串或 Symbol 类型作为键。

Map 的创建方法非常简单，使用 new Map() 即可创建一个空的 Map。下面是创建一个 Map 并添加键值对的示例代码：

const newMap = new Map();
newMap.set('age', 20);
newMap.set('name', 'Tom');
newMap.set('gender', 'male');

上面的代码创建了一个名为 newMap 的 Map 对象，并向其中添加了三个键值对。可以使用 get() 方法获取 Map 中的值，如下所示：

console.log(newMap.get('age'));  // 20
console.log(newMap.get('name'));  // Tom

Set 的使用

Set 用于保存一组唯一的值，如果添加重复的值，则只会保留一个。Set 类型有两种创建方式，一种是通过 new Set() 创建空的 Set，另一种是通过数组创建一个 Set，如下所示：

const emptySet = new Set();  // 创建一个空的 Set 对象

const demoSet = new Set([1, "2", { "name": "Tom" }]);  // 通过数组创建一个 Set 对象

Set 提供了 add() 方法向 Set 对象添加值。在添加值时，Set 会自动去重，例如，下面的代码只会将数字 1 添加到 Set 中一次：

const numSet = new Set();
numSet.add(1);
numSet.add(1);

Set 也提供了不同方法来获取 Set 中的值，例如，使用 forEach 函数遍历 Set 中的所有值：

demoSet.forEach(function (value, key) {
    console.log(value);
});

Map 与 Set 的差异

尽管 Map 和 Set 都可以存储数据集合，但它们之间还是有一些差异的。下面是它们之间的主要差异：

数据结构不同：Map 是键值对结构，而 Set 只是一个值的集合。
添加数据时的差异：Map 使用 set() 添加数据，而 Set 使用 add() 添加数据。
访问数据时的差异：Map 使用 get() 方法获取数据，而 Set 可以使用 forEach() 遍历所有值。
对象作为键：Map 可以使用任何 JavaScript 数据类型（包括对象）作为键，而 Set 只能使用基本数据类型作为值。

总结

尽管 Map 和 Set 有一些相似之处，但它们之间还是有很大的差异。下面是一些关键点：

使用 Map 存储键值对，并可以根据键获取值。
使用 Set 存储唯一的值，如果添加重复的值，则只会保留一个。
Map 可以使用任何 JavaScript 数据类型作为键，而 Set 只能使用基本数据类型作为值。
Map 提供了多种操作方式来获取和操作数据，而 Set 通常只需要迭代其中的值。

在日常编码中，选择使用 Map 还是 Set 取决于你需要的数据结构和你的用例。尽管它们之间有许多差异，但它们都是 ES6 提供的非常有用的数据结构，在许多情况下，它们可以帮助我们更轻松地解决问题。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64690e70968c7c53b0921483