在过去的 JavaScript 版本中，我们可能需要自己实现一些数据结构，比如数组去重或者对象查找等操作。随着 ECMAScript 2017 中新增了 Set 和 Map 数据结构，开发者们可以更加方便地处理复杂的数据结构，而不需要自己实现相关算法，从而提高开发效率和代码可读性。
Set 数据结构简介
Set 是 ECMAScript 2017 规范中新增的一种数据结构，类似于数组，但是它的每个元素都是唯一的，不会重复。Set 可以存储任意类型的值，而且它的值是无序的。这些特点使得 Set 数据结构非常适合进行数据去重操作。
Set 数据结构的基本使用
创建 Set
我们可以使用 new 关键字来创建一个空的 Set 数据结构：
const mySet = new Set(); // 创建一个空的 Set
在创建 Set 的过程中，也可以传入一个数组或者类数组对象作为参数，来初始化 Set 对象：
const mySet = new Set([1, 2, 3, 1]); // 创建一个具有 3 个元素的 Set，元素为 [1, 2, 3]
在传入数组参数的情况下，Set 会自动去重。
添加元素
向 Set 中添加元素可以使用 add 方法：
mySet.add(4); // 添加元素 4 到 mySet 中
删除元素
可以使用 delete 方法删除指定的元素：
mySet.delete(4); // 从 mySet 中删除元素 4
判断元素是否存在
可以使用 has 方法来判断一个元素是否存在于 Set 中：
mySet.has(4); // false，因为 4 已经删除了
清空 Set
可以使用 clear 方法来清空 Set 中的所有元素：
mySet.clear(); // 清空所有元素
获取元素个数
可以使用 size 属性获取 Set 中元素的个数：
mySet.add(5); mySet.size; // 1
遍历 Set
可以使用 for...of 循环遍历 Set 中的每个元素：
const mySet = new Set([1, 2, 3]);
for (const item of mySet) {
console.log(item);
}
// 输出：
// 1
// 2
// 3Set 数据结构在实际开发中的使用
去重
作为去重操作的工具，Set 数据结构可以非常方便地进行去重操作：
const arr = [1, 2, 3, 2, 4, 1]; const mySet = new Set(arr); const newArr = [...mySet]; console.log(newArr); // 输出 [1, 2, 3, 4]
上述代码中，我们首先使用 new Set(arr) 将原始数组 arr 转换成 Set 对象，Set 会自动去重。然后使用数组解构符号将 Set 转换成数组，从而得到一个新的元素不重复的数组 newArr。
判断数组包含关系
当我们需要判断一个数组是否包含另一个数组时，可以借助 Set 数据结构实现，但是原生数组并没有提供很方便的方法：
-- -------------------- ---- -------
----- - - --- -- ---
----- - - --- ---
----- ---- - --- -------
--- --------- - -----
--- ------ ---- -- -- -
-- ----------------- -
--------- - ------
------
-
-
----------------------- -- -- ----上述代码中，我们创建了两个数组 a 和 b，需要判断 b 是否是 a 的子集。首先将 a 转换成 Set，然后遍历 b 中的每个元素，判断是否存在于 Set 中，如果都存在，则说明 b 是 a 的子集，否则不是。
Map 数据结构简介
Map 是另一种 ECMAScript 2017 规范中新增的数据结构，它可以存储键值对数据，类似于 Object 对象，但是 Map 中的键可以是任何类型的。Map 中的键值对是按照插入顺序排序的。
Map 数据结构的基本使用
创建 Map
我们可以使用 new 关键字来创建一个空的 Map 数据结构：
const myMap = new Map(); // 创建一个空的 Map
在创建 Map 的过程中，也可以传入一个数组或者类数组对象作为参数，来初始化 Map 对象：
const myMap = new Map([ ['key1', 'value1'], ['key2', 'value2'], ]); // 创建一个具有 2 个键值对的 Map
添加元素
向 Map 中添加键值对可以使用 set 方法：
myMap.set('key3', 'value3');删除元素
可以使用 delete 方法删除指定的键值对：
myMap.delete('key3');判断元素是否存在
可以使用 has 方法来判断一个键是否存在于 Map 中：
myMap.has('key3'); // false，因为 3 已经删除了清空 Map
可以使用 clear 方法来清空 Map 中的所有键值对：
myMap.clear(); // 清空所有键值对
获取键值对数量
可以使用 size 属性获取 Map 中键值对的数量：
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');
myMap.size; // 2获取键和值
可以使用 keys、values 和 entries 方法获取 Map 中的键、值、键值对：
const myMap = new Map([ ['key1', 'value1'], ['key2', 'value2'], ]); myMap.keys(); // 返回一个键的迭代器，值为 ['key1', 'key2'] myMap.values(); // 返回一个值的迭代器，值为 ['value1', 'value2'] myMap.entries(); // 返回一个键值对的迭代器，值为 [['key1', 'value1'], ['key2', 'value2']]
遍历 Map
可以使用 for...of 循环遍历 Map 中的每个键值对：
-- -------------------- ---- ------- ----- ----- - --- ----- -------- ---------- -------- ---------- --- --- ------ ----- ------ -- ------ - ---------------- ------- - -- --- -- ---- ------ -- ---- ------
Map 数据结构在实际开发中的使用
对象转换
有时候我们需要将对象转换为 Map，以便于进行查找等操作：
const obj = { key1: 'value1', key2: 'value2' };
const myMap = new Map(Object.entries(obj));
console.log(myMap.get('key2')); // 输出 value2上述代码中，我们将一个对象转换成了 Map，以便于快速地查询对象中指定键的值。
获取 URL 参数
在 Web 开发中，我们有时候需要从 URL 中获取参数。使用 Map 可以非常方便地获取 URL 中的参数：
const searchParams = new URLSearchParams(location.search);
console.log(searchParams.get('key1')); // 输出 URL 中 key1 的值上述代码中，我们使用 URLSearchParams 对象将 URL 中的参数构建成 Map，然后通过 get 方法获取指定的参数值。
总结
本文详细介绍了 ECMAScript 2017 中的 Set 和 Map 数据结构及其使用。Set 数据结构适用于数据去重等场景，Map 数据结构适用于存储键值对数据。在日常开发中，合理地运用 Set 和 Map 可以显著提高代码效率和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645f8a0c968c7c53b018c416