在 ES7 中，新增了两个重要的数据结构：Map 和 Set。它们在前端开发中的应用非常广泛。本文将详细介绍 Map 和 Set 的用法和特性。
1. Map 数据结构
Map 是一种键值对的集合。其中的键和值都可以是任意类型的值（包括对象、基础类型、函数）。Map 与对象最大的区别在于，Map 中的键可以是任意类型的，而对象的键只能是字符串或 Symbol。
1.1 创建 Map
Map 可以使用 Map 构造函数来创建：
const map = new Map()
Map 构造函数也可以接受一个数组作为参数，该数组的元素也必须是键值对的形式：
const map = new Map([ ['name', 'Tom'], ['age', 18] ])
1.2 Map 的方法
Map 提供了一系列的方法用于添加、删除、修改和查询元素：
- set(key, value)：向 Map 中添加一个键值对。
- get(key)：获取 Map 中指定键的值。
- has(key)：判断 Map 中是否有指定的键。
- delete(key)：删除 Map 中指定的键值对。
- clear()：清空 Map 中的所有键值对。
- keys()：返回 Map 中所有的键。
- values()：返回 Map 中所有的值。
- entries()：返回 Map 中所有键值对的数组。
示例代码：
-- -------------------- ---- ------- ----- --- - --- ----- -------- ------- ------- --- -- -- --- ----------------- ------- -- --- ---------------------------- -- --- -- --- ------------------------------ -- ---- -- ------ ----------------- -- ----- ----------- -- ---- ----------------------- -- -------------------- --------- -- ------ ------------------------- -- ------------------- ------- -- ------- -------------------------- -- ------------------- -- ------ -------- -- -------
1.3 Map 的遍历
Map 的遍历方式与数组类似，可以使用 for...of 进行遍历。而且，Map 遍历时会按照键值对的添加顺序进行遍历。
-- -------------------- ---- ------- ----- --- - --- ----- -------- ------- ------- ---- ---------- ------- -- --- ------ ----- ------ -- ---- - -------------------- ---------- - -- ----- --- -- ---- -- -- ------- ----
还可以使用 forEach 方法进行遍历：
-- -------------------- ---- ------- ----- --- - --- ----- -------- ------- ------- ---- ---------- ------- -- ------------------- ---- -- - -------------------- ---------- -- -- ----- --- -- ---- -- -- ------- ----
2. Set 数据结构
Set 是一种无序、不重复的元素集合。和数组不同，Set 中的元素是唯一的，不存在重复的元素。在实践中，Set 常用于数组去重。
2.1 创建 Set
Set 可以使用 Set 构造函数来创建：
const set = new Set()
Set 构造函数也可以接受一个数组作为参数，该数组的元素为 Set 对象中的元素：
const set = new Set([1, 2, 3, 4, 5])
2.2 Set 的方法
Set 提供了一系列的方法用于添加、删除和查询元素：
- add(value)：向 Set 中添加一个元素。
- has(value)：判断 Set 中是否包含指定元素。
- delete(value)：从 Set 中删除指定元素。
- clear()：删除 Set 中所有的元素。
- keys()：返回 Set 中所有的元素。
示例代码：
-- -------------------- ---- ------- ----- --- - --- ------- -- -- -- --- -- --- ---------- -- --- ----------------------- -- ---- -- ------ ------------- -- ----- ----------- -- ---- ----------------------- -- --------------- -- -- -- --
2.3 Set 的遍历
Set 的遍历方式与数组类似，可以使用 for...of 进行遍历。而且，Set 遍历时会按照添加顺序进行遍历。
-- -------------------- ---- ------- ----- --- - --- ------- -- -- -- --- --- ------ ----- -- ---- - ------------------ - -- - -- - -- - -- - -- -
还可以使用 forEach 方法进行遍历：
-- -------------------- ---- ------- ----- --- - --- ------- -- -- -- --- ----------------- -- - ------------------ -- -- - -- - -- - -- - -- -
3. 总结
Map 和 Set 是两种非常实用的数据结构。Map 可以用于存储键值对，而 Set 可以用于存储不重复的元素。它们的用法非常灵活，可以帮助我们更好地完成前端开发任务。在实践中，我们应该结合具体的业务场景选用合适的数据结构。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6539fd2c7d4982a6eb3b03a9