Javascript 简明教程

JavaScript - Sets

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

JavaScript 集合与数组相差不大，但有一些关键差异：

  1. 集合只能包含唯一值，而数组可以包含重复值。

  2. 集合无序，而数组有序。

  3. 从集合中添加和删除项目要比从数组中快。

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

Syntax

用户可以遵循下面的语法在 JavaScript 中定义一个集合 −

let set1 = new Set([iterable]);

在上面的语法中，我们使用了 Set() 构造函数和 'new' 关键字来定义一个集合。

Parameters

  1. * 可迭代 − * 这是一个可选参数。Set() 构造函数遍历可迭代的元素，并使用这些元素创建一个新集合。

Examples

Example (Access set elements)

在下面的示例中，我们传递了包含重复元素的数组作为 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

Example (Insert elements into the sets)

用户可以使用 add() 方法将元素插入集合。在此处，我们创建了空集合。之后，我们使用了 add() 方法 3 次，将 60、50、50 元素添加到集合中。

我们插入 50 两次，但集合只包含一次，因为它只包含唯一的值。

<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

Example (Remove set elements)

集合的 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

Example (Check if the set contains a specific value)

下面的示例演示了如何使用 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

Mathematical set operations

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

Example (Union of two sets)

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

在下面的示例中，set1 和 set2 包含汽车名称。我们定义了“union”集合并将数组作为参数传递。我们使用了展开运算符来创建包含 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

Example (Intersection of two sets)

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

此处，我们有两个包含汽车名称的集合，并定义了“inter”集合来存储存在于两个集合中的集合元素。

我们遍历 set1 的元素，并在循环内部使用 has() 方法来检查 set1 的元素是否存在于 set2 中。如果是，我们向“inter”集合添加一个元素。

<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

Example (Difference of two sets)

set1 和 set2 之间的差集包含 set1 中但不在 set2 中的所有元素。

我们创建了一个名为“diff”的新集合，并用“set1”元素对其进行初始化。之后，我们遍历 set2 元素。如果 set2 的任何元素存在于“diff”集合中，我们将删除它。

<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

JavaScript Set Reference

在 JavaScript 中，Set 是唯一值的集合。换句话说，每个值只能在集合中出现一次。它提供用于在集合中添加、删除和检查元素是否存在的方法。此处，我们列出了 Set 类的属性和方法。

JavaScript Set Constructor()

以下是 JavaScript 中 Set 的构造函数 −

Sr.No.

Name & Description

1

Set() 创建并返回从作为参数传递的值中获取的唯一值集合。

JavaScript Set Properties

以下是 Set 类属性——

Sr.No.

Name & Description

1

size 此属性返回集合的大小。

JavaScript Set Methods

在下表中，我们列出了 Set 类的所有属性——

Sr.No.

Name & Description

1

add() 此方法将元素插入集合。

2

clear() 此方法删除集合中的所有元素。

3

delete() 此方法删除集合中的单个元素。

4

difference() 此方法返回存在于第一个集合中而不在第二个集合中的元素。

5

entries() 获取包含所有集合项的迭代器。

6

forEach() 此方法为该集合中的每个值执行一次已提供的函数。

7

has() 此方法指示是否存在具有指定值元素。

8

intersection() 此方法返回两个集合中的公共元素。

9

keys() 此方法是 values() 方法的别名。

10

values() 此方法返回一个新的 Set 迭代器对象，其中包含 Set 对象中每个元素的值。