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