专栏/【ES6】Set、Map

【ES6】Set、Map

2019年08月05日 06:40--浏览 · --喜欢 · --评论
粉丝:120文章:74

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:

  1. 不重复,key 和 value 唯一,相同的值后来的会覆盖前面的

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

  3. 拥有一系列方法 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 ()

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


投诉或建议