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

    编程愉快 👨‍💻

类似文章