在过去的 JavaScript 版本中，我们可能需要自己实现一些数据结构，比如数组去重或者对象查找等操作。随着 ECMAScript 2017 中新增了 Set 和 Map 数据结构，开发者们可以更加方便地处理复杂的数据结构，而不需要自己实现相关算法，从而提高开发效率和代码可读性。
Set 数据结构简介
Set 是 ECMAScript 2017 规范中新增的一种数据结构，类似于数组，但是它的每个元素都是唯一的，不会重复。Set 可以存储任意类型的值，而且它的值是无序的。这些特点使得 Set 数据结构非常适合进行数据去重操作。
Set 数据结构的基本使用
创建 Set
我们可以使用 new 关键字来创建一个空的 Set 数据结构：
----- ----- - --- ------ -- ------ ---
在创建 Set 的过程中，也可以传入一个数组或者类数组对象作为参数，来初始化 Set 对象：
----- ----- - --- ------- -- -- ---- -- ------ - ---- ------- --- -- --
在传入数组参数的情况下，Set 会自动去重。
添加元素
向 Set 中添加元素可以使用 add 方法：
------------- -- ---- - - ----- -
删除元素
可以使用 delete 方法删除指定的元素：
---------------- -- - ----- ----- -
判断元素是否存在
可以使用 has 方法来判断一个元素是否存在于 Set 中：
------------- -- -------- - -----
清空 Set
可以使用 clear 方法来清空 Set 中的所有元素：
-------------- -- ------
获取元素个数
可以使用 size 属性获取 Set 中元素的个数：
------------- ----------- -- -
遍历 Set
可以使用 for...of 循环遍历 Set 中的每个元素：
----- ----- - --- ------- -- ---- --- ------ ---- -- ------ - ------------------ - -- --- -- - -- - -- -
Set 数据结构在实际开发中的使用
去重
作为去重操作的工具，Set 数据结构可以非常方便地进行去重操作：
----- --- - --- -- -- -- -- --- ----- ----- - --- --------- ----- ------ - ----------- -------------------- -- -- --- -- -- --
上述代码中，我们首先使用 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 数据结构：
----- ----- - --- ------ -- ------ ---
在创建 Map 的过程中，也可以传入一个数组或者类数组对象作为参数，来初始化 Map 对象：
----- ----- - --- ----- -------- ---------- -------- ---------- --- -- ------ - ----- ---
添加元素
向 Map 中添加键值对可以使用 set 方法：
----------------- ----------
删除元素
可以使用 delete 方法删除指定的键值对：
---------------------
判断元素是否存在
可以使用 has 方法来判断一个键是否存在于 Map 中：
------------------ -- -------- - -----
清空 Map
可以使用 clear 方法来清空 Map 中的所有键值对：
-------------- -- -------
获取键值对数量
可以使用 size 属性获取 Map 中键值对的数量：
----------------- ---------- ----------------- ---------- ----------- -- -
获取键和值
可以使用 keys、values 和 entries 方法获取 Map 中的键、值、键值对：
----- ----- - --- ----- -------- ---------- -------- ---------- --- ------------- -- ------------ -------- ------- --------------- -- ------------ ---------- --------- ---------------- -- -------------- --------- ---------- -------- ----------
遍历 Map
可以使用 for...of 循环遍历 Map 中的每个键值对：
----- ----- - --- ----- -------- ---------- -------- ---------- --- --- ------ ----- ------ -- ------ - ---------------- ------- - -- --- -- ---- ------ -- ---- ------
Map 数据结构在实际开发中的使用
对象转换
有时候我们需要将对象转换为 Map，以便于进行查找等操作：
----- --- - - ----- --------- ----- -------- -- ----- ----- - --- ------------------------- ------------------------------- -- -- ------
上述代码中，我们将一个对象转换成了 Map，以便于快速地查询对象中指定键的值。
获取 URL 参数
在 Web 开发中，我们有时候需要从 URL 中获取参数。使用 Map 可以非常方便地获取 URL 中的参数：
----- ------------ - --- --------------------------------- -------------------------------------- -- -- --- - ---- --
上述代码中，我们使用 URLSearchParams 对象将 URL 中的参数构建成 Map，然后通过 get 方法获取指定的参数值。
总结
本文详细介绍了 ECMAScript 2017 中的 Set 和 Map 数据结构及其使用。Set 数据结构适用于数据去重等场景，Map 数据结构适用于存储键值对数据。在日常开发中，合理地运用 Set 和 Map 可以显著提高代码效率和可读性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/645f8a0c968c7c53b018c416