前言
在前端开发中，经常需要处理各种数据集合。例如，从后台接口获取到的数据，需要进行分页、去重、排序等操作。这时候，我们通常会使用数组、对象等数据结构来存储和处理这些数据。
然而，ES6 中提供了两种新的数据结构——Map 和 Set，它们可以帮助我们更方便、高效地处理数据集合。
本文将介绍 Map 和 Set 的基本用法，并提供一些常用的小技巧供大家参考。
Map 的基本用法
Map 是一种键值对集合，它可以存储任意类型的键和任意类型的值。
下面是一个简单的例子，展示如何创建一个 Map 对象，并向其中添加、获取元素：
let map = new Map();
map.set('name', '张三');
map.set('age', 18);
console.log(map.get('name')); // 输出：张三
console.log(map.get('age')); // 输出：18可以看到，Map 对象可以使用 set 方法添加元素，使用 get 方法获取元素。
除此之外，Map 对象还提供了一些其他的方法，例如 size、has、delete 等。这些方法的具体用法和含义，可以参考 MDN 文档。
在实际应用中，Map 对象最常用的场景是进行去重。例如下面的例子，展示了如何使用 Map 对象对数组中的重复元素进行去重：
let arr = [1, 2, 3, 2, 4, 4, 5]; let map = new Map(); arr.forEach(item => map.set(item, true)); let result = Array.from(map.keys()); console.log(result); // 输出：[1, 2, 3, 4, 5]
可以看到，这段代码先创建了一个 Map 对象，并使用 forEach 方法遍历数组，将数组中的元素作为键存储在 Map 中。由于 Map 中不能存储重复的键，因此最终得到的 result 数组就是去重后的结果。
Set 的基本用法
Set 是一种不重复元素的集合，它可以存储任意类型的值。和数组不同，Set 中的元素是不允许重复的。
下面是一个简单的例子，展示如何创建一个 Set 对象，并向其中添加、获取元素：
let set = new Set();
set.add('a');
set.add('b');
set.add('c');
console.log(set.has('a')); // 输出：true
console.log(set.size); // 输出：3可以看到，Set 对象可以使用 add 方法添加元素，使用 has 方法判断元素是否存在，使用 size 属性获取元素个数。
除此之外，Set 对象还提供了一些其他的方法，例如 delete、clear 等。这些方法的具体用法和含义，可以参考 MDN 文档。
在实际应用中，Set 对象最常用的场景是进行数组去重。例如下面的例子，展示了如何使用 Set 对象对数组中的重复元素进行去重：
let arr = [1, 2, 3, 2, 4, 4, 5]; let set = new Set(arr); let result = Array.from(set); console.log(result); // 输出：[1, 2, 3, 4, 5]
可以看到，这段代码首先使用 Set 构造函数将数组转化为 Set 对象，然后使用 Array.from 方法将 Set 对象转化为数组。由于 Set 中的元素不允许重复，因此最终得到的 result 数组就是去重后的结果。
小技巧
1. 数组去重
使用 Set 对象可以非常方便地进行数组去重。除了上面提到的方法外，还有一些其他的方式：
- 使用扩展运算符（...）
let arr = [...new Set([1, 2, 3, 2, 4, 4, 5])]; console.log(arr); // 输出：[1, 2, 3, 4, 5]
- 使用 Array.from 方法
let arr = Array.from(new Set([1, 2, 3, 2, 4, 4, 5])); console.log(arr); // 输出：[1, 2, 3, 4, 5]
- 使用 filter 方法
let arr = [1, 2, 3, 2, 4, 4, 5]; let result = arr.filter((item, index) => arr.indexOf(item) === index); console.log(result); // 输出：[1, 2, 3, 4, 5]
2. 数组求交集、并集、差集
既然 Set 对象中的元素不允许重复，那么我们就可以用 set1 和 set2 分别表示两个集合，然后使用 Set 对象提供的方法来求交集、并集、差集等操作。
下面是一些示例代码：
- 求交集
let set1 = new Set([1, 2, 3, 4, 5]);
let set2 = new Set([4, 5, 6, 7]);
let intersection = new Set([...set1].filter(item => set2.has(item)));
console.log(intersection); // 输出：Set {4, 5}- 求并集
let set1 = new Set([1, 2, 3, 4, 5]);
let set2 = new Set([4, 5, 6, 7]);
let union = new Set([...set1, ...set2]);
console.log(union); // 输出：Set {1, 2, 3, 4, 5, 6, 7}- 求差集
let set1 = new Set([1, 2, 3, 4, 5]);
let set2 = new Set([4, 5, 6, 7]);
let difference = new Set([...set1].filter(item => !set2.has(item)));
console.log(difference); // 输出：Set {1, 2, 3}3. 对象字面量作为 Map 的键
在 Map 对象中，可以用任意类型的值作为键。不过需要注意的是，如果使用对象字面量作为键，需要使用字符串模板进行包裹，才能正确访问和设置值。
下面是一个示例代码：
let map = new Map();
map.set(`{name: '张三'}`, 'foo');
console.log(map.get(`{name: '张三'}`)); // 输出：foo可以看到，这里使用了字符串模板将对象字面量进行了包裹，在设置和获取值时也需要使用相同的方式。
总结
本文介绍了 ES6 中的两种新数据结构——Map 和 Set，包括它们的基本用法和一些常用的小技巧。在实际开发中，这些技巧可以帮助我们更方便、高效地处理各种数据集合。
需要注意的是，虽然 Map 和 Set 对象提供了许多方便的方法，但它们也并不是万能的，有时候还需要根据具体情况选择其他的数据结构来处理数据。对于一些比较复杂的场景，我们也可以使用第三方库来提升开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6488377248841e98946b9ddf