• 售前

  • 售后

热门帖子
入门百科

JavaScript的Set数据结构详解

[复制链接]
安夕萌mdj 显示全部楼层 发表于 2022-1-8 05:02:31 |阅读模式 打印 上一主题 下一主题
目次


  • 1. 什么是 Set
  • 2. Set 构造函数

    • 2.1) 数组
    • 2.2) 字符串
    • 2.3) arguments
    • 2.4) NodeList
    • 2.5)  Set

  • 3. Set 的实例属性和方法
  • 4. Set 的成员访问
  • 5. Set 的注意事项
  • 6. Set 的使用场景
  • 总结

1. 什么是 Set

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

2. Set 构造函数

对于 Set 的构造函数的参数,可以通报以下几种形式。

2.1) 数组
  1. const s = new Set([1, 2, 1]);
  2. console.log(s);
复制代码

这里通报了一个数组
  1. [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. 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>
复制代码

这里将三个
  1. p
复制代码
标签的引用放进了
  1. Set
复制代码
s中;
当我们要用的时间,就可以遍历这个
  1. Set
复制代码
,然后分别将
  1. p
复制代码
标签的引用取出来,然后就可以对
  1. p
复制代码
标签举行修改了。

2.5)  Set
  1. const s1 = new Set([1, 2, 3]);
  2. const s2 = new Set(s1);
  3. console.log(s2);
复制代码

这里相称于把
  1. s1
复制代码
复制过去,给了
  1. s2
复制代码
,不外它们不是同一个
  1. Set
复制代码
  1. console.log(s1 === s2);
复制代码


3. Set 的实例属性和方法

Set 的属性,有一个属性
  1. size
复制代码
,用来存储它的成员个数
  1. const s = new Set([1, 2, 3]);
  2. console.log(s.size);
复制代码

Set的方法
  1. add
复制代码
给 Set 中添加成员
  1. const s = new Set([1, 2, 3]);// 它的参数只能传一个s.add(5);console.log(s);// 可以连缀 adds.add(7).add(9);console.log(s);
复制代码
  1. delete
复制代码
用来删除 Set 中的成员
  1. const s = new Set([1, 2, 3]);
  2. s.delete(2);
  3. // 如果要删除的东西在 Set 中找不到,将什么也不会发生,也不会报错
  4. s.delete(5);
  5. console.log(s);
复制代码
  1. has
复制代码
用来判定 Set 是否含有某个成员
  1. const s = new Set([1, 2, 3]);
  2. console.log(s.has(1));
  3. console.log(s.has(5));
复制代码
  1. clear
复制代码
将会删除 Set 的全部成员
  1. const s = new Set([1, 2, 3]);
  2. s.clear();
  3. console.log(s);
复制代码


4. Set 的成员访问

它的成员访问要通过
  1. forEach
复制代码
方法实现,遍历 Set,它的遍历是按成员的添加顺序来举行遍历的。
它有两个参数,第一个参数为回调函数,第二个参数设定回调函数中
  1. 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 对重复值的判定根本遵照严酷相称
  1. ===
复制代码
的判定
不外对于
  1. NaN
复制代码
,在 Set 中,
  1. NaN
复制代码
即是
  1. 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>
复制代码


总结

本篇文章就到这里了,希望能够给你带来资助,也希望您能够多多关注草根技术分享的更多内容!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作