Map 和 WeakMap 是ES6 新增的数据结构

一、Map

它们本质与对象一样,都是键值对的集合,但是他们与 Object 对象主要的不同是,键可以是各种类型的数值,而Object 对象的键 只能是字符串类型或者Symbol类型值,Map 和 WeakMap 是更为完善的Hash结构。

1.对象 和 Map

//----------- 对象 --------------

var keyObj = {}

var dataObj = {}

dataObj[keyObj] = '大家好'

  1. function studyEs6() {
  2. let objKey1 = {}
  3. let objKey2 = {}
  4. let obj = new Object()
  5. obj[objKey1] = 33 // 以对象做键
  6. obj[objKey2] = 66
  7. for(let key in obj){ // fo...in 循环,主要针对 object
  8. console.log(key) // [object Object] 后面的覆盖掉前面的
  9. }
  10. }

虽然表面上看 dataObj 对象的键是对象 keyObj,其实不是,dataObj[keyObj] 会将 keyObj 转换为字符串 '[object Object]'

//------------- Map ------------

var mapData = new Map()

var objKey = {p: 'antzome'}

mapData.set(objKey,'对象键') // 添加新元素

console.log(mapData.get(objKey)) // 获取

console.log(mapData.has(objKey)) // 判断是否含有

console.log(mapData.delete(objKey)) // 删除键

mapData.clear() // 清空

  1. function studyEs6() {
  2. var mapData = new Map()
  3. var objKey1 = {}
  4. var objKey2 = {}
  5. mapData.set(objKey1,'33') // 使用set方法,添加新元素
  6. mapData.set(objKey2,'66') // 添加新元素
  7. console.log(mapData.get(objKey1)) // 获取
  8. console.log(mapData.has(objKey1)) // 判断是否含有
  9. console.log(mapData.delete(objKey1)) // 删除键
  10. mapData.clear() // 清空
  11. }

2.数组作为构造函数参数

var mapData = new Map([['webName','百度'],['url','www.baidu.com']])

console.log(mapData.size)

console.log(mapData.has('webName'))

console.log(mapData.get('webName'))

console.log(mapData.has('url'))

console.log(mapData.get('url'))

构造函数参数为数组执行的是如下算法(数组的forEach方法)

forEach 方法将会以插入顺序对Map对象中的每一个键值对执行一次参数中提供的回调函数。

value: 可选,元素的值

key: 可选,元素的键

Map: 可选,当前的Map对象

thisArg: 可选,callback执行时其this的值

mapData.forEach(function(value,key){

  console.log(value,key)

})

  1. function studyEs6() {
  2. var mapData = new Map([['webName','百度'],['url','www.baidu.com']])
  3. var objKey1 = {}
  4. var objKey2 = {}
  5. mapData.set(objKey1,'33') // 使用set方法,添加新元素
  6. mapData.set(objKey2,'66') // 添加新元素
  7. console.log(mapData.get('webName'))
  8. mapData.forEach(function(value,key){ // 第一是:值,第二个是:键
  9. console.log(key + '=' + value)
  10. })
  11. }

3.由于Map对象的键可以是对象,所以只有对同一个对象的引用,Map对象才将其视为同一个键。

NaN不严格相等于自身,但 Map 将其视为同一个键。

let mapData = new Map()

mapData.set(NaN,5)

console.log(mapData.get(NaN))

mapData.set(-0,5)

console.log(mapData.get(+0))

4.Map 遍历

//------------ 转成数组------------------

  1. var mapData = new Map([['webName','百度'],['url','www.baidu.com']])
  2. var arr = [...mapData]
  3. console.log(arr)

//----------- for--of 循环 ---------------

  1. var mapData = new Map([['webName','百度'],['url','www.baidu.com']])
  2.  
  3. for (let elem of mapData) {
  4.   console.log(elem) // 此处 elem 输一个数组形式的键值对
  5. }

//----------- 其他函数 ------------------

  1. var keyIterator = mapData.keys() // 键遍历器
  2.  
  3. console.log(keyIterator)
  4.  
  5. var valueIterator = mapData.values() // 值遍历器
  6.  
  7. console.log(valueIterator.next().value) // 遍历器用法 (有几个,就需要 next 几次)
  8.  
  9. console.log(valueIterator)
  10.  
  11. var size = mapData.size() // 键值对数量
  12.  
  13. console.log(size)

二、WeakMap 数据结构

WeakMap 结构与 Map 结构基本类似。

区别是它只接受对象作为键名,不接受其他类型的值作为键名。键名是对象的弱引用,当对象被回收后,WeakMap 自动移除对应的键值对,WeakMap 结构有助于防止内存泄漏。

  1. var wm = new WeakMap()
  2.  
  3. var obj = new Object()
  4.  
  5. wm.set(obj,'对象1')
  6.  
  7. obj = null // 或 wm.delete(obj)
  8.  
  9. console.log(wm.get(obj)) // undefined
  10.  
  11. console.log(wm.has(obj)) // false

注:由于WeakMap 对象不可遍历,所以没有 size 属性

.

Map 和 WeakMap 数据结构的更多相关文章

  1. Map和WeakMap的区别

    个人总结:在一个变量作用域中,如果结束到作用域结尾 } 的话,map中的引用会被垃圾回收机制回收的是weakmap ,map中的引用不会被垃圾回收机制回收的是map. 强引用:只要引用存在,垃圾回收器 ...

  2. ES6中Map与其他数据结构的互相转换

    最近在学习ES6的基础知识,整理了一下Map与其他数据结构相互转换的写法. Map转为数组的方法 let myMap = new Map([[true, 7], [{foo: 3}, ['abc']] ...

  3. ES6新增的Map和WeakMap 又是什么玩意?非常详细的解释

    上一篇文章讲了set和weakSet,这节咱就讲Map和weakMap是什么?这两篇文章并没有什么联系,主要知识用法类似而已.嘿嘿,是不是感觉舒服多了. 什么是Map 介绍什么是Map,就不得不说起O ...

  4. Map和WeakMap的方法和区别

    Map Map是一组键值对的结构,具有极快的查找速度. 一.构造函数不同 let map = new Map(); let weakmap = new WeakMap(); 二.内置函数不同 Map的 ...

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

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

  6. ES6 中的 Set、Map 和 WeakMap

    Set 是 ES6 新增的有序列表集合,它不会包含重复项. Set 支持 add(item) 方法,用来向 Set 添加任意类型的元素,如果已经添加过则自动忽略: has(item) 方法用来检测 S ...

  7. C++ map,set内部数据结构

    1)Set是一种关联容器,它用于存储数据,并且能从一个数据集合中取出数据.它的每个元素的值必须唯一,而且系统会根据该值来自动将数据排序.每个元素的值不能直接被改变.[重点]内部结构采用红黑树的平衡二叉 ...

  8. Js基础知识7-Es6新增对象Map和set数据结构

    前言 JavaScript中对象的本质是键值对的集合,ES5中的数据结构,主要是用Array和Object,但是键只能是字符串.为了弥补这种缺憾,ES6带来了一种新的数据结构Map. Map也是键值对 ...

  9. 纵横填字map版(初始数据结构)

    新数据结构设计: 定义一个map: key是横纵坐标字符串,比如“0,4” value是一个json,包含以下属性:字,横向的词(若 有的话,无的话,空串),纵向的词(若有的话,无的话,空串). 另有 ...

随机推荐

  1. [BZOJ4817][SDOI2017]树点涂色(LCT+DFS序线段树)

    4817: [Sdoi2017]树点涂色 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 692  Solved: 408[Submit][Status ...

  2. 【洛谷】P1052 过河【DP+路径压缩】

    P1052 过河 题目描述 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一次跳过的距离都是正整数,我们可以把独木桥上青蛙 ...

  3. hdu 1711

    读入优化有3s多. #include <cstdio> #include <cctype> #define maxn 1000010 #define maxm 10010 in ...

  4. 线段树--codevs 1690 开关灯

    codevs 1690 开关灯 USACO  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题目描述 Description YYX家门前的街上有N(2& ...

  5. python开发_python代码风格(coding style)

    我们要做python开发,我想python中的代码风格我们有必要了解一下 这样对我们自己和他们所编写的代码都有好处的. 下面是8点重要代码风格注意事项: ONE : Use 4-space inden ...

  6. 应该用H5编写APP还是用原生的呢?

    现观目前市场上的APP横行,不同行业.不同类目的APP在国内各大应用市场挤爆的满满了,那么作为一个程序员或者一个企业如何能从容的把握住制作一款实用又符合用户体验的APP呢? 自从接触APP也有四年多了 ...

  7. javascript(js)自动刷新页面的实现方法总结

    自动刷新页面的实现方法总结: 1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔 ...

  8. Level-shifting nixes need for dual power supply

    The AD736 true-rms-to-dcconverter is useful for many applications that require precise calculation o ...

  9. Digital variable resistor compensates voltage regulator

    A variable resistor that integrates a programmable, temperature-indexed look-up table can compensate ...

  10. 利用AWR 查看SQL 执行计划

    在AWR中定位到问题SQL语句后想要了解该SQL statement的具体执行计划,于是就用AWR报告中得到的SQL ID去V$SQL等几个动态性能视图中查询,但发现V$SQL或V$SQL_PLAN视 ...