一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。
十一、Set
11-1、Set是什么
Set 是一系列无序、没有重复值的数据集合
11-2、Set创建方法
与数组不同的是，Set没有字面量的创建方式，只能通过实例化构造函数的方式来创建：
const s = new Set();
console.log(s); // Set(0) {size: 0}
可以通过add方法来向Set中放入内容，但是放入的内容是没有重复的：
const s = new Set();
s.add(1);
s.add(2);
s.add(1);
console.log(s); // Set(2) {1, 2}
11-3、Set实例的方法和属性
11-3-1、初始化Set实例的方式
我们不仅可以直接new Set()来初始化一个空的Set实例：
const s = new Set();
也可以向Set构造函数中传递数组、字符串、arguments、NodeList、Set实例等来创建Set实例
1、传递数组
会将数组中每一个元素放入Set实例中并自动去重
const s = new Set([1, 2, 1]);
console.log(s); // Set(2) {1, 2}
2、传递 字符串
传递字符串后，会将每个字符分隔开来作为成员，也会自动去重
console.log(new Set('hihi')); // Set(2) {'h', 'i'}
3、传递arguments
function func() {
console.log(new Set(arguments)); // Set(2) {1, 2}
}
func(1, 2, 1);
4、传递NodeList
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Set</title>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<script>
console.log(new Set(document.querySelectorAll('p')));
</script>
</body>
</html>
5、传递Set
Set构造函数中也可以接收一个Set实例来生成一个新的Set
const s = new Set([1, 2, 1]);
console.log(new Set(s) === s); // false
console.log(s);
11-3-2、Set实例的方法
11-3-2-1、add()
Set实例可以通过add方法向实例中添加成员：
- add方法支持链式调用
const s = new Set();
s.add(1).add(2).add(2);
11-3-2-2、delete()
使用delete可以删除Set实例中的指定成员：
- 当删除一个不存在的成员时，不会有任何影响，也不会报错
const s = new Set();
s.add(1).add(2).add(2);
// delete
s.delete(1);
s.delete(3);
11-3-2-3、clear()
用于清空Set实例中的所有成员
const s = new Set();
s.add(1).add(2).add(2);
s.clear();
11-3-2-4、has()
用于判断Set集合中是否包含某个成员
const s = new Set();
s.add(1).add(2).add(2);
console.log(s.has(2)); // true
11-3-2-5、获取set中内容
由于Set集合是无序的，没有办法向数组那样通过索引去访问内容，所以可以通过forEach去遍历Set：
const s = new Set();
s.add(1).add(2).add(2);
s.forEach(function (value, key) {
// Set 中 value = key
console.log(value);
});
- 遍历出的顺序由添加成员的顺序决定，所以会依次打印出 1、2
- 由于Set是无序的，没有key，所以遍历出的Set中的value与key是相同的
11-3-3、Set实例的属性
Set实例有一个size属性，可以获取Set集合中成员的个数：
const s = new Set();
s.add(1).add(2).add(2);
console.log(s.size); // 2
11-4、Set注意事项
11-4-1、Set判断内容重复的方式
Set判断内容重复基本遵守严格相等，对于NaN来说比较特殊：
- 如果我们console.log(NaN === NaN)会输出false（NaN不等于包括自身的任何值）
- 但是在Set中重复添加NaN，最终只会存在一个NaN（Set中，NaN与NaN是相等的）
console.log(NaN === NaN); // false
const s = new Set([NaN, 2, NaN]); // Set(2) { NaN, 2 }
11-4-2、什么时候使用Set
- 数组或字符串去重时
- 不需要通过下标访问只需要遍历时（数组/Set都可以）
- 为了使用Set的方法或属性时
11-5、Set的应用
11-5-1、数组去重
我们可以通过向Set构造函数中传递数组来对数组中元素进行去重，如果想将Set实例变回数组可以结合展开运算符来实现：
const arr = [1,2,1];
const s = new Set(arr);
console.log(s);
// 我们可以结合展开运算符将Set变回数组
console.log([...s]);
11-5-2、字符串去重
我们向Set构造函数中传递字符串后，会变成一个Set数组，去重后可以将Set实例变为数组并调取数组的join方法将数组变回为字符串：
const s = new Set('abbacbd');
console.log([...s].join(''));
console.log(s);
11-5-3、存放DOM元素
我们在使用document.querySelectorAll等来获取dom元素时，是一个NodeList类数组，此时我们可以通过向Set构造函数中传递NodeList来变为Set集合进而操作dom元素：
（这里使用Set是因为我们不需要去使用下标去访问dom元素，只需要遍历）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Set</title>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<script>
const s = new Set(document.querySelectorAll('p'));
console.log(s);
s.forEach(function (elem) {
// console.log(elem);
elem.style.color = 'green';
elem.style.backgroundColor = 'yellow';
});
</script>
</body>
</html>
