一、Set 是什么
1. 什么是 Set
- 数组是一系列有序的数据集合。
- Set 是一系列无序、没有重复值的数据集合。
2. 理解 Set
![](https://i-blog.csdnimg.cn/blog_migrate/bb85af3f76e965a9633a5c0f2ffea01e.png)
二、Set 实例的方法和属性
1. 方法
![](https://i-blog.csdnimg.cn/blog_migrate/e0a3f022984ce965e006f68e622f4589.png)
![](https://i-blog.csdnimg.cn/blog_migrate/316d1d911ad9dcaf2c956aa8e01ec998.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1fc68e538287f10c61c9c37ed549544e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/47c2053cb7bfbfb898b192559613431d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6e40b34c0b4ccc261df9a56fc51cb829.png)
2. 属性
![](https://i-blog.csdnimg.cn/blog_migrate/58aadc5ec261b060a4156599623da0cb.png)
三、Set 构造函数的参数
1. 数组
![](https://i-blog.csdnimg.cn/blog_migrate/99b866aa287864d66c3b1388016033bd.png)
2. 字符串、arguments、NodeList、Set 等
![](https://i-blog.csdnimg.cn/blog_migrate/eb4db7fd9fe7da1ec6d0b90385a45671.png)
![](https://i-blog.csdnimg.cn/blog_migrate/252f7eb9e95f4433fe18988b01e3878f.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Set 构造函数的参数</title>
</head>
<body>
<p>123</p>
<p>321</p>
<p>34567</p>
<script>
// NodeList
console.log(new Set(document.querySelectorAll('p')));
</script>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/65d00f8f43a98e994baca7c198108951.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5a94d9cf8c50474ad1577907d53be4de.png)
四、Set 的注意事项
1. 判断重复的方式
- Set 对重复值的判断基本遵循严格相等(===)。
- 但是对于 NaN 的判断与 === 不同,Set 中 NaN 等于 NaN。
![](https://i-blog.csdnimg.cn/blog_migrate/5986186a4c5df257890cfe1313151d07.png)
2. 什么时候使用 Set
- ① 数组或字符串去重时。
- ② 不需要通过下标访问,只需要遍历时。
- ③ 为了使用 Set 提供的方法和属性时(add delete clear has forEach size 等)。
五、Set 的应用
1. 数组去重
![](https://i-blog.csdnimg.cn/blog_migrate/70c6629b88ca14d9de3022267a8928c3.png)
2. 字符串去重
![](https://i-blog.csdnimg.cn/blog_migrate/e19b8fc24d3d66494092e70f435aa0d6.png)
3. 存放 DOM 元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Set 的应用</title>
</head>
<body>
<p>123</p>
<p>321</p>
<p>34567</p>
<script>
// 3.存放 DOM 元素
const s = new Set(document.querySelectorAll('p'));
console.log(s);
s.forEach(function (elem) {
elem.style.color = 'red';
elem.style.backgroundColor = 'yellow';
});
</script>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/5e8fe8560a7f8998ea204bba0042a12c.png)