Set

Set 是 ES6 提供给我们的构造函数,能够造出一种新的存储数据的结构

特点:只有属性值没有属性名,成员值唯一

用途:可以转成数组,其本身具备去重(自动去重),交集,并集,差集的作用等

参数必须具备迭代接口,只要原型上存在Symbol(Symbol.iterator)属性就说明具备迭代接口,如:数组、字符串、arguments、NodeList

Set.add()

向 Set 对象中添加数据

Set 自动去重

Set.delete()

删除 Set 对象中对应的值,如果要删除数组等值,必须提前将数组设置为变量添加入 Set 对象

Set.clear()

清空 Set 对象中的值

Set.has()

判断 Set 对象中是否含有对应值

Set.forEach()    &&    for of

Set.forEach()遍历 Set 对象:

ES6新增 for of 遍历 Set 对象:

能被 for of 遍历的同样得具备迭代接口

Set 操作数组

将数组转换为 Set 对象:

将 Set 对象转换为数组:Array.from()

该方法能够将类数组和所有具备迭代接口的数据转换为数组

... 展开运算符

... 运算符同样能够拓展数组或任何具备迭代接口的数据

使用 Set 进行数组去重

Set 在去重方便相当的老道,如果浏览器支持,则尽量使用 Set 进行去重

使用 Set 进行取并集

使用 Set 进行取交集

使用 Set 进行取差集

但是要注意的是,如果数据量很大,是不在前端进行处理的,通常交给后台处理。

Map

Map 是 ES6 提供给我们的构造函数,能够造出一种新的存储数据的结构,本质上是键值对的集合。

特点:key 对应 value,key 和 value 唯一,任何值都可以当属性

用途:让对象作为属性,去重

原理:链接链表、hash 算法、桶

Map.set()

Map 最大的特点即可以将对象作为属性

向 Map 中添加属性

Map.get()

从 Map 中取值

值得注意的是,Map 与 Set 相同,对引用值进行取值必须先使用变量存储引用值,再使用变量添加到 Map 上,即可通过变量取到对应值。

Map.delete()

从 Map 对象中删除数据

Map.clear()

将 Map 对象清空

Map.keys()

取出 Map 对象的所有属性,方便对全部的值进行遍历

Map.forEach()    &&    for of

Map 对象也同样能够使用 forEach 和 for of 进行遍历

Map.forEach():

for of:

需要注意的是,for of 中取出的 Map 对象的 val 为 包含一对键值对的数组,可以通过 val [0] 和 val [1] 来去对应值

Map.has()

判断 Map 对象中是否含有对应属性

总结一下Map:不重复,key 和 value 唯一,相同的值后来的会覆盖前面的

可以接受的值有 字符串 对象 NaN null [ ] function () {} number

拥有一系列方法 set get delete has clear

Map 原理及实现

Map 对象可以看做是一个桶,给桶中划分几个对象用于存放数据的链表

初始化桶 init ()

先把这个桶初始化,桶里面默认划分8个对象用于存储

hash 算法 makeHash ()

为了使桶中的单一链表不出现太长的情况,需要设计一个 hash 算法对放入 Map 的桶中的元素分配不同的 hash 值进行分类。如果采用该方式后链表还是太长则只能考虑增加桶中的对象个数

存储更新数据方法 set ()

处理完数据的存储之后就剩 Map 对象上的一些方法了,首先看一下存储更新数据的方法 set

首先将要存入的数据的属性名使用 hash 算法得到一个 hash 值,用 hash 值选择到 Map 的桶中将要存入的对应的对象。然后对要存入的数据进行分析,如果链表中不存在该数据,则将该数据添加到链表末端。如果数据已存在,则直接替换对应的 value 值进行数据更新。

获取数据方法 get ()

相同的值通过 hash 算法算出的 hash 值一定是相同的,所以从 Map 对象中取数据也先将所要取的数据的属性名通过 hash 算法算出所对应的链表,通过链表中的 next 属性对链表进行遍历,最终实现获取对应的数据

删除数据方法 delete ()

删除方法主要实现的是从链表中删除一个节点时,将前一个节点的 next 属性指向原本的下一个节点。

查找数据方法 has ()

与 get 方法大致相同

清除数据方法 clear ()

这里直接初始化一个桶完事简单粗暴。

set和map去重调用什么方法_【ES6】Set、Map相关推荐

  1. set和map去重调用什么方法_你真的了解ES6的Set,WeakSet,Map和WeakMap吗?

    之前在学习 ES6 的时候,看到 Set 和 Map,不知道其应用场景有哪些,只觉得很多时候会用在数组去重和数据存储,后来慢慢才领悟到 Set 是一种叫做集合的数据结构,Map 是一种叫做字典的数据结 ...

  2. set和map去重调用什么方法_Es6中Map对象和Set对象的介绍及应用

    前言 今天说一说ES6的Set对象和Map对象.以及这两个对象的应用.目前主流浏览器(chrome32.IE11.Safari7.1以及 Firefox 13以上)都对这2个对象做了基本的支持.因此, ...

  3. js ios调用ios方法_通过iOS 13的模式演示调用生命周期方法

    js ios调用ios方法 iOS 13 was legendary iOS 13传奇 iOS 13 brought many cool things; dark mode, sign in with ...

  4. java 调用祖父方法_在Java中调用祖父母方法:您不能

    java 调用祖父方法 在文章保护的重点中,我详细介绍了"受保护"如何扩展"包私有"访问. 我在那儿写道: 你能做的是 覆盖子类中的方法或 使用关键字super ...

  5. react组件卸载调用的方法_好程序员web前端培训分享React学习笔记(三)

    好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...

  6. java怎么调用void方法_如何使用反射在java中调用void方法

    如果我使用反射调用方法,我可以让它正常工作而不抛出空指针异常的唯一方法是在我调用的方法中返回一个int值. 例如,我想调用的方法: public int setScore(int n) { this. ...

  7. java list map 去重和排序方法

    /** * 排序方法 * @param list * @return */ public List<Map<String, Object>> compareBytime(Lis ...

  8. java 找出调用的方法_如何找到用Java调用给定方法的所有方法?

    小编典典 为了分析字节码,我建议使用ASM.给定要分析的类列表,可以使访问者找到您感兴趣的方法调用.下面是一个分析jar文件中类的实现. 请注意,ASM使用带有'/'而不是'.的internalNam ...

  9. react组件卸载调用的方法_小程序原生引入组件和调用组件的方法 - 一世^浮萍

    看一下我的组件结构 components(被调用的组件) index(页面组件)请忽略调图片 module文件就是我所创的自定义组件,文件代码为: <view class="inner ...

最新文章

  1. 使用jquery.more.js来实现点击底部更多后, 底部加载出新的数据
  2. Linux 精准获取进程pid--转
  3. 发布可伸缩超网SCARLET,小米AutoML团队NAS三部曲杀青
  4. WEBAPI 增加身份验证 (OAUTH 2.0方式)
  5. Three Memory Management Models
  6. XMLHTTP使用详解
  7. centos ssh服务开启
  8. GO ——奇妙的数组
  9. 触摸屏的校准方法(转)
  10. 一篇文章看懂自然语言处理——word表示技术的变迁(从bool模型到BERT)
  11. 冲突域和广播域的理解
  12. 必备知识:工业相机相关知识(初学者必备)
  13. 电子元器件3D模型免费下载资源
  14. Linux基础-分区规划与使用
  15. python绘制三维地形shade()参数_python中的Matplot库和Gdal库绘制富士山三维地形图-参考了虾神的喜马拉雅山...
  16. wps 表格 自动生成序号
  17. 梯度下降---偏导数及其几何意义
  18. 台式计算机dvd光驱在哪里,用台式电脑怎么放DVD
  19. 电信客户流失分析实战
  20. linux文件中的^M

热门文章

  1. 1分钟 Zookeeper 快速入门_windows环境
  2. android图标错误的是什么意思啊,Android错误:找不到与给定名称匹配的资源(在icon处,值为@drawable/icon) - Android - srcmini...
  3. qt下实现文件的拖拽打开
  4. Qt编译时出现“could not parse styleSheet”
  5. jq之$(“ul li:first“)
  6. html box 竖线,CSS3 小竖条脉冲型LOADING动效
  7. 在php中图片放大怎么实现,用PHP实现图片的缩放与裁剪
  8. mysql update upper_MySQL数据处理函数upper、abs、date
  9. flink 不设置水印_从0到1学习Flink—— Flink parallelism 和 Slot 介绍
  10. mysql到mysqli转变表_利用mysql和mysqli取得mysql的所有数据库和库中的所有表