JavaScript - 集合

JavaScript Set 集合对象是唯一值的集合。每个值在集合中只能出现一次。集合可以保存任何数据类型的任何值。集合是在 ECMAScript 6 (ES6) 中引入 JavaScript 的。

JavaScript 集合与数组类似，但存在一些关键区别:

集合只能保存唯一值，而数组可以保存重复值。
集合是无序的，而数组是有序的。
在集合中添加和删除元素的速度比数组更快。

JavaScript 集合通常用于存储唯一值，例如访问过网站的唯一用户数。它们还可用于从数组中删除重复值。

语法

用户可以按照以下语法在 JavaScript 中定义集合 -

let set1 = new Set([iterable]);

在上述语法中，我们使用带有 new 关键字的 Set() 构造函数来定义集合。

参数

Iterable- 它是一个可选参数。 Set() 构造函数遍历可迭代对象的元素，并使用这些元素创建一个新的集合。

示例

示例(访问集合元素)

在下面的示例中，我们将包含重复元素的数组作为 Set() 构造函数的参数传递。num_set 仅包含唯一值。

我们使用 values() 方法获取集合值的迭代器。为了遍历迭代器，我们使用 for...of 循环。在循环中，我们访问元素并打印它。您可以观察到，即使输入数组包含重复元素，集合仍然包含唯一值。

<html>
<body>
   <p>The set elements are: </p>
   <p id = "output"></p>
   <script>
  
      const num_set = new Set([10, 20, 20, 20]);

      for (let value of num_set.values()) {
         document.getElementById("output").innerHTML += value + "<br> ";
      }
    
   </script>
</body>
</html>

输出

The set elements are:

10
20

示例(将元素插入集合)

用户可以使用 add() 方法将元素插入集合。这里，我们创建了一个空集。之后，我们调用了 3 次 add() 方法，将 60、50、50 个元素分别添加到集合中。

我们插入了 50 个元素 2 次，但由于集合中包含唯一值，因此只包含一次。

<html>
<body>
   <p>Set elements after adding element/s to it: </p>
   <div id = "output"> </div>
   <script>

      const num_set = new Set();
      num_set.add(60);
      num_set.add(50);
      num_set.add(50);

      for (let value of num_set.values()) {
         document.getElementById("output").innerHTML += value + "<br> ";
      }
   </script>
</body>
</html>

输出

Set elements after adding element/s to it:

60
50

示例(删除集合元素)

集合的 delete() 方法允许您从集合中删除元素。在这里，我们创建了一个包含各种数字的集合，并使用 delete() 方法从集合中删除了 200 和 400。

<html>
<body>
   <p> After deleting elements from the set: </p>
   <div id = "output"> </div>
   <script>

      let num_set = new Set([100, 200, 300, 400, 500]);

      num_set.delete(200);
      num_set.delete(400);

      for (let value of num_set.values()) {
         document.getElementById("output").innerHTML += value + "<br> ";
      }
   </script>
</body>
</html>

输出

The set contains 100?: true

示例(检查集合是否包含特定值)

以下示例演示了如何使用 has() 方法检查集合是否包含特定值。

在这里，我们检查集合是否包含 100，并在输出中打印相应的消息。

<html>
<body>
   <p id = "output">The set contains 100?: </p>
   <script>
      const num_set = new Set([100, 200, 300, 400, 500]);
      document.getElementById("output").innerHTML += num_set.has(100);
   </script>
</body>
</html>

输出

返回"true"，因为元素 100 存在于集合中。

The set contains 100?: true

数学集合运算

Set 类不包含执行数学集合运算(例如并集、交集或差集)的内置方法。因此，您需要编写自定义 JavaScript 代码来执行数学运算，如下所示。

示例(两个集合的并集)

两个集合的并集包含 set1 和 set2 中所有唯一元素。

在下面的示例中，set1 和 set2 包含汽车名称。我们定义了并集并将数组作为参数传递。我们使用展开运算符创建了一个包含 set1 和 set2 元素的数组。

<html>
<body>
   <p>The Union of set1 and set2 is: </p>
   <div id = "output"> </div>
   <script>

      const set1 = new Set(["BMW", "Audi", "TATA"]);
      const set2 = new Set(["BMW", "TaTa", "Honda", "Suzuki"]);

      const union = new Set([...set1, ...set2]); // Taking union

      for (let value of union.values()) {
         document.getElementById("output").innerHTML += value + "<br> ";
      }
   </script>
</body>
</html>

输出

如果我们执行该程序，它将返回 set1 和 set2 的所有唯一元素。

The Union of set1 and set2 is:

BMW
Audi
TATA
TaTa
Honda
Suzuki

示例(两个集合的交集)

两个集合的交集包含同时存在于 set1 和 set2 中的唯一元素。

这里，我们有两个包含汽车名称的集合，并定义了一个交集 (inter) 来存储同时存在于两个集合中的元素。

我们遍历 set1 的元素，并在循环中使用 has() 方法检查 set1 中的元素是否存在于 set2 中。如果是，则将一个元素添加到交集中。

<html>
<body>
   <p> The intersection of set1 and set2 is: </p>
   <p id = "output"> </p>
   <script>

      const set1 = new Set(["BMW", "Audi", "TATA"]);
      const set2 = new Set(["BMW", "TATA", "Honda", "Suzuki"]);

      const inter = new Set();
      for (let car of set1) {
         if (set2.has(car)) {
            inter.add(car);
         }
      }

      for (let value of inter.values()) {
         document.getElementById("output").innerHTML += value + "<br> ";
      }

   </script>
</body>
</html>

输出

The intersection of set1 and set2 is:

BMW
TATA

示例(两个集合的差集)

Set1 和 Set2 的差集包含 Set1 中的所有元素，但不包含 Set2 中的元素。

我们创建了名为 diff 的新集合，并用 Set1 中的元素初始化它。之后，我们遍历 Set2 中的元素。如果 diff 集合中存在 Set2 中的任何元素，则将其删除。

<html>
<body>
   <p>The difference of set1 and set2 is: </p>
   <div id = "output"> </div>
   <script>

      const set1 = new Set(["BMW", "Audi", "TATA"]);
      const set2 = new Set(["BMW", "TATA", "Honda", "Suzuki"]);

      const diff = new Set(set1);
      for (let car of set2) {
         diff.delete(car);
      }

      for (let value of diff.values()) {
         document.getElementById("output").innerHTML += value + "<br> ";
      }
   </script>
</body>
</html>

输出

The difference of set1 and set2 is:

Audi