JavaScript Set集合类型的用法（附带实例）

ES6 提供的新的数据结构 Set 类似于数组，但是其成员的值都是唯一的，没有重复的值。

Set() 本身是一个构造函数，用来生成 Set 数据结构。Set() 函数可以接收一个数组（或者是具有 iterable 接口的其他数据结构）作为参数，用来初始化。

const s1 = new Set(); // 没有成员
console.log(s1.size); // 0
const s2 = new Set([1, 2, 3, 4, 4]);
console.log(s2.size); // 4
const s3 = new Set('asdasda');
console.log(s3.size); // 3

在上面代码中，第 3 行是接收数组作为参数，第 5 行是接收字符串作为参数。

Set 结构有一个 size 属性，用于返回 Set 实例的成员总数。由于成员的值都是唯一的，没有重复的值，因此第 4 行和第 6 行输出的结果是 4 和 3。

【实例 1】去除数组中的重复成员以及字符串里的重复字符。

<script>
// 去除数组中的重复成员
var array = [1, 1, 2, 3, 4, 4];
var b = [...new Set(array)];
console.log(b); // [1,2,3,4]

// 去除字符串中的重复字符
var s = 'ababbc';
var r = [...new Set(s)].join('');
console.log(r); // 'abc'
</script>

在程序中，第 4 行和第 8 行代码通过原数组和原字符串得到一个 Set 结构数据，此时就去除了重复的值，然后使用扩展运算符展开到数组中。

Set 实例常用方法如下表所示：

方法	描述
add	添加某个值，返回 Set 结构本身
delete	删除某个值，返回一个布尔值，表示删除是否成功
has	返回一个布尔值，表示该值是否为 Set 的成员
clear	清除所有成员，没有返回值
forEach	为每个元素调用回调函数

【实例 2】Set 实例常用方法。

<script>
const s = new Set();
s.add(1);
s.add(2);
console.log(s.size); // 2
console.log(s.has(1)) // true
console.log(s.has(2)) // true
console.log(s.has(3)) // false
s.forEach((value, key) => console.log(key + ':' + value)) // 1:1 2:2
console.log(s.delete(1)) // true
</script>

程序中:

• 第 2 行代码创建一个空的 Set 结构；
• 第 3 行和第 4 行代码通过 add() 方法增加成员；
• 第 5 行代码通过 size 属性得到 Set 结构的长度；第 6~8 行代码判断是否含有某个值；
• 第 9 行代码通过 forEach 遍历 Set 结构。这里需要注意，Set 结构的键名就是键值（两者是同一个值），因此第一个参数 value 与第二个参数 key 的值永远都是一样的。