在前端开发中，我们经常需要使用列表或数组来存储数据。然而，在某些情况下，我们需要保证数据的唯一性，例如在去重、筛选等场景中。这时候，使用 ES10 的 Map 和 Set 类型可以很好地解决这个问题。
Map 类型
Map 类型是一种键值对的集合，其中键和值可以是任意类型。与对象不同的是，Map 中的键可以是任何类型，包括基本类型、对象、函数等。这使得 Map 可以用来存储不同类型的数据，并且不会出现键名冲突的问题。
创建 Map
我们可以使用构造函数来创建一个空的 Map：
const map = new Map();
也可以使用数组来创建一个初始值的 Map，数组中的每个元素是一个键值对：
const map = new Map([ ['key1', 'value1'], ['key2', 'value2'], ['key3', 'value3'] ]);
操作 Map
Map 中提供了一些常用的操作方法：
set(key, value)：向 Map 中添加一个键值对。get(key)：获取指定键的值。has(key)：判断指定键是否存在。delete(key)：删除指定键及其对应的值。clear()：清空 Map 中的所有键值对。size：获取 Map 中键值对的数量。
以下是一些示例代码：
-- -------------------- ---- ------- ----- --- - --- ------ --------------- ---------- --------------- ---------- --------------- ---------- ----------------------------- -- -- -------- ----------------------------- -- -- ---- ------------------- ---------------------- -- -- - ------------ ---------------------- -- -- -
遍历 Map
Map 的键值对可以使用 for...of 循环遍历，也可以使用 forEach 方法遍历。需要注意的是，Map 中的键值对是按照添加的顺序存储的。
-- -------------------- ---- ------- ----- --- - --- ----- -------- ---------- -------- ---------- -------- --------- --- --- ------ ----- ------ -- ---- - ---------------- ------- - ------------------- ---- -- - ---------------- ------- ---
Set 类型
Set 类型是一种无序且不重复的集合，其中每个元素只能出现一次。与数组不同的是，Set 中的元素可以是任何类型，包括基本类型、对象、函数等。
创建 Set
我们可以使用构造函数来创建一个空的 Set：
const set = new Set();
也可以使用数组来创建一个初始值的 Set：
const set = new Set(['value1', 'value2', 'value3']);
操作 Set
Set 中提供了一些常用的操作方法：
add(value)：向 Set 中添加一个元素。has(value)：判断指定元素是否存在。delete(value)：删除指定元素。clear()：清空 Set 中的所有元素。size：获取 Set 中元素的数量。
以下是一些示例代码：
-- -------------------- ---- ------- ----- --- - --- ------ ------------------ ------------------ ------------------ ------------------------------- -- -- ---- --------------------- ---------------------- -- -- - ------------ ---------------------- -- -- -
遍历 Set
Set 的元素可以使用 for...of 循环遍历，也可以使用 forEach 方法遍历。需要注意的是，Set 中的元素是无序的。
-- -------------------- ---- ------- ----- --- - --- -------------- --------- ----------- --- ------ ----- -- ---- - ------------------- - ----------------- -- - ------------------- ---
总结
使用 ES10 的 Map 和 Set 类型可以很好地解决数据去重的问题。在实际开发中，我们可以根据具体情况选择使用 Map 还是 Set，或者两者结合使用。同时，需要注意 Map 和 Set 中的键和元素可以是任何类型，这为我们处理不同类型的数据提供了很大的便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658d06baeb4cecbf2d2f1fbe