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

Set

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

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

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

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

Set.add()

向 Set 对象中添加数据ba3b10d6e658ffef68e0cf00150e1aff.png

dbffa1b689888d2ec1ee00c8f5c2d5d1.pngSet 自动去重

Set.delete()

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

6dd0fd1cce8ba515ec1fd77185e736dd.png

Set.clear()

清空 Set 对象中的值734e41d1bd765bddf535ae0846be7a3f.png

db9efc837f859d4521f67f1897c0935b.png

Set.has()

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

0eab072e72a25a39ba1cf715aed0a518.png

Set.forEach()    &&    for of

Set.forEach()遍历 Set 对象:4eaa4d0693e92130d71fb4fe3af16985.png

f28d429902382bc65d884b85e4afb604.png

ES6新增 for of 遍历 Set 对象:

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

1a1a6ab8142b0598e2f6ca7c704ee9de.png

Set 操作数组

将数组转换为 Set 对象:7fefceeb151fa903be1d6487fd8dada0.png

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

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

def70240eeccce8fb01ba2767a8473ea.png... 展开运算符

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

def70240eeccce8fb01ba2767a8473ea.png

使用 Set 进行数组去重

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

db1f164cd2973d69e0ce3ed95ef108c9.png

使用 Set 进行取并集dcda8c2ea44ee6806c1c8f40956e089a.png

e9fdeb119482caa4b51f6fa0e1a008cb.png

使用 Set 进行取交集88a39b49228967ed2950e8c9fc2ca780.png

f42d9200e7971c7a27f082cc311901c1.png

使用 Set 进行取差集9ff1d54e7e76f0789ab93a228dd669ff.png

93a0bae48a0723d070a849a5ccc5c74d.png

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

Map

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

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

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

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

Map.set()

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

向 Map 中添加属性56cc3b2f7f143a566686966c1fef9fc3.png

47f58170cee311f33c5eb9be126f4ffa.png

Map.get()

从 Map 中取值2dd5b9fa4062506b05229860b8292ccf.png

8fdd70a38f0aa6fcc13babbdf2d1c562.png

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

542f135eeaf7f1b27eed882a2d3f2fe7.png

Map.delete()

从 Map 对象中删除数据

Map.clear()

将 Map 对象清空

Map.keys()

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

39c3ac8ab8795217f2ace03f5c9892e9.png

Map.forEach()    &&    for of

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

Map.forEach():b27215eb35e2c96ccd9834c4214fafcc.png

9fc9367204866088572e63b60070f389.png

for of:

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

d8095de95c0500e5e626f8d09e0c1ead.png

Map.has()

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

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

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

拥有一系列方法 set get delete has cleara739ef1ba60c42f0cacc586144e75f71.png

Map 原理及实现

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

初始化桶 init ()

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

hash 算法 makeHash ()

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

存储更新数据方法 set ()

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

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

获取数据方法 get ()

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

删除数据方法 delete ()

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

查找数据方法 has ()

与 get 方法大致相同0eec1fb53d51e2578a7ce29b7385eeee.png

清除数据方法 clear ()

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值