在本教程中,您将了解 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 个不同的元素 cab

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

WeakSetSet 类似,只是它只包含对象。由于对象在 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对象以及如何操作其元素。