JavaScript - 集合

上一页
下一页

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

JavaScript 集合类似于数组，但有一些关键区别

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

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

语法

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

let set1 = new Set([iterable]);

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

参数

  • Iterable−这是一个可选参数。Set() 构造函数遍历 iterable 的元素，并使用这些元素创建一个新的集合。

示例

示例（访问集合元素）

在下面的示例中，我们传递了一个包含重复元素的数组作为 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() 方法将元素插入集合。在这里，我们创建了一个空集合。之后，我们使用 add() 方法三次将 60、50、50 元素添加到集合中。

我们插入了 2 次 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

示例（删除集合元素）

集合的 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 包含汽车名称。我们定义了“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

示例（两个集合的交集）

两个集合的交集包含同时存在于 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

示例（两个集合的差集）

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 参考

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

JavaScript Set 构造函数()

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

序号 名称及描述
1

Set()

创建并返回由作为参数传递的值组成的唯一值集合。

JavaScript Set 属性

以下是 Set 类的属性：

序号 名称及描述
1

size

此属性返回集合的大小。

JavaScript Set 方法

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

序号 名称及描述
1

add()

此方法将元素插入集合中。
2

clear()

此方法删除集合中的所有元素。
3

delete()

此方法删除集合中的单个元素。
4

difference()

此方法返回第一个集合中存在但第二个集合中不存在的元素。
5

entries()

获取包含所有集合条目的迭代器。
6

forEach()

此方法对该集合中的每个值执行一次提供的函数。
7

has()

此方法指示是否存在具有指定值的元素。
8

intersection()

此方法返回两个集合中共同的元素。
9

keys()

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

values()

此方法返回一个新的 Set 迭代器对象，其中包含 Set 对象中每个元素的值。
打印页面
上一页
下一页
广告