JavaScript中Set的基本指南

在本文中，我们将了解Set是如何工作的。

什么是 JavaScript Set？

Javascript 集是创建唯一列表的有用方法，该列表可以变异，但不包含重复项。JavaScript 中的Set是检查某个值是否存在于指定的其他值列表中的好方法。JavaScript Set很有用，因为它们通常比类似的更快Array.includes因此它们提供了一种有效且优化的方式来检查一个值是否存在于一组其他值中。

要创建一个新集合，我们使用new Set()构造函数：

let mySet = new Set(); 
1

基本Set操作

初始化一个Set，但我们如何实际使用它呢？Set有许多操作，让我们来看看

将元素添加到 Set

该Set.add()方法用于将元素添加到集合中：

let mySet = new Set();
mySet.add(5);
console.log(mySet); // Set(1) {5} 
1
2
3

集合可以包含任何数据类型——因此您可以添加对象、数字、字符串或您想要的任何其他内容。如果您尝试将相同的值添加两次，它只会在集合中出现一次：

let mySet = new Set();
mySet.add(5);
mySet.add(5);
console.log(mySet); // Set(1) {5} 
1
2
3
4

从 Set 中删除元素

要从 JavaScript 中的集合中删除单个元素，可以使用以下Set.delete()方法：

let mySet = new Set();
mySet.add(5);
mySet.delete(5);
console.log(mySet); // Set(0) {} 
1
2
3
4

您还可以使用该Set.clear()方法清除集合中的所有项目：

let mySet = new Set();
mySet.add(5);
mySet.add(10);
mySet.clear();
console.log(mySet); // Set(0) {} 
1
2
3
4
5

从Set中删除对象

有趣的是，对象仍然是使用单独的引用创建的，因此您不能使用该Set.delete()方法从集合中删除对象。尝试这样做仍然会导致对象项出现在集合中：

let mySet = new Set();
mySet.add({o: 4});
mySet.delete({o: 4});
console.log(mySet); // Set(1) {{o: 4}} 
1
2
3
4

forEach相反，如果您想从集合中删除一个对象，您必须使用或类似的方法遍历集合。找到要删除的元素后，只需照常删除即可：

let mySet = new Set();
mySet.add({o: 4});
mySet.forEach((x) => { if(x.o == 4) {mySet.delete(x)}
});
console.log(mySet); // Set(0) {} 
1
2
3
4
5

设置键和条目

JavaScript 中的集合也有Set.keys()和Set.entries()方法。所有集合本质上都是一种数组，因此 usingSet.keys()只需从该集合返回一组可迭代的键，如下所示：

let mySet = new Set();
mySet.add(5);
mySet.add(10);
console.log(mySet.keys()); //  SetIterator {5, 10} 
1
2
3
4

Set.entries()很奇怪，因为正如我提到的那样，集合并没有真正的键。在 Javascript 中，通常一个entries()方法从数组格式的数据结构中返回键值对，例如[key, value]. 由于集合没有键，Set.entries()只为键和值返回相同的值。此方法存在的主要原因是提供与Map数据类型的一致性：

let mySet = new Set();
mySet.add(5);
mySet.add(10);
let setEntries = mySet.entries();

for(let x of setEntries) {console.log(x);// Returns [ 5, 5 ], [ 10, 10 ]
} 
1
2
3
4
5
6
7

检查Set成员

JavaScript 中集合的主要用例是检查成员资格。这比使用类似Array.includes(). 要检查集合成员资格，您可以使用该Set.has()方法。如果集合包含项目，则返回true，如果不包含false：

let mySet = new Set();
mySet.add(5);
mySet.add(10);
mySet.add(20);
console.log(mySet.has(10)); // true 
1
2
3
4
5

同样，这不适用于对象，因为使用 . 检查时对象具有不同的引用has。因此，要检查一个对象是否在一个集合中，您必须遍历它并检查对象中的一些值：

let mySet = new Set();
mySet.add({o: 4});
mySet.forEach((x) => { if(x.o == 4) {// }
}); 
1
2
3
4

检查Set的大小

数组有.length，集合有.size。要检查集合的大小或长度，我们不能.length像通常那样使用 。相反，使用以下方法找到集合的大小.size：

let mySet = new Set();
mySet.add(5);
mySet.add(10);
mySet.add(20);
console.log(mySet.size); //3 
1
2
3
4
5

迭代一个Set

集合本身可以通过一个简单的 for 循环进行循环：

let mySet = new Set();
mySet.add(5);
mySet.add(10);
mySet.add(20);
for(let x of mySet) {console.log(x); //5, 10, 20
} 
1
2
3
4
5
6

但是，套装也附带forEach()方法，因此您也可以使用它。但是，通常for循环更快：

let mySet = new Set();
mySet.add(5);
mySet.add(10);
mySet.add(20);
mySet.forEach(() => {console.log(x); //5, 10, 20
} 
1
2
3
4
5
6

除此之外，Set还附带了一个迭代器方法。您可以像下面的代码中所示访问它，然后使用它next()来遍历集合中的每个项目。以前可能没有见过这种表示法，但许多数据结构和原型都包含迭代器方法。在这里，我们通过mySet[Symbol.iterator]().

let mySet = new Set();
mySet.add(5);
mySet.add(10);
let setIterator = mySet[Symbol.iterator]();

console.log(setIterator.next()); //{ value: 5, done: false }
console.log(setIterator.next()); //{ value: 10, done: false } 
1
2
3
4
5
6
7

结论

Set在 JavaScript 中一种非常酷且很少使用的数据结构，它为我们提供了一种有效的方法来检查一个项目是否属于另一组项目。

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。



有需要的小伙伴，可以点击下方卡片领取，无偿分享