JavaScript：ES6：Set集合-马育民老师

# 说明

ES6 提供了 **Set集合**，功能类似数组，但 Set集合 中的元素 **只会出现一次**，没有重复的值（即使多次添加相同的元素，也只能有一个）

>与 Java、Python中的 Set功能相同

# 创建

Set 本身是一个构造函数，调用构造函数用来生成 Set 数据结构。

## 方式一

```
new Set();
```

#### 例子
```
let i = new Set();
```

### 方式二

Set 函数可以接受一个数组（或类似数组的对象）作为参数，用来进行数据初始化。

**提示：**如果初始化时，数组中的元素有重复的，**会自动去除**

#### 例子
```
let i = new Set([1, 2, 1, 3, 4, 4]);
```

结果：
```
set{1, 2, 3, 4,}
```

# 属性

返回 Set 中的元素数量
```
.size
```

### 例子

```
let s = new Set([1, 2, 3]);
console.log( s.size ); // 3
```

# 操作方法

- add(value)　　　　添加数据，并返回新的 Set 结构
- delete(value)　　　删除数据，返回一个布尔值，表示是否删除成功
- has(value)　　　　查看是否存在某个数据，返回一个布尔值
- clear()　　　　　　清除所有数据，没有返回值

### 例子

```
let set = new Set([1, 2, 3, 4, 4]);
// 添加数据 5
let addSet = set.add(5);
console.log(addSet); // Set(5) {1, 2, 3, 4, 5}
// 删除数据 4s
let delSet = set.delete(4);
console.log(delSet); // true
// 查看是否存在数据 4
let hasSet = set.has(4);
console.log(hasSet); // false
// 清除所有数据
set.clear();
console.log(set); // Set(0) {}
```

# 遍历

Set 提供了三个遍历器生成函数和一个遍历方法。

- **keys()**　　　　 返回一个键名的遍历器
- **values()**　　　 返回一个值的遍历器（与 `keys()` 相同）
- entries()　　　 返回一个键值对的遍历器
- forEach()　　　使用回调函数遍历每个成员

### 例子：keys()

```
let color = new Set(["red", "green", "blue"]);
for(let item of color.keys()){
 console.log(item);
}
```
执行结果：
```
red
green
blue
```

### 例子：values()

```
for(let item of color.values()){
 console.log(item);
}
```
执行结果：
```
red
green
blue
```

### 例子：entries()

```
for(let item of color.entries()){
 console.log(item);
}
```
执行结果：
```
["red", "red"]
["green", "green"]
["blue", "blue"]
```

### 例子：forEach()

```
color.forEach((item) => {
 console.log(item)
})
```
执行结果：
```
red
green
blue
```

# 与数组 转换 操作

### Set 转数组

由于扩展运算符 `…`，内部的原理也是使用的 for-of 循环，所以也可以用于操作 Set 结构。
例如将 Set 结构转换为数组结构：

```
let color = new Set(["red", "green", "blue"]);
let colorArr = [...color];
```

### 数组去重

扩展运算符和 Set 结构相结合，就可以去除数组的重复成员。

```
let arr = [1,2,2,2,2,"2",24,5,6];
//step1:数组转集合
let set = new Set(arr);//已经去掉重复值，当前不是数组，而集合　　Set { 1, 2, '2', 24, 5, 6 }
//step2:集合转数组
arr = [...set];//[ 1, 2, '2', 24, 5, 6 ]
```

参考：
https://blog.csdn.net/mingjuna2010/article/details/106940497
https://www.runoob.com/w3cnote/es6-map-set.html

原文出处：http://malaoshi.top/show_1GWH0EnEfA1.html