在前端开发中，我们经常会遇到根据某些属性对数据进行去重的问题。传统的做法是通过循环遍历，使用数组或对象等数据结构来去重。但是随着 ECMAScript 6（以下简称 ES6）的出现，我们可以使用 Set 结构来实现更简洁、高效的去重操作。
Set 结构简介
Set 是 ES6 中新增的一种数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值。它的主要特点包括：
- Set 内部成员是无序的，对于添加的元素顺序是没有特定要求的；
- Set 内部成员不能重复，如果添加多个相同的元素，Set 只会保留其中一个；
- Set 可以接收一个数组或类数组对象作为参数，从而快速初始化一个 Set 实例。
Set 支持以下方法：
- add(value)：添加一个值，返回 Set 结构本身；
- delete(value)：删除一个值，返回一个布尔值，表示是否删除成功；
- has(value)：查询是否存在某个值，返回一个布尔值；
- clear()：清空 Set 内部所有成员，没有返回值。
根据属性去重的实现
假设现在我们有一个数据结构，里面包含多个对象，每个对象都有一个 id 属性，现在我们需要根据每个对象的 id 属性来进行去重操作。
使用 Set 去重
我们可以使用 Set 结构来实现根据 id 属性去重的操作，具体代码如下：
-- -------------------- ---- -------
----- ---- - -
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
--
----- --- - --- ------
----- ------- - ---
----------------- -- -
-- ------------------- -
-----------------
-------------------
-
---
---------------------
-- ----- -- ----- ---------- -- ----- ---------- -- ----- ---------- -- ----- ------首先，我们使用 Set() 构造函数创建一个空 Set 实例。然后使用 forEach() 方法遍历原始数据结构，如果当前元素的 id 属性在 Set 中不存在，则将其添加到 Set 中，并将当前元素推入新数组 newData 实现去重操作。最后，使用 console.log() 输出去重后的数据。
使用 Map 去重
除了使用 Set，我们还可以使用 Map 数据结构来实现同样的去重操作。具体代码如下：
-- -------------------- ---- -------
----- ---- - -
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
- --- -- ----- ---- --
--
----- --- - --- ------
----- ------- - ---
----------------- -- -
-- ------------------- -
---------------- ------
-------------------
-
---
---------------------
-- ----- -- ----- ---------- -- ----- ---------- -- ----- ---------- -- ----- ------和 Set 基本类似，不同的是我们使用了 Map 数据结构而非 Set，将当前元素的 id 作为键，值为 true。如果该键已被添加到 Map 中，则跳过当前元素；否则将该键添加到 Map 并将当前元素推入新数组 newData 实现去重操作。
总结
Set 是一种高效简洁的数据结构，可以非常方便地完成去重操作。在实现根据属性去重的问题时，不仅可以使用 Set，还可以使用 Map 实现同样的去重效果。在实际工作中，我们应该根据具体情况选择合适的数据结构来实现我们的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6518c4da95b1f8cacd10ea85