在JavaScript中理解集合

集合是ES6中JavaScript的新附加功能。让我们来学习一下。

什么是集合？

如何在JavaScript中使用它们？

它提供了哪些方法来解决问题？

让我们在本教程中找到所有问题的答案。

集合

顾名思义，集合是一组唯一元素的集合。它不存储重复的值。

JavaScript中的集合将元素按插入顺序存储。因此，它们在JavaScript中是有序的。它还可以存储基本数据类型或对象。

让我们看一下JavaScript中集合的语法。

我希望你有链接_0>来练习以下内容。

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会从集合中移除所有的元素。

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中使用集合的所有知识。你可以在下一个项目中使用它们。尽情利用。

编程愉快 👨‍💻

相关