【ES6系列】Set和Map
今天,我们来学习一下 ES6 中新增的两个数据结构:Set 和 Map。
Set
ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。
创建 Set 数据结构
1 |
|
Set 实例的创建可以简单通过 new 方法来实现,同时可以通过传入一个数组格式的参数来实例化。
size 属性
size 属性返回 Set 实例的成员总数
1 |
|
add(value)方法
添加某个值,返回 Set 结构本身
1 |
|
delete(value)方法
删除某个值,返回一个布尔值,表示删除是否成功。
1 |
|
has(value)方法
返回一个布尔值,表示该值是否为 Set 的成员。
1 |
|
clear()方法
清除所有成员,没有返回值。
1 |
|
Set 的遍历
Set 结构的实例有四个遍历方法,可以用于遍历成员。
- keys():返回键名的遍历器
- values():返回键值的遍历器
- entries():返回键值对的遍历器
- forEach():使用回调函数遍历每个成员
1 |
|
通过上面的示例结果可知,Set 结构的 key 和 value 是一致的。
※ 需要特别指出的是,Set 的遍历顺序就是插入顺序。这个特性有时非常有用,比如使用 Set 保存一个回调函数列表,调用时就能保证按照添加顺序调用。
Set 结构的应用
在开始我们已经提到过,Set 结构的成员都是唯一的,哪怕我们在传入一个有重复成员的数组时,得到的 Set 实例也是去重的。是的,Set 结构非常重要且常见的应用场景就是:数组去重
。
首先我们需要知道,Array.from 方法可以将 Set 结构转为数组。
Array.from 方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。
1 |
|
从而我们可以这样来实现一个数组去重的方法
1 |
|
另外,在 ES6 中数组的扩展中还有扩展运算符(…)同样可以使用到 Set 实例
1 |
|
小结:通过 Set 结构可以很方便的来实现数组去重的处理,这在之前我们可能就需要循环判断或者依赖于第三方库来实现了,方便了很多。
WeakSet
WeakSet 结构与 Set 类似,也是不重复的值的集合。
WeakSet 与 Set 的区别:
- WeakSet 的成员只能是对象,而不能是其他类型的值。
- 其次,WeakSet 中的对象都是弱引用,即垃圾回收机制不考虑 WeakSet 对该对象的引用,也就是说,如果其他对象都不再引用该对象,那么垃圾回收机制会自动回收该对象所占用的内存,不考虑该对象还存在于 WeakSet 之中。
对于垃圾回收机制这部分大家可以自行查找相关说明,本篇不做论述。
创建 WeakSet 结构
可以通过 new 命令来创建 WeakSet 数据结构
1 |
|
WeakSet 可以接受一个数组或类似数组的对象作为参数。该数组的所有成员,都会自动成为 WeakSet 实例对象的成员,所以数组的成员需要是对象。
1 |
|
方法
- add(value):向 WeakSet 实例添加一个新成员。
- delete(value):清除 WeakSet 实例的指定成员。
- has(value):返回一个布尔值,表示某个值是否在 WeakSet 实例之中。
相关使用方法可以参照 Set 的相关方法来使用。
另外,WeakSet 没有 size 属性,没有办法遍历它的成员。
※WeakSet 不能遍历,是因为成员都是弱引用,随时可能消失,遍历机制无法保证成员的存在,很可能刚刚遍历结束,成员就取不到了。WeakSet 的一个用处,是储存 DOM 节点,而不用担心这些节点从文档移除时,会引发内存泄漏。
Map
在 ES5 中,对象的键值对中键只能使用字符串,这就带来了很大的限制。在 ES6 中增加了 Map 的数据结构,它类似于对象,但是键的范围不仅仅是字符串,而是各种类型的值都可以当做键。
创建 Map 数据结构
1 |
|
作为构造函数,Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。
1 |
|
set(key, value)方法
通过 set(key, value)方法为 Map 结构添加成员
1 |
|
get(key)方法
通过 get(key)方法获取 Map 结构中对应 key 的 value 值
1 |
|
size 属性、delete(key)方法、has(key)方法和 clear()方法
Ma 数据结构的size
属性和delete
、has
以及clear
方法,可以参考 Set 数据结构的对应方法来使用。唯一的区别是delete
和has
方法的参数是对应的key
值。
1 |
|
Map 的遍历
Map 结构的遍历基本和 Set 结构是一样的,具体可以参照上面 Set 的遍历,此处就不再一一来说了。
WeakMap
WeakMap 结构与 Map 结构类似,也是用于生成键值对的集合。相关创建方法基本和 Map 结构是一致的。
WeakMap 和 Map 的区别
- WeakMap 只接受对象作为键名(null 除外),不接受其他类型的值作为键名。
- WeakMap 的键名所指向的对象,不计入垃圾回收机制。
※WeakMap 的专用场合就是,它的键所对应的对象,可能会在将来消失。WeakMap 结构有助于防止内存泄漏。
方法
WeakMap 只有四个方法:
- get(key)
- set(key, value)
- has(key)
- delete(key)
除了上面四个方法,WeakMap 既不能遍历,也没有长度size
属性,同时还不能清空clear
。
数据结构的操作主要集中在增删查改四个方面,下面我们就从这四个方面分别简单将 Set/Map 和 Array/Object 来做下对比:
Set、Map 和 Array 的对比
1 |
|
图片描述
1 |
|
图片描述
1 |
|
图片描述
1 |
|
图片描述
Set、Map 和 Object 的对比
1 |
|
图片描述
1 |
|
图片描述
1 |
|
图片描述
1 |
|
图片描述
总结
通过上面简单的代码示例我们这次学习了 ES6 中新增的 Set 和 Map 数据结构,并且针对 Array 和 Object 数据结构进行了简单的对比分析。不难看出,在使用的过程中明显的 Set 和 Map 比我们之前经常使用的 Array 和 Object 是有明显的便捷优势的。这也给了我们一个建议,后续的开发过程中,我们可以根据场景需要来通过 Set 和 Map 来替代 Array 和 Object 来使用。
- 本文作者:冷星
- 本文链接:http://lengxing.club/2018/07/03/%E3%80%90ES6%E7%B3%BB%E5%88%97%E3%80%91Set%E5%92%8CMap/index.html
- 版权声明:本博客所有文章均采用 BY-NC-SA 许可协议,转载请注明出处!