在本教程中，您将了解 JavaScript Set 对象，它允许您有效地管理任何类型的唯一值的集合。

JavaScript Set 对象简介

ES6 提供一个名为 Set 的新类型，它存储任意类型的唯一值的集合。要创建新的 Set ，请使用以下语法：

let setObject = new Set();

Set 构造函数还接受一个可选的可迭代对象。如果将可迭代对象传递给 Set 构造函数，则可迭代对象的所有元素都将添加到新集合中：

let setObject = new Set(iterableObject);

Set 对象方法

Set 对象提供以下常用的方法：

  • add(value) – 将指定值添加到集合中。它返回 Set 对象，因此，您可以将此方法进行链式调用。
  • clear()  – 从 Set 对象中删除所有元素。
  • delete(value) – 根据值删除指定的元素。
  • entries()– 返回一个包含  [value, value] 数组的迭代器。
  • forEach(callback [, thisArg]) – 对集合对象每个元素调用回调，并在每次调用中通过 thisArg 可选参数设置 this 的值。
  • has(value) – 返回指定值的是否存在集合，如果存在则为true，否则为false。
  • keys() – 与 values() 函数相同。
  • [@@iterator] – 返回一个 Iterator 对象，其中包含按插入顺序存储的所有元素的值。

JavaScript Set 示例

指定数组创建集合

以下示例显示如何从数组创建新的集合 。

let chars = new Set(['a', 'a', 'b', 'c', 'c']);

集合的所有元素是唯一的，因此 chars 集合仅包含 3 个不同的元素 c， a 和 b。

console.log(chars);

输出：

Set { 'a', 'b', 'c' }

当对 chars 您使用  typeof 运算符时，它会返回 object。

console.log(typeof(chars));

输出：

object

chars 集合是 Set 类型的实例，因此以下语句返回 true。

let result = chars instanceof Set;
console.log(result);

获取 Set 集合的大小

要获取集合所包含的元素数量，可以使用 Set 集合对象的 size属性：

let size = chars.size;
console.log(size);//  3

将元素添加到集合

要将元素添加到集合，可以使用集合对象的 add() 方法：

chars.add('d');
console.log(chars);

输出：

Set { 'a', 'b', 'c', 'd' }

由于 add() 方法是可链接的，因此您可以使用链式语句将多个元素添加到集合：

chars.add('e')
     .add('f');

检查某个值是否在集合

要检查集合是否具有指定元素，请使用集合的 has() 方法。如果集合包含指定的元素，则 has() 方法返回 true，否则返回 false。

由于 chars 集合包含 'a'，因此以下语句返回 true：

let exist = chars.has('a');
console.log(exist);// true

以下语句返回 false，因为 chars 集合不包含 'z' 值。

exist = chars.has('z');
console.log(exist); // false

删除集合元素

要从集合删除指定元素，可以使用集合的 delete() 方法。以下语句从  chars 集合删除 'f' 值。

chars.delete('f');
console.log(chars); // Set {"a", "b", "c", "d", "e"}

输出：

Set { 'a', 'b', 'c', 'd', 'e' }

delete() 方法返回 true 表明该元素已成功删除。要删除集合的所有元素，可以使用集合的 clear() 方法：

chars.clear();
console.log(chars); // Set{}

JavaScript 遍历集合元素

Set 对象维护其元素的插入顺序，因此，当您迭代其元素时，元素的顺序与插入的顺序相同。假设您有一组用户角色，如下所示。

let roles = new Set();
roles.add('admin')
    .add('editor')
    .add('subscriber');

以下示例使用 for...of 循环来迭代 roles 集合。

for (let role of roles) {
    console.log(role);
}

输出：

admin
editor
subscriber

Set 也提供 keys() ,  values() 和 entries() 方法，类似于 Map。但是，键和值在  Set 集合是一样的。例如：

for (let [key, value] of roles.entries()) {
    console.log(key === value);
}

输出

true
true
true

对集合的每个元素调用回调函数

如果您想对集合中的每个元素调用回调，可以使用集合的 forEach() 方法。

roles.forEach(role => console.log(role.toUpperCase()));

WeakSet

WeakSet 与 Set 类似，只是它只包含对象。由于对象在 WeakSet 可能会被自动垃圾回收，因此 WeakSet 没有 size 属性。

与 WeakMap 一样，您无法迭代 WeakSet 的元素，因此，您会发现 WeakSet 在实践中很少使用。事实上，您仅使用 WeakSet 来检查指定值是否在集合。这是一个例子：

let computer = {type: 'laptop'};
let server = {type: 'server'};
let equipment = new WeakSet([computer, server]);

if (equipment.has(server)) {
    console.log('We have a server');
}

输出

We have a server

结论

在本教程中，您了解了 JavaScrip tSet对象以及如何操作其元素。