如何在JavaScript中设置对象

85 阅读2分钟

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

集合对象

Set 对象是一个值的集合,你可以在其中存储唯一的原始值或对象引用。唯一性是这里的关键--没有原始值或对象引用会被多次添加。

如何使用集合

要使用集合,你要创建一个新的实例。

const mySet = new Set();

我们现在有一个空集合。我们可以通过使用add 方法向这个集合添加数字1

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

我们可以通过size 属性看到Set 中有多少个元素。

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

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

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

最后,我们将使用clear 方法来清除Set

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

遍历一个集合

遍历一个Set 的最简单方法是使用forEach 方法。

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

Set 对象也有 、 和 方法,它们都返回entries keys values 迭代器。这些都超出了本教程的范围。

在野外使用集合

我发现Set 对象对于跟踪与一个对象相关的二进制状态来说真的很不错。一个很好的例子是一个手风琴菜单:菜单中的每个项目要么是打开的,要么是关闭的。我们可以创建一个名为isOpenSet ,跟踪手风琴项目的打开状态,并创建一个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工具箱里有了一个新的工具