ES6 中新增了 Map 和 Set 两种数据结构，相对于传统的对象和数组，它们的应用也有了一些新的特点和优势。本文将介绍 Map 和 Set 的使用方法，以及它们在前端开发中的常见应用场景。
Map 数据结构
Map 是一种键值对的数据结构，它可以将任意类型的值（包括对象）作为键。相比于传统的对象，Map 在以下方面具有优势：
- 键可以是任何类型
- Map 中的键值对是按插入顺序排列的，可以迭代
- Map 的大小可以计算，可以直接获取
Map 的基本使用
Map 的基本用法即定义和操作，下面是一个简单的示例：
-- -------------------- ---- ------- ----- --- - --- ------ ----- ------ - --- ----- ------- - -------- -- --- ----- ------ - -- -------- --------------- ----------- --------------- ---------- ---------------- ---------- ----------------------------- -- ------- ----------------------------- -- ------ ------------------------------ -- ------
在这个例子中，我们定义了一个 Map，然后分别设置了不同类型的值作为键。通过 set 方法可以向 Map 中添加键值对，通过 get 方法可以获取键对应的值。
Map 的常见应用场景
在实际使用中，Map 的应用可谓非常广泛。下面列举了一些常见的应用场景：
缓存
如果需要将某个函数的结果进行缓存，以便在下次调用时直接获取结果，可以使用 Map 结构：
-- -------------------- ---- -------
--- ----- - --- ------
-------- ------------ -
-- ---------------- -
--------------------
------ ---------------
- ---- -
--------------------
--- ------ - --- - ---
-------------- --------
------ -------
-
-
------------------------ -- ---- --
------------------------ -- ---- --
------------------------ -- ---- --循环操作
比如在处理数据的时候，可以使用 Map 来保存某个条件下的数据，然后对这个数据进行循环操作：
-- -------------------- ---- -------
----- ---- - -- --- -- ----- --- -- - --- -- ----- --- -- - --- -- ----- --- ---
----- --------- - --- ------
----------------- -- -
----- ---- - -----
-- -------------------- -
----------------- --------
- ---- -
-----------------------------
-
---
------------------------- ---- -- -
----------------------------- -------
---在这个例子中，我们将数据按照某个条件进行分类，并将分类结果存入 Map 中。然后就可以对得到的数据进行循环操作（这里只是输出了一下）。
数据去重
在处理数组数据时，使用 Set 数据结构可以很方便地进行数据去重操作：
const arr = [1, 2, 2, 3, 4, 4, 5]; const set = new Set(arr); console.log([...set]); // [1, 2, 3, 4, 5]
在上面的例子中，我们将数组中的数据存入 Set 中，Set 会自动进行去重操作。将 Set 转换成数组就可以得到去重后的结果。
Set 数据结构
Set 是一种类似于数组的数据结构，它不同于数组的是，Set 内部的数据是不允许重复的。因此，Set 适用于去重、排序等操作。
Set 的基本使用
Set 的基本使用也很简单，与 Map 类似，主要包括定义和对集合进行操作。
const set = new Set();
set.add('a').add('b').add('c').add('a');
set.delete('b');
console.log(set.has('a')); // true
console.log(set.size); // 2在这个例子中，我们创建了一个 Set 并向其中添加了一些数据，然后删除了一个数据，并查看了 Set 中元素的数量。
Set 的常见应用场景
Set 的常见应用场景主要是去重和排序两个方面。
数据去重
在处理数组数据时，使用 Set 数据结构可以很方便地进行数据去重操作：
const arr = [1, 2, 2, 3, 4, 4, 5]; const set = new Set(arr); console.log([...set]); // [1, 2, 3, 4, 5]
在上面的例子中，我们将数组中的数据存入 Set 中，Set 会自动进行去重操作。将 Set 转换成数组就可以得到去重后的结果。
排序
在对数据进行排序时，也可以使用 Set 结构：
const arr = [3, 2, 1, 5, 4]; const set = new Set(arr); const sortedArr = [...set].sort((a, b) => a - b); console.log(sortedArr); // [1, 2, 3, 4, 5]
在上面的例子中，我们先将数据存入 Set 中，然后将 Set 转换成数组并进行排序。
总结
Map 和 Set 是 ES6 中新增的两种数据结构，在实际应用中具有较广泛的应用场景。Map 和 Set 的优越性在于它们更加灵活、强大，可以满足复杂的业务需求。在开发中可以根据实际需求灵活选择使用或组合使用，以提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649bfd2348841e98948c1c54