JavaScript 如何将数组转换为集合

本教程将教您通过将数组转换为集合来从JavaScript的一个项数组中消除重复值。

当我们希望从数据集合中存储不同的值时，我们可以利用集合数据结构来消除重复值。当我们希望消除数据中的重复项或者利用集合数据结构提供的特殊功能时，将数组转换为集合将非常有帮助。

让我们看一些示例和方法来更好地理解这个概念-

示例1-使用Set构造函数

通过Set构造函数，从可迭代对象或者可以进行循环遍历的对象（例如数组）中获得不同的值的集合。

在这个示例中，我们将-

创建一个名为array的数组，其中包含一些重复值
通过将数组作为参数传递给Set构造函数来创建一个名为set的新的Set对象
集合自动删除重复值，只保留唯一的元素

文件名-index.html

<html>
<head>
   <title>Convert Array to Set - Using Set Constructor</title>
   <script>
      const array = [1, 2, 3, 3, 4, 5];
      const set = new Set(array);

      console.log(set); // Output: Set {1, 2, 3, 4, 5}
   </script>
</head>
<body>
   <h1>Convert Array to Set - Using Set Constructor</h1>
</body>
</html>

输出

结果将如下图所示。

JavaScript 如何将数组转换为集合

示例2 – 使用Spread Operator

为了去除重复项，我们也可以利用扩展运算符(…)和Set构造函数。可迭代对象或可循环遍历的对象（如数组）可以通过扩展运算符将其展开成单独的元素，并将这些元素传递给Set构造函数。

在这个示例中，我们将会 −

使用扩展运算符…将数组的元素展开成单独的值。
然后，我们将这些值作为参数传递给Set构造函数，创建一个新的Set对象set。

文件名 – index.html

<html>
<head>
   <title>Convert Array to Set - Using Spread Operator</title>
   <script>
      const array = [1, 2, 3, 3, 4, 5];
      const set = new Set([...array]);

      console.log(set); // Output: Set {1, 2, 3, 4, 5}
   </script>
</head>
<body>
   <h1>Convert Array to Set - Using Spread Operator</h1>
</body>
</html>

输出

结果将会如下图所示。

JavaScript 如何将数组转换为集合

示例3 – 使用Array.from()

我们可以使用Array.from()函数从现有数组生成一个新的数组实例，然后我们可以将这些成员发送给Set构造函数。

在这个示例中我们将：

使用Array.from()从数组创建一个新数组，然后将得到的数组作为参数传递给Set构造函数，从而创建一个新的Set对象set。

文件名 – index.html

<html>
<head>
   <title>Convert Array to Set - Using Array.from()</title>
   <script>
      const array = [1, 2, 3, 3, 4, 5];
      const set = new Set(Array.from(array));

      console.log(set); // Output: Set {1, 2, 3, 4, 5}
   </script>
</head>
<body>
   <h1>Convert Array to Set - Using Array.from()</h1>
</body>
</html>