学习非常有用但经常被忽视的 JavaScript 内置 Set 对象

集合对象

结论

如果您学到了一些东西，请给这篇文章点赞💓、🦄或🔖！

Set是我最喜欢的 JavaScript 内置对象类型之一。今天我将介绍该Set对象并讨论它的一些用例。

视频教程

我制作了本教程的视频版本！如果你喜欢视频学习，可以看看这个 YouTube 视频。

集合对象

对象Set是值的集合，您可以在其中存储唯一的原始值或对象引用。唯一性是关键——任何原始值或对象引用都不能被多次添加。

如何使用 Set

要使用 set，您需要创建它的一个新实例。

const mySet = new Set();

1现在我们有了一个空集。我们可以用该方法将数字添加到这个集合中add。

mySet.add(1);

我们如何知道我们已经添加了1？我们可以使用该has方法来检查。

console.log(mySet.has(1));
// true

我们现在添加一个对象引用，然后检查我们的中是否有该对象Set。

const obj = { name: 'Daffodil' };
mySet.add(obj);
console.log(mySet.has(obj));
// true

请记住，比较的是对象引用，而不是对象键本身。换句话说：

console.log(mySet.has({ name: 'Daffodil' }));
// false

Set我们可以通过使用该size属性来查看其中有多少个元素。

console.log(mySet.size);
// 2

接下来，让我们使用该delete方法删除一个值。

mySet.delete(1);
console.log(mySet.has(1));
// false

最后，我们将清除Set使用clear方法。

mySet.clear();
console.log(mySet.size);
// 0

迭代集合

迭代 a 的最简单方法Set是使用forEach方法。

new Set([1, 2, 3]).forEach(el => {
  console.log(el * 2);
});
// 2 4 6

Set对象还具有entries、keys和values方法，每个方法都返回迭代器。这些内容有点超出本教程的范围！

在野外使用集合

我发现Set对象非常适合跟踪与对象关联的二进制状态。一个很好的例子是手风琴菜单：菜单中的每个项目要么打开，要么关闭。我们可以创建一个Set跟踪isOpen手风琴项目打开状态的函数，以及一个toggle切换打开状态的函数：

const isOpen = new Set();

function toggle(menuItem) {
  if (isOpen.has(menuItem)) {
    isOpen.delete(menuItem);
  } else {
    isOpen.add(menuItem);
  }
}

效率说明

你可能会觉得该Set对象看起来与数组非常相似。然而，它们之间有一个很大的区别，可能会对应用程序的性能产生影响。该Set对象需要使用哈希表（或具有类似哈希表效率的方法）来实现[1]。

当你将某个对象存储在数组中时，你可能需要遍历整个数组才能找到它。然而，使用，查找过程是即时的。实际上，在大多数Set情况下，性能几乎可以忽略不计，但如果你需要跟踪大量对象，记住这一点很重要！

结论

我希望这有助于您理解该Set对象，并且现在您的 JavaScript 工具带中有了一个新的工具！

参考

1. 设置对象规范