我认为前端生态很大,犹如一片汪洋大海,很难短时间内窥其全貌,在这里我们不谈其他,只聊聊 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. 使用.NET 6开发TodoList应用(24)——实现基于JWT的Identity功能

    系列导航及源代码 使用.NET 6开发TodoList应用文章索引 需求 在.NET Web API开发中还有一个很重要的需求是关于身份认证和授权的,这个主题非常大,所以本文不打算面面俱到地介绍整个主 ...

  2. 白话TCP/IP原理

    TCP/IP(Transmission-Control-Protocol/Internet-Protocol),中文译名为传输控制协议/因特网互联协议,又名网络通讯协议,是Internet最基本的协议 ...

  3. 《剑指offer》面试题61. 扑克牌中的顺子

    问题描述 从扑克牌中随机抽5张牌,判断是不是一个顺子,即这5张牌是不是连续的.2-10为数字本身,A为1,J为11,Q为12,K为13,而大.小王为 0 ,可以看成任意数字.A 不能视为 14. 示例 ...

  4. 内核内存分配器SLAB和SLUB

    内核分配器的功能 在操作系统管理的虚拟内存中,用于内存管理的最小单位是页,大多数传统的架构是4KB.由于进程每次申请分配4KB是不现实的,比如分配几个字节或几十个字节,这时需要中间机制来管理页面的微型 ...

  5. Java集合-ArrayList源码分析

    目录 1.结构特性 2.构造函数 3.成员变量 4.常用的成员方法 5.底层数组扩容原理 6.序列化原理 7.集合元素排序 8.迭代器的实现 9.总结 1.结构特性 Java ArrayList类使用 ...

  6. ComboBox行高

    //行高至少大于20 public static void SetComboBoxLineHeight(ComboBox list, int itemHeight) { list.DropDownSt ...

  7. opencv 4.0 + linux下静态编译,展示详细ccmake的参数配置

    #先安装 cmake 3.14 # cmake安装到了 /usr/local/bin #配置PATH export PATH="$PATH:/usr/local/bin" #下载最 ...

  8. 什么是XSS攻击?什么是SQL注入攻击?什么是CSRF攻击?

    1. XSS(Cross Site Script,跨站脚本攻击) 是向网页中注入恶意脚本在用户浏览网页时在用户浏览器中执行恶意脚本的攻击方式. 1.1跨站脚本攻击分有两种形式: 反射型攻击(诱使用户点 ...

  9. JDK原子操作类

    在Atomic包里一共提供了13个类,属于4种类型的原子更新方式,分别是原子更新基本类型.原子更新数组.原子更新引用和原子更新属性(字段).Atomic包里的类基本都是使用Unsafe实现的包装类. ...

  10. (转引)数据库索引(MySQL)

    数据结构和算法基础 索引的本质:数据结构,帮助高效获取数据 数据库的查询:最基本的查询算法当然是顺序查找(linear search).二分查找(binary search).二叉树查找(binary ...