经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JavaScript的Set数据结构详解
来源:jb51  时间:2022/1/3 16:47:33  对本文有异议

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. }
  5.  
  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. <script>
  14. const s = new Set(document.querySelectorAll('p'));
  15. console.log(s);
  16. </script>
  17. </body>
  18. </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]);// 它的参数只能传一个s.add(5);console.log(s);// 可以连缀 adds.add(7).add(9);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. <script>
  14. const s = new Set(document.querySelectorAll('p'));
  15. s.forEach((elem) => {
  16. console.log(elem)
  17. });
  18. </script>
  19. </body>
  20. </html>

在这里插入图片描述

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注w3xue的更多内容! 

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号