在前端开发中，我们经常需要对数据进行处理，比如筛选、过滤、排序等等。为了更高效地处理数据，我们可以使用 ECMAScript 2018 中新增的 Map 和 Set 数据结构。
什么是 Map 和 Set
Map 和 Set 都是 ES2015 中新增的数据结构，它们都是用来存储数据的集合，但是它们之间有一些差别。
Map 是一种键值对的集合，每个键对应一个值。和 Object 类似，但是 Map 可以使用任何类型作为键，并且在访问数据时不会转换成字符串。同时，Map 的键值对是有序的，可以使用 forEach 方法按照顺序遍历 Map 中的所有键值对。
Set 是一种无序的值的集合，在 Set 中每个值只出现一次。
Map 和 Set 的使用
Map 和 Set 的基本用法都非常简单。下面分别介绍它们的使用方法。
Map 的使用
下面是一个创建 Map 并添加元素的示例：
const map = new Map();
map.set('name', 'Tom');
map.set('age', 18);
map.set(1, 'One');上面的代码创建了一个 Map，然后使用 set 方法添加三个键值对。注意，Map 的键可以是任意类型，而值也可以是任意类型。
接下来，我们可以使用 get 方法获取 Map 中的值：
map.get('name'); // "Tom"
map.get('age'); // 18
map.get(1); // "One"除了使用 set 和 get 方法对 Map 进行操作之外，我们还可以使用 delete、has、clear 等方法对 Map 进行操作：
map.delete('name'); // 将 name 属性从 Map 中删除
map.has('name'); // false
map.has('age'); // true
map.clear(); // 清空 Map 中所有元素Set 的使用
下面是一个创建 Set 并添加元素的示例：
const set = new Set();
set.add(1);
set.add('hello');
set.add({'name':'Tom', 'age': 18});
set.add(1); // Set 中元素不能重复，所以此处添加失败上面的代码创建了一个 Set，然后添加了四个元素。Set 中元素不能重复，所以添加两个值为 1 的元素时，第二次添加会失败。
我们可以使用 has 和 delete 方法对 Set 进行操作：
set.has(1); // true
set.has('world'); // false
set.delete('hello'); // 删除 Set 中的元素 'hello'Map 和 Set 的高效处理
Map 和 Set 可以帮助我们快速地进行数据处理，下面是一些示例。
利用 Map 进行数据去重
const arr = [1, 2, 3, 2, 1]; const set = new Set(arr); const uniqueArr = [...set]; console.log(uniqueArr); // [1, 2, 3]
上面的代码通过 Set 去除了数组 arr 中的重复元素，然后将 Set 转为数组输出。
我们也可以利用 Map 去除数组中的重复元素：
const arr = [1, 2, 3, 2, 1]; const map = new Map(); arr.forEach(item => map.set(item, item)); const uniqueArr = [...map.values()]; console.log(uniqueArr); // [1, 2, 3]
利用 Set 进行数据筛选
const arr = [1, 2, 3, 4, 5]; const set = new Set(arr); const filteredSet = new Set([...set].filter(item => item % 2 === 0)); const filteredArr = [...filteredSet]; console.log(filteredArr); // [2, 4]
上面的代码通过 Set 和 filter 方法筛选出了数组中的偶数。
利用 Map 进行数据分组
-- -------------------- ---- -------
----- --- - -
-------- ------ -------- ----
-------- -------- -------- ----
-------- ------ -------- ----
-------- ------- -------- ----
-------- ------- -------- ----
--
----- --- - --- ------
---------------- -- -
-- --------------------- -
------------------------------------
- ---- -
------------------- -------------
-
---
----------------- -- --- --- -- -------- ------- ------- -- -- -------- --------- -------- -- -- -------- ---------上面的代码对数组 arr 中的元素按照 score 进行分组，分组结果保存在 Map 中。
总结
Map 和 Set 是 ES2015 中新增的数据结构，它们可以帮助我们更高效地进行数据处理。本文详细介绍了 Map 和 Set 的基本使用方法，并提供了一些示例，希望能够对读者学习和使用 Map 和 Set 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e60317f6b2d6eab317686b