ES6 JavaScript Set 类型入门指南

摘要：本教程将介绍 JavaScript Set 对象，它允许您有效地管理任何类型唯一值的集合。

JavaScript Set 对象简介

ES6 提供了一种新的类型 Set，它存储任何类型的唯一值的集合。要创建新的空 Set，请使用以下语法

let setObject = new Set();Code language: JavaScript (javascript)

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

let setObject = new Set(iterableObject);Code language: JavaScript (javascript)

有用的 Set 方法

Set 对象提供了以下有用的方法

add(value) – 将具有指定值的的新元素追加到集合中。它返回 Set 对象，因此您可以将此方法与另一个 Set 方法链接。
clear() – 从 Set 对象中删除所有元素。
delete(value) – 删除由值指定的元素。
entries()– 返回一个新的 Iterator，其中包含 [value, value] 的数组。
forEach(callback [, thisArg]) – 对 Set 的每个元素调用回调函数，在每次调用中将 this 值设置为 thisArg。
has(value) – 如果集合中存在具有给定值的元素，则返回 true，否则返回 false。
keys() – 与 values() 函数相同。
[@@iterator] – 返回一个新的 Iterator 对象，该对象包含以插入顺序存储的所有元素的值。

JavaScript Set 示例

从数组创建一个新的 Set

以下示例展示了如何从数组创建一个新的 Set。

let chars = new Set(['a', 'a', 'b', 'c', 'c']);Code language: JavaScript (javascript)

集合中的所有元素都必须是唯一的，因此 chars 只包含 3 个不同的元素 a、b 和 c。

console.log(chars);Code language: JavaScript (javascript)

输出

Set { 'a', 'b', 'c' }Code language: JavaScript (javascript)

当您将 typeof 运算符用于 chars 时，它返回 object。

console.log(typeof(chars));Code language: JavaScript (javascript)

输出

object

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

let result = chars instanceof Set;
console.log(result);Code language: JavaScript (javascript)

获取 Set 的大小

要获取集合保存的元素数量，请使用 Set 对象的 size 属性

let size = chars.size;
console.log(size);//  3
Code language: JavaScript (javascript)

向 Set 添加元素

要向集合添加元素，请使用 add() 方法

chars.add('d');
console.log(chars);Code language: JavaScript (javascript)

输出

Set { 'a', 'b', 'c', 'd' }Code language: JavaScript (javascript)

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

chars.add('e')
     .add('f');
Code language: JavaScript (javascript)

检查 Set 中是否存在某个值

要检查集合中是否存在特定元素，请使用 has() 方法。has() 方法如果集合包含该元素则返回 true，否则返回 false。由于 chars 集合包含 'a'，因此以下语句返回 true

let exist = chars.has('a');
console.log(exist);// true
Code language: JavaScript (javascript)

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

exist = chars.has('z');
console.log(exist); // falseCode language: JavaScript (javascript)

从集合中删除元素

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

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

输出

Set { 'a', 'b', 'c', 'd', 'e' }Code language: JavaScript (javascript)

delete() 方法返回 true，表示元素已成功删除。要删除集合中的所有元素，请使用 clear() 方法

chars.clear();
console.log(chars); // Set{}Code language: JavaScript (javascript)

循环 JavaScript Set 的元素

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

let roles = new Set();
roles.add('admin')
    .add('editor')
    .add('subscriber');
Code language: JavaScript (javascript)

以下示例使用 for…of 循环遍历 chars 集合。

for (let role of roles) {
    console.log(role);
}Code language: JavaScript (javascript)

输出

admin
editor
subscriber

Set 还提供了 keys()、values() 和 entries() 方法，类似于 Map。但是，Set 中的键和值是相同的。例如

for (let [key, value] of roles.entries()) {
    console.log(key === value);
}Code language: JavaScript (javascript)

输出

true
true
trueCode language: JavaScript (javascript)

对 Set 的每个元素调用回调函数

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

roles.forEach(role => console.log(role.toUpperCase()));Code language: JavaScript (javascript)

WeakSets

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');
}Code language: JavaScript (javascript)

输出

We have a server

在本教程中，您学习了 JavaScript Set 对象以及如何操作其元素。

本教程对您有帮助吗？