JavaScript的Set数据结构详解

admin

　　这篇文章主要为大家介绍了JavaScript的Set数据结构，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

1. 什么是 Set
　　Set 可以简单的看作是数学上的集合。
　　它是一系列无序，没有重复数值的数据集合。

2. Set 构造函数
　　对于 Set 的构造函数的参数，可以传递以下几种形式。

2.1) 数组

1. const s = new Set([1, 2, 1]);
2. console.log(s);

复制代码

　　这里传递了一个数组[1, 2, 1]作为参数，由于 Set 是无重复数值的集合，所以第三个 1 自动删除了。

2.2) 字符串

1. const s = new Set("Hello World!");
2. console.log(s);

复制代码

2.3) arguments

1. function fun() {
2.     const s = new Set(arguments);
3.     console.log(s);
4. }
6. fun(1, 2, 3);

复制代码

2.4) NodeList

1. ‹!DOCTYPE html>
2. ‹html lang="en">
3. ‹head>
4.     ‹meta charset="UTF-8">
5.     ‹meta http-equiv="X-UA-Compatible" content="IE=edge">
6.     ‹meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     ‹title>set‹/title>
8. ‹/head>
9. ‹body>
10.     ‹p>1‹/p>
11.     ‹p>2‹/p>
12.     ‹p>3‹/p>
13.    
14.     ‹script>
15.         const s = new Set(document.querySelectorAll('p'));
16.         console.log(s);
17.     ‹/script>
18. ‹/body>
19. ‹/html>

复制代码

　　这里将三个p标签的引用放进了Set s中；
　　当我们要用的时候，就可以遍历这个 Set，然后分别将p标签的引用取出来，然后就可以对p标签进行修改了。

2.5)  Set

1. const s1 = new Set([1, 2, 3]);
2. const s2 = new Set(s1);
3. console.log(s2);

复制代码

　　这里相当于把s1复制过去，给了s2，不过它们不是同一个Set

1. console.log(s1 === s2);

复制代码

3. Set 的实例属性和方法
　　Set 的属性，有一个属性size，用来存储它的成员个数

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

复制代码

　　Set的方法

• add
  

　　给 Set 中添加成员

1. const s = new Set([1, 2, 3]);
2. // 它的参数只能传一个
3. s.add(5);
4. console.log(s);
5. // 可以连缀 add
6. s.add(7).add(9);
7. console.log(s);

复制代码

• delete
  

　　用来删除 Set 中的成员

1. const s = new Set([1, 2, 3]);
2. s.delete(2);
3. // 如果要删除的东西在 Set 中找不到，将什么也不会发生，也不会报错
4. s.delete(5);
5. console.log(s);

复制代码

• has
  

　　用来判断 Set 是否含有某个成员

1. const s = new Set([1, 2, 3]);
2. console.log(s.has(1));
3. console.log(s.has(5));

复制代码

• clear
  

　　将会删除 Set 的所有成员

1. const s = new Set([1, 2, 3]);
2. s.clear();
3. console.log(s);

复制代码

4. Set 的成员访问
　　它的成员访问要通过 forEach 方法实现，遍历 Set，它的遍历是按成员的添加顺序来进行遍历的。
　　它有两个参数，第一个参数为回调函数，第二个参数设定回调函数中this指向什么，即

1. s.forEach(回调函数, 回调函数的指向)

复制代码

　　我们先来看第一个参数：
　　对于第一个参数回调函数，它有三个参数：

1. s.forEach(function(value, key, set){
2. value 就是 Set 的成员
3. 在 Set 中，value 和 key 是相等的
4. set 就是前面Set的本身，即这里 set === s
5. });

复制代码

　　通过一个例子理解一下：

1. const s = new Set([1, 2, 3]);
2. s.forEach(function(value, key, set) {
3.     console.log(value, key, value === key);
4.     console.log(set, set === s);
5. });

复制代码

　　再来看第二个参数：

1. const s = new Set([1, 2, 3]);
2. s.forEach(function(value, key, set) {
3.     console.log(this);
4. }, document);

复制代码

5. Set 的注意事项
　　Set 对重复值的判断基本遵循严格相等===的判断
　　不过对于NaN，在 Set 中，NaN 等于 NaN

6. Set 的使用场景
　　数组去重

1. let arr = [1, 2, 1];
2. const s = new Set(arr);
3. arr = [...s];
4. // 也可以合成一句
5. // arr = [...new Set(arr)];
6. console.log(arr);

复制代码

　　字符串去重

1. let str = "11231131242";
2. const s = new Set(str);
3. str = [...s].join("");
4. // 也可以写成一句
5. // str = [...new Set(str)].join("");
6. console.log(str);

复制代码

　　存放 DOM 元素

1. ‹!DOCTYPE html>
2. ‹html lang="en">
3. ‹head>
4.     ‹meta charset="UTF-8">
5.     ‹meta http-equiv="X-UA-Compatible" content="IE=edge">
6.     ‹meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     ‹title>set‹/title>
8. ‹/head>
9. ‹body>
10.     ‹p>1‹/p>
11.     ‹p>2‹/p>
12.     ‹p>3‹/p>
13.    
14.     ‹script>
15.         const s = new Set(document.querySelectorAll('p'));
16.         s.forEach((elem) => {
17.             console.log(elem)
18.         });
19.     ‹/script>
20. ‹/body>
21. ‹/html>

复制代码

总结
　　本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

---