我认为前端生态很大,犹如一片汪洋大海,很难短时间内窥其全貌,在这里我们不谈其他,只聊聊 Set

Set是 es6 新提出的一个对象,也是一种数据结构,为什么es6要提出这样一个新对象呢,无非就是丰富js的对象类型,在遇到具体的业务场景需要一个比较适合的恰当的数据结构来保存和操作数据,接下来就让我们更深刻的认识下Set的一些常用的方法和应用场景

首先 Set的一个重要特性就是集合中是不允许添加重复元素的,如何判断重复,如果是基本类型的话根据===操作符,如果是引用类型的话是根据对象的指针是否指向同一个引用对象,特别有意思的是NaN,Set是把它作为相同对待的,尽管NaN本身是不相等的,所以Set中的值都是唯一的

Set是一个构造函数,所以我们使用Set必须使用new关键字

两种方法创建

  • 直接创建一个空的集合

    const set = new Set()
  • 传入一个数组或者具有iterable接口的其他数据结构 
    const set = new Set([1,2,3,4,5])
    const set = new Set('我是字符串,我具有iterable接口哦')

Set 的实例属性和方法

  1. 操作方法

    1. 添加

      const s = new Set()
      // add 方法返回Set实例本身,所以可以执行链式操作
      const ret = s.add(1).add('one').add({1:'one'})
    2. 删除
      const s = new Set([1,2,3,4,5])
      // delete 方法返回被删除元素是否删除成功
      const flag = s.delete(1) // true
      const flag = s.delete('2') // false
    3. 查找
      const s = new Set([1,2,4,5,6,7])
      const flag = s.has(2)
    4. 清空
      const s = new Set([12,324,1])
      //clear 方法没有返回值,返回undefined
      s.clear()
    5. 两个实例属性
      const s = new Set()
      // 实例还有两个属性
      s.size //返回当前集合中元素个数
      s.constructor // 返回实例构造器,也就是Set
  2. 遍历方法
    1. 遍历键名

      const s = new Set(['javascript','html','css'])
      
      for(let key of s.keys()){
      console.log(key)
      }
      //javascript
      //html
      //css
      //遍历顺序就是插入顺序,利用这个特性可以储存一些需要按顺序调用的函数
    2. 遍历键值
      const s = new Set(['javascript','html','css'])
      
      for(let value of s.values()){
      console.log(value)
      }
      //Set不存在键名,只有键值,也可以认为键名和键值是同一个,所以keys和values返回的值是一样的
    3. 遍历键值对
      const s = new Set(['javascript','html','css'])
      
      for(let entry of s.entries()){
      console.log(entry)
      }
      //['javascript', 'javascript']
      //['html', 'html']
      //['css', 'css']
      //遍历的每一对都是一个包括键名和键值的数组
    4. forEach 使用回调函数遍历每一个元素
      const s = new Set(['javascript','html','css'])
      s.forEach(function(value,key,s) {
      // 回调函数接受三个参数,键值,键名,set本身
      console.log(`键值:${value};键名${key};集合大小${s.size};${this.thisName}`)
      },{thisName:'改变回调函数this'})
      // forEach函数还接受第二个参数,可以绑定处理函数的this
    5. Set实例默认是可以迭代的,因为它的遍历器生成函数其实调用的就是values方法,这意味着我们可以直接省略values()方法直接遍历
      const s = new Set(['javascript','html','css'])
      
      for(let value of s){
      console.log(value)
      }

应用

1、我们首先可以结合扩展操作符(...)给数组去重

const unique = [...new Set([1,2,3,4,5,1,21,23,5])]
//[1, 2, 3, 4, 5, 21, 23]

2、实现并集,交集,差集

const s1 = new Set([1,2,3,4])
const s2 = new Set([2,3,4,5]) //并集 Set(5) {1, 2, 3, 4, 5}
const union = new Set([...s1,...s2]) //交集 Set(3) {2, 3, 4}
const intersect = new Set([...s1].filter(v => s2.has(v))) //差集
const difference = new Set([...new Set([...s1].filter(v => !s2.has(v))),...new Set([...s2].filter(v => !s1.has(v)))])

Set 基本的用法就先讲到这里,有不对的地方欢迎大家指正

大前端JS篇之搞懂【Set】的更多相关文章

  1. 【5分钟一个知识点】JS一文搞懂new操作符

    关于new操作符,看了两本书<Javascript高级程序设计3>和<你不知道的JS上>,以及其他文档后,终于豁然开朗. 现总结如下,希望同样懵逼的你,彻底理解它. 如果有不同 ...

  2. 【Kubernetes】两篇文章 搞懂 K8s 的 fannel 网络原理

    近期公司的flannel网络很不稳定,花时间研究了下并且保证云端自动部署的网络能够正常work. 1.网络拓扑 拓扑如下:(点开看大图)  容器网卡通过docker0桥接到flannel0网卡,而每个 ...

  3. 帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)

    作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...

  4. 这一次搞懂SpringMVC原理

    @ 目录 前言 正文 请求入口 组件初始化 调用Controller 参数.返回值解析 总结 前言 前面几篇文章,学习了Spring IOC.Bean实例化过程.AOP.事务的源码和设计思想,了解了S ...

  5. 一统江湖的大前端(2)—— Mock.js + Node.js 如何与后端潇洒分手

    <一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...

  6. 让你彻底搞懂JS中复杂运算符==

    让你彻底搞懂JS中复杂运算符== 大家知道,==是JavaScript中比较复杂的一个运算符.它的运算规则奇怪,容易让人犯错,从而成为JavaScript中“最糟糕的特性”之一. 在仔细阅读了ECMA ...

  7. c#代码 天气接口 一分钟搞懂你的博客为什么没人看 看完python这段爬虫代码,java流泪了c#沉默了 图片二进制转换与存入数据库相关 C#7.0--引用返回值和引用局部变量 JS直接调用C#后台方法(ajax调用) Linq To Json SqlServer 递归查询

    天气预报的程序.程序并不难. 看到这个需求第一个想法就是只要找到合适天气预报接口一切都是小意思,说干就干,立马跟学生沟通价格. ​ ​不过谈报价的过程中,差点没让我一口老血喷键盘上,话说我们程序猿的人 ...

  8. 大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app

    大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app ( 本文内容为melodyWxy原作,git地址:https://github.com/melodyWx ...

  9. 一统江湖的大前端(10)——inversify.js控制反转

    <大史住在大前端>前端技术博文集可在下列地址访问: [github总基地][博客园][华为云社区][掘金] 字节跳动幸福里大前端团队邀请各路高手前来玩耍,团队和谐有爱,技术硬核,字节范儿正 ...

随机推荐

  1. EntityFrameworkCore数据迁移(一)

    .net core出来已经有很长一段时间了,而EentityFrameworkCore(后面简称EFCore)是.net framework的EntityFramework在.net core中的实现 ...

  2. C# 绘制印章

    最近有个.net core的项目要绘制印章功能,一个公司印章,一个个人印章,于是抽了点时间自己写了一个,现在分享出来 using System; using System.Collections.Ge ...

  3. 探索 dotnet core 为何在 Windows7 系统需要补丁的原因

    在一些 Windows 7 系统上,根据 dotnet 官方文档,需要安装上 KB2533623 补丁,才能运行 dotnet core 或 .NET 5 等应用.尽管非所有的设备都需要安装此,但这也 ...

  4. rsync配置文件讲解

    1.安装rysnc 一般在安装系统时rsync是安装上(yum安装) 2.     vim /etc/xinetd.d/rsync 在这个路径下有配置文件 service rsync { disabl ...

  5. python all用法记录

    all函数可以返回对象中是否所有元素均为True 代码如下:(此处仅做简单记录,日后不忙时再认真总结) >>> print(list(map(lambda x: True if x ...

  6. 第10组 Beta冲刺 (1/5)

    1.1基本情况 ·队名:今晚不睡觉 ·组长博客:https://www.cnblogs.com/cpandbb/p/14012521.html ·作业博客:https://edu.cnblogs.co ...

  7. PPT文档学习小练习链接

    1. <初识PPT2010> https://www.toutiao.com/i6486689592241029645/ 2. <PowerPoint2010实现折线图动态展示> ...

  8. IDEA安装与配置

    一.安装 二.配置 配置字体:source pro code 忽略大小写提示 自动导包 多 tab显示 设置快捷键 设置鼠标悬浮提示 设置行号和方法分隔符 设置maven 断点调试 字符编码 自动删除 ...

  9. Flink 非对齐Unaligned的checkpoint(源码分析)

    本文源码基于flink1.14 在帮助用户排查任务的时候,经常会发现部分task处理的慢,在Exactly once语义时需要等待快照的对齐而白白柱塞的情况 在flink1.11版本引入了非对齐的ch ...

  10. Redis内存分析工具之redis-rdb-tools的安装与使用

    操作系统:Centos7    1.redis-rdb-tools工具是用python语言编写的,所以首先需要安装python: 安装: (1)用 wget 下载 python 2.7 并解压( 如果 ...