ECMAScript 2021 中的 Map/Set 去重技巧-JavaScript中文网-JavaScript教程资源分享门户

ECMAScript 2021 中的 Map/Set 去重技巧

ECMAScript 2021 (ES12) 是 JavaScript 语言规范中的最新版本，它为开发者提供了许多新的功能和 API，其中包括 Map 和 Set 数据结构。Map 和 Set 可以非常方便地用来去重，而且非常高效。

在本文中，我们将深入探讨如何使用 Map 和 Set 进行去重，以及它们的原理和应用。

Map 数据结构

Map 是一种类似于对象的键值对结构，但是它的键可以是任何类型的值，包括函数、对象和其他基本类型。Map 可以很容易地进行去重操作。

下面是一个使用 Map 进行去重的例子：

const arr = [1, 2, 3, 1, 2, 3, 4, 5, 4, 5];
const uniqueArr = [...new Map(arr.map(item => [item, item])).values()];
console.log(uniqueArr); // [1, 2, 3, 4, 5]

上面的代码中，我们首先使用 Array.prototype.map() 将数组转换成一个由 [值, 值] 键值对组成的数组。然后，我们将该数组传递给 Map 构造函数来创建一个新的 Map 实例。

由于 Map 实例的键是唯一的，所以重复的值只会被添加一次。最后，我们使用展开运算符和 Map.prototype.values() 方法将 Map 实例转换回数组。

Set 数据结构

Set 是一种不允许重复值的数据结构。与数组和对象不同，Set 中的值不是通过索引或键来访问的，而是通过 API 操作来添加、删除和查询值。

下面是一个使用 Set 进行去重的例子：

const arr = [1, 2, 3, 1, 2, 3, 4, 5, 4, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]

上面的代码中，我们首先创建一个 Set 实例，然后使用 Set.prototype.add() 方法将数组中的值添加到该实例中。由于 Set 实例只允许唯一的值，所以重复的值只会被添加一次。最后，我们使用展开运算符将 Set 实例转换回数组。

Map 和 Set 的应用

Map 和 Set 不仅可以用于数据去重，还可以用于其他许多应用。以下是一些常见的用例：

统计值的出现次数

如果你需要统计数组中每个值的出现次数，可以使用 Map 来实现：

const arr = [1, 2, 3, 1, 2, 3, 4, 5, 4, 5];
const frequencyMap = new Map();
arr.forEach(value => {
  frequencyMap.set(value, (frequencyMap.get(value) || 0) + 1);
});
console.log(frequencyMap); // Map {1 => 2, 2 => 2, 3 => 2, 4 => 2, 5 => 2}

判断两个数组是否包含相同的值

如果你需要判断两个数组是否包含相同的值，可以使用 Set 来实现：

const arr1 = [1, 2, 3];
const arr2 = [2, 3, 4];
const set1 = new Set(arr1);
const set2 = new Set(arr2);
const hasCommonValues = [...set1].some(value => set2.has(value));
console.log(hasCommonValues); // true

上面的代码中，我们首先使用 Set 构造函数将数组转换为 Set 实例。然后，我们使用 Array.prototype.some() 方法来遍历 Set，检查它是否包含另一个 Set 中的值。

缓存函数结果

如果你需要缓存函数的结果，以便避免重复计算，可以使用 Map 来实现：

-- -------------------- ---- -------
-------- ------------ -
  -- -- - -- -
    ------ --
  -
  ------ ----------- - -- - ----------- - ---
-

----- ----- - --- ------
-------- -------------------- -
  -- -------------- -
    ------ -------------
  -
  ----- ------ - -------------
  ------------ --------
  ------ -------
-

----------------------------------- -- --
----------------------------------- -- -- --------

上面的代码中，我们定义了一个递归的斐波那契函数。然后，我们创建了一个 Map 实例来缓存函数的结果。在 memoizedFibonacci() 中，我们首先检查 Map 中是否已经存在斐波那契数列的结果。如果存在，则直接返回结果，否则计算结果并存储到 Map 中。

总结

Map 和 Set 是 JavaScript 中强大且高效的数据结构，它们可以极大地简化去重、查询、缓存等任务的实现。借助上述知识点，我们可以避免使用许多比较复杂的算法来处理重复的数据。希望本文可以对你理解 JavaScript 数据结构有所帮助，并为你的工作带来便利。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6492cbcf48841e98940989f4