JavaScript - Set（集）对象

上一页
下一页

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

JavaScript Sets 类似于 Arrays，但有一些关键区别：

  • Set 只能保存唯一值，而 Arrays 可以保存重复值。
  • Set 不排序，而 Arrays 排序。
  • Set 比 Arrays 更快地添加和删除项目。

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

语法

用户可以按照下面的语法在 JavaScript 中定义一个 Set -


 let set1 = new Set([iterable]);

在上面的语法中，我们使用了带有 'new' 关键字的 Set（） 构造函数来定义 Set（集合）。

参数

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

例子

示例（访问 Set 元素）

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

我们使用 values（） 方法来获取设置值的迭代器。要遍历迭代器，我们使用 for...of 循环。在循环中，我们访问元素并打印它。即使输入数组包含重复的元素，也可以观察到 set 包含唯一值。


<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

示例（将元素插入 Set）

用户可以使用 add（） 方法将元素插入到 Set（集合）中。在这里，我们创建了空 Set（集合） 。之后，我们使用 add（） 方法 3 次将 60、50、50 个元素添加到集合中。

我们插入了 50 2 次，但该 Set（集合）仅包含一次，因为它包含唯一值。


<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

示例 （删除设置的元素）

set 的 delete（） 方法允许您从 Set（集合）中删除元素。在这里，我们创建了包含各种数字的 Set（集合），并使用 delete（） 方法从 Set（集合）中删除了 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

示例 （检查 Set 是否包含特定值）

下面的示例演示了如何使用 has（） 方法来检查 Set（集合）是否包含特定值。

在这里，我们检查 Set（集合）是否包含 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 存在于 Set（集合）中。

The set contains 100?: true

数学 Set 运算

Set 类不包含用于执行数学 Set（集合）运算（如 union、intersection 或 set difference）的内置方法。因此，您需要编写自定义 JavaScript 代码来执行数学运算，如下所示。

示例（两个 Set 的合并 Set）

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

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

示例（两个 Set 的交集）

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

在这里，我们有两个包含汽车名称的 Set（集合），并定义了 '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' 的新 Set（集合），并使用 '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（集合）。换句话说，每个值在一个 Set（集合）中只能出现一次。它提供了添加、删除和检查 Set（集合）中是否存在元素的方法。在这里，我们列出了 Set 类的属性和方法。

JavaScript Set 构造函数（）

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

名称 描述
Set()

从作为参数传递的值中创建并返回一组唯一值。

JavaScript Set 属性

以下是 Set 类的属性 -

名称 描述
size

此属性返回 Set（集合）的大小。

JavaScript Set 方法

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

名称 描述
add()

此方法将元素插入到 Set（集合）中。
clear()

此方法 remove 将删除 Set（集合）的所有元素。
delete()

此方法删除 Set（集合）的单个元素。
difference()

此方法返回第一个 Set（集合）的元素，但不返回第二个 Set（集合）的元素。
entries()

获取包含所有设置条目的迭代器。
forEach()

此方法为此 Set（集合）中的每个值执行一次提供的函数。
has()

该方法指示具有指定值的元素是否存在。
intersection()

此方法返回两个 Set（集合）中的公共元素。
keys()

此方法是 values（） 方法的别名。
values()

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