在前端开发中，我们经常需要使用列表或数组来存储数据。然而，在某些情况下，我们需要保证数据的唯一性，例如在去重、筛选等场景中。这时候，使用 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 中键值对的数量。
以下是一些示例代码：
const map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');
map.set('key3', 'value3');
console.log(map.get('key1')); // 输出 "value1"
console.log(map.has('key2')); // 输出 true
map.delete('key3');
console.log(map.size); // 输出 2
map.clear();
console.log(map.size); // 输出 0遍历 Map
Map 的键值对可以使用 for...of 循环遍历，也可以使用 forEach 方法遍历。需要注意的是，Map 中的键值对是按照添加的顺序存储的。
const map = new Map([
['key1', 'value1'],
['key2', 'value2'],
['key3', 'value3']
]);
for (const [key, value] of map) {
console.log(key, value);
}
map.forEach((value, key) => {
console.log(key, value);
});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 中元素的数量。
以下是一些示例代码：
const set = new Set();
set.add('value1');
set.add('value2');
set.add('value3');
console.log(set.has('value1')); // 输出 true
set.delete('value2');
console.log(set.size); // 输出 2
set.clear();
console.log(set.size); // 输出 0遍历 Set
Set 的元素可以使用 for...of 循环遍历，也可以使用 forEach 方法遍历。需要注意的是，Set 中的元素是无序的。
const set = new Set(['value1', 'value2', 'value3']);
for (const value of set) {
console.log(value);
}
set.forEach(value => {
console.log(value);
});总结
使用 ES10 的 Map 和 Set 类型可以很好地解决数据去重的问题。在实际开发中，我们可以根据具体情况选择使用 Map 还是 Set，或者两者结合使用。同时，需要注意 Map 和 Set 中的键和元素可以是任何类型，这为我们处理不同类型的数据提供了很大的便利。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658d06baeb4cecbf2d2f1fbe