集合的概念以及和数组的区别

其实数组也是集合, 只不过数组的索引是数值类型.当想用非数值类型作为索引时, 数组就无法满足需要了.

而 Map 集合可以保存多个键-值对(key-value), Set 集合可以保存多个元素.

对Map 和 Set 一般不会逐一遍历其中的元素. Map 一般用来存储需要频繁取用的数据, Set 一般用来判断某个值是否存在其中.

ES 5 中对 Map 和 Set 的模拟方法

在ES 5 中,没有 Set和Map集合, 一般使用对象来模拟这两种集合, 对象的属性作为键(key), 以属性值作为值(value), 即以 property: property-value 来模拟 key-value 的形式. 具体实现如下:

模拟 Map 的键值对集合:

// 创建一个 Map 对象
var map = Object.create(null); // 添加属性和属性值, 即 添加 key 和 value
map.key1 = 'value 1';
map.key2 = {}; // 取得 key 对应的 value
console.log(map.key1); // "value 1"
console.log(map.key2); // "Object {}"

模拟 Set :

// 创建一个 Set 对象
var set = Object.create(null); // 添加属性和属性值, 即 添加 key 并令其值为 true, 即表示这个key存在于集合中
set.key = true; // 判断 key 是否存在, 然后进行下一步的操作
if(set.key) { ... }

用对象模拟这两种集合的缺陷

  1. 由于对象中的属性名必须是字符串, 如果传入的不是字符串则会强制转换成对应的字符串类型(强制转换方面的知识可以看这篇文章点击
  2. 一般使用 if 语句来判断一个 key 是否存在于集合中, 当这个 key 对应的 value 为 false 或者可以被强制转换为 false 时, 则 if 语句认为这个key不存在.但是其实是存在的, 只不过 value = false 而已.

ES6 中的 Map 和 Set 集合

下面正式来讨论这两种集合的特点

Map

Map 中存储的是 key-value 形式的键值对, 其中的 key 和 value 可以是任何类型的, 即对象也可以作为 key . 这比用对象来模拟的方式就灵活了很多

Map 的创建和初始化

  1. 可以用new Map()构造函数来创建一个空的 Map
// 创建一个空的 Map
let map = new Map();
  1. 也可以在 Map() 构造函数中传入一个数组来创建并初始化一个 Map. 传入的数组是二维数组, 其中的每一个子数组都有两个元素, 前者会被作为 key, 后者会被作为 value, 这样就形成了一个 key-value 键值对. 例如:
// 用数组来创建一个 非空的 Map 

let array = [ // 定义一个二维数组,  数组中的每子都有两个元素
['key1' , 'value 1'], // key 是 字符串 "key1", value 是字符串 "value 1"
[{} , 10086] , // key 是个对象, value 是数值 10086
[ 5, {} ] // key 是个数值类型, value 是对象
]; let map = new Map(array); // 将数组传入 Map 构造函数中

Map 可用的 方法

  1. set(key, value): 向其中加入一个键值对
  2. get(key): 若不存在 key 则返回 undefined
  3. has(key):返回布尔值
  4. delete(key): 删除成功则返回 true, 若key不存在或者删除失败会返回 false
  5. clear(): 将全部元素清除

size 属性, 属性值为 map 中键值对的个数

遍历方法 forEach()

和数组的 forEach 方法类似, 回调函数中都包含3个参数 值, 键, 和 调用这个方法的 Map 集合本身

map.forEach(function(value,  key,  ownerMap){
console.log(key, value); // 每对键和值
console.log(ownerMap === map); // true
});

Set 集合

Set 和 Map 最大的区别是只有键 key 而没有 value, 所以一般用来判断某个元素(key)是否存在于其中.

创建和初始化方法, 和 Map 大同小异

既可以创建一个空 set 也可以用数组来初始化一个非空的set. 和 Map 不同的是, 数组是一维数组, 每个元素都会成为 set 的键.例如:

// 创建一个数组
let array = [1, 'str']; // 一维数组 // 用数组来初始化 set
let set = new Set(array);

set 的方法

  1. add(key): 往set添加一个元素, 如果传入多个参数, 则只会把第一个加入进去
let set = new Set();
set.add(1, 2, 3);
console.log(set.has(1), set.has(2), set.has(3)); // true false false 可以看到只有第一个参数被加入进了 set
  1. has(key)
  2. delete(key)
  3. clear()

遍历方法 forEach

和 Map 的 forEach 方法相似, 回调函数的参数也是3个 (value, key, ownerSet). 按道理来说因为 set 中只有 key 没有 value, 那么会掉函数中不应该存在 value 这个参数, 那么为什么这个 value 参数仍然存在呢?可能是因为 数组和 Map 的 forEach 方法的回调函数的参数都是这三个, 如果对于 Set 而改变了参数, 那么就会丢失了一致性. 这个理由......

那么既然没有 value , 那么这个value的值是什么呢?答案是和key 一样.我们可以把value和key 划等号了.下面这段代码可以验证这个说法.

set.forEach(function(value,  key,  ownerSet){
console.log(value === key, set === ownerSet); // true true
});

WeakSet 和 WeakMap

这两个集合比之前的两个集合在名字之前都加上了 Weak, 这个 Weak 可以直译成, 这个弱指的是弱引用, 那么前面不带Weak的 Set 和 Map就不弱, 就是强了, 这个强指的是强引用.

与 Set 和 Map 的区别

  • 先说表层的区别:
  1. 弱版本集合的 key 只能是对象, 对于 value 的类型没有限制.
  2. 弱版本集合没有 forEach 方法, 也没有 for in 方法, 也不能用数组来初始化(会报错).
  3. 弱版本可用的方法较少. WeakSet 只有 add, has, delete 方法可用; WeakMap 只有 set, has, get, delete 方法可用.
  • 根本区别

    弱版本的集合和它们对应的强版本根本的区别在对于对象的引用的强弱上, 而对象指的是 key 位置的对象, 即以对象为key的情况.

强弱版本对于 key 是对象时的引用机制如下:

将对象设置为 key 时, 就在集合中保存了这个对象的引用. 当这个对象没有其他引用了的时候, 即只有集合还引用着这个对象的时候, 弱类型的集合会放弃对这个对象的引用, 把这个对象从集合里移除, 不让它继续存在于集合中了, 有些“赶尽杀绝”的意思; 但是强类型的集合还会一直保存着对这个对象的引用, 就把它一直放在集合里.这就是 [WeakSet 和 WeakMap] 与 [Set 和 Map] 的根本区别.

要注意的是这个机制只作用于 key , 而 value 位置绑定的对象无论是否还存在别的引用, WeakMap 都不会放弃这个对象.只有这个位置的 key 绑定的对象没有其他引用时, 才会把 key 和 value 都放弃. 决定权在于 key 位置.

弱版本集合的主要用处

若版本集合可以用在需要生命周期管理的地方,例如保存对一个 DOM 对象的引用, 如果一个 DOM 对象使用完毕, 没有其他的引用了, 那么它应该被 垃圾回收,以免产生内存泄漏,那么弱版本的集合就最适合用来保存这样的对象了。

注意:四种集合都是有序的, 即元素被添加进去的顺序就是在内部保存的顺序. 对于用数组来初始化的集合也一样, 按照在数组中的位置依次添加进集合中.

ES6 中的 Map和Set的更多相关文章

  1. ES6中的Map集合(与java里类似)

    Set类型可以用来处理列表中的值,但是不适用于处理键值对这样的信息结构.ES6也添加了Map集合来解决类似的问题 一.Map集合 JS的对象(Object),本质上是键值对的集合(Hash结构),但是 ...

  2. ES6中的Map

    今天小编和大家一起探讨一下引用类型中的map,在其中会有一些map与数组联合应用,还有和map类似的weakmap类型的说明,这篇文章同时也增加了一些操作数组的办法和实际应用.大家也可以关注我的微信公 ...

  3. 彻底弄懂ES6中的Map和Set

    Map Map对象保存键值对.任何值(对象或者原始值) 都可以作为一个键或一个值.构造函数Map可以接受一个数组作为参数. Map和Object的区别 一个Object 的键只能是字符串或者 Symb ...

  4. ES6中的Set和Map集合

    前面的话 在ES6标准制定以前,由于可选的集合类型有限,数组使用的又是数值型索引,因而经常被用于创建队列和栈.如果需要使用非数值型索引,就会用非数组对象创建所需的数据结构,而这就是Set集合与Map集 ...

  5. ES6中map数据结构学习

    在项目中遇到一个很恶心的需求,然后发现ES6中的map可以解决,所以简单学习了一下map. Javascript的Object本身就是键值对的数据结构,但实际上属性和值构成的是“字符串-值”对,属性只 ...

  6. ES6 Set 和 Map

    ES5 模拟Set 与 Map 集合 Set 常用于检查对象中是否存在某个键名 Map集合常被用于获取已存的信息 所有对象的属性名必须是字符串,那么必须确保每个键名都是字符串类型且在对象中是唯一的 数 ...

  7. ES6新特性:Javascript中的Map和WeakMap对象

    Map对象 Map对象是一种有对应 键/值 对的对象, JS的Object也是 键/值 对的对象 : ES6中Map相对于Object对象有几个区别: 1:Object对象有原型, 也就是说他有默认的 ...

  8. ES6中的Set、Map数据结构

    Map.Set都是ES6新的数据结构,他们都是新的内置构造函数.也就是说typeof的结果,多了两个. 他们是什么:  Set是不能重复的数组.    Map是可以任何东西当做键的对象: ES6 提供 ...

  9. ES6中Set 和 Map用法

    JS中Set与Map用法 一.Set 1.基本用法 ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. ...

随机推荐

  1. Android关于RAM、ROM、SD卡以及各种内存的区别

    RAM:运行时内存.相当于PC机的内存存储,用于存储应用运行时的各种对象和变量常量等,主要作用在于提高运行速度.是唯一一种断电后数据会清除的存储器. 机身内存:相当于PC机硬盘.主要包括三块区域:RO ...

  2. 中间人攻击之ettercap嗅探

    中间人攻击: 中间人攻击(Man-in-the-MiddleAttack,简称“MITM攻击”)是一种“间接”的入侵攻击,这种攻击模式是通过各种技术手段将受入侵者控制的一台计算机虚拟放置在网络连接中的 ...

  3. string替换字符串,路径的斜杠替换为下划线

    场景 替换某个路径的所有"\"为"_". 很多时候取证需要把恶意代码文件取回来,然后清除. 如果在D:\WEB\模板制作插件\需要覆盖\CodeColoring ...

  4. 【网络编程4】网络编程基础-ARP响应(ARP欺骗之中间人攻击)

    arp欺骗->arp响应 ARP 缓存中毒(ARP欺骗) arp传送原理在于主机发送信息时将包含目标IP地址的ARP请求广播到网络上的所有主机,并接收返回消息,以此确定目标的物理地址:收到返回消 ...

  5. Python爬虫-爬取百度贴吧帖子

    这次主要学习了替换各种标签,规范格式的方法.依然参考博主崔庆才的博客. 1.获取url 某一帖子:https://tieba.baidu.com/p/3138733512?see_lz=1&p ...

  6. freeRTOS中文实用教程3--中断管理之中断服务例程中使用队列

    1.前言 消息队列不仅可以用于事件通信,还可以用来传递数据 2.实例说明消息队列的执行过程 3.主要API API名称 说明 参数 返回值 xQueueSendFromISR()完全等同于 xQueu ...

  7. v4l2文档之——color and format【转】

    转自:https://blog.csdn.net/zoe6553/article/details/17715407 v4l2文档第五A--颜色与格式    颜色与格式这是不定期发布的关于写视频驱动程序 ...

  8. 常见的移动端Web页面问题

    移动端Web需要照顾触摸操作的体验,以及更多的屏幕旋转与尺寸适配等问题,非常琐碎,在这里为大家倾力总结多条常见的移动端Web页面问题解决方案,欢迎收看收藏! 1.安卓浏览器看背景图片,有些设备会模糊 ...

  9. (并发编程)进程IPC,生产者消费者模型,守护进程补充

    一.IPC(进程间通信)机制进程之间通信必须找到一种介质,该介质必须满足1.是所有进程共享的2.必须是内存空间附加:帮我们自动处理好锁的问题 a.from multiprocessing import ...

  10. mysql的日志及利用mysqldump备份及还原

    日志文件:6类       一般查询日志:log,general_log,log_output       慢查询日志:       错误日志       二进制日志       中继日志       ...