了解 JavaScript 中的集合

0 Shares

深入了解 JavaScript 中的集合（Set）

集合（Set）是 ECMAScript 6（ES6）为 JavaScript 引入的一个重要新特性。让我们一起探索它的奥秘。

究竟什么是集合？

我们如何在 JavaScript 中有效地使用它？

它提供了哪些有用的方法来帮助我们解决实际问题？

本教程将逐一解答以上疑问。

什么是集合（Set）？

顾名思义，集合是一种存储唯一值的结构。它不会允许重复元素的出现，确保了其中数据的独特性。

在 JavaScript 中，集合会按照元素被插入的顺序存储它们。这意味着集合是有序的。集合可以存储原始数据类型（如数字、字符串）以及对象。

下面我们来看看 JavaScript 中创建集合的语法，这将有助于我们更好地理解和运用集合。

建议您使用一个代码编辑器，以便您能够边学习边实践。

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);
console.log(names);

const randomWord = new Set("Hiiiiiii");
console.log(randomWord);

const numbers = new Set([5, 5, 5, 2, 1, 1, 2, 3]);
console.log(numbers);

集合的属性与方法

集合提供了各种属性和方法，它们能够帮助我们有效地处理不同的编程任务。这些属性和方法的使用非常直观，几乎与它们的名称一样简单。下面让我们逐一了解。

size 属性

size 属性会返回集合中当前元素的数量。

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);
console.log(`Size: ${names.size}`);

add() 方法

add() 方法用于向集合中添加一个新的元素。如果尝试添加已存在于集合中的元素，该方法将不会执行任何操作，保证集合中元素的唯一性。

// 空集合
const names = new Set();

names.add("John");
names.add("Harry");
names.add("Wick");
names.add("Jack");
names.add("Harry");

console.log(names);

has() 方法

has() 方法接收一个参数，用于检测该元素是否存在于集合中。如果元素存在，该方法返回 true，否则返回 false。

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

console.log(names.has("Harry"));
console.log(names.has("Alley"));

delete() 方法

正如其名，delete() 方法接收一个参数，并尝试从集合中删除该元素。即便给定的元素不存在于集合中，该方法也不会抛出任何错误。

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

names.delete("John");

console.log(names);

entries() 方法

entries() 方法返回一个迭代器，该迭代器包含按插入顺序排列的键值对数组。在集合中，每个元素的键和值都是相同的。

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

const entries = names.entries();

console.log(entries.next().value);
console.log(entries.next().value);
console.log(entries.next().value);
console.log(entries.next().value);
console.log(entries.next().value);

keys() 方法

keys() 方法返回一个迭代器，它按照元素被插入的顺序遍历集合中的所有元素，并将它们作为键返回。

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

const keys = names.keys();

console.log(keys.next().value);
console.log(keys.next().value);
console.log(keys.next().value);
console.log(keys.next().value);
console.log(keys.next().value);

values() 方法

values() 方法与 keys() 方法相似，也是按照插入顺序返回集合元素的迭代器，只不过它返回的是值，而不是键。

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

const values = names.values();

console.log(values.next().value);
console.log(values.next().value);
console.log(values.next().value);
console.log(values.next().value);
console.log(values.next().value);

clear() 方法

clear() 方法用于移除集合中的所有元素，使集合变成空集。

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

names.clear();

console.log(names);

forEach() 方法

forEach() 方法用于遍历集合中的每一个元素，并对每个元素执行一次提供的回调函数。

const names = new Set(["John", "Harry", "Wick", "Jack", "Harry"]);

names.forEach((element) => {
   console.log(element);
});

集合的实际应用

现在让我们通过一个简单的程序来演示集合的实际应用。假设我们有一个数组，其中包含重复的元素，我们的目标是从该数组中去除所有重复项。借助集合的特性，我们可以很方便地解决这个问题。

解决此问题的步骤如下：

首先，初始化一个包含重复值的数组作为示例数据。
接下来，创建一个空集合。
遍历原始数组中的每个元素。
- 将当前遍历到的元素添加到集合中。由于集合会自动去除重复元素，因此无需额外处理。
然后，创建一个空数组用于存储去重后的元素。
遍历集合中的每一个元素，并将它们依次添加到新数组中。
最后，打印输出这个新的数组。

我鼓励您自己尝试解决这个问题。如果您遇到任何困难，可以参考下面的代码。

const arr = ["John", "Harry", "Wick", "Jack", "Harry"];

const temp = new Set();

arr.forEach((element) => {
   temp.add(element);
});

const newArr = [];

temp.forEach((element) => {
   newArr.push(element);
});

console.log(newArr);

总结

通过本教程的学习，您已经掌握了在 JavaScript 中使用集合的基本知识。希望您能在未来的项目中充分利用集合的强大功能。继续努力学习，享受编码的乐趣！

祝您编程愉快！👨‍💻