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

一、Map

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

1.对象 和 Map

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

var keyObj = {}

var dataObj = {}

dataObj[keyObj] = '大家好'

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

虽然表面上看 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() // 清空

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

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)

})

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

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 遍历

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

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

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

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

for (let elem of mapData) {
  console.log(elem) // 此处 elem 输一个数组形式的键值对
}

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

var keyIterator = mapData.keys()  // 键遍历器

console.log(keyIterator)

var valueIterator = mapData.values() // 值遍历器

console.log(valueIterator.next().value) // 遍历器用法 (有几个,就需要 next 几次)

console.log(valueIterator)

var size = mapData.size()  // 键值对数量

console.log(size)

二、WeakMap 数据结构

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

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

var wm = new WeakMap()

var obj = new Object()

wm.set(obj,'对象1')

obj = null  // 或 wm.delete(obj)

console.log(wm.get(obj))   // undefined

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. [APIO2007]动物园 --- 状压DP

    [APIO2007]动物园 题目描述 新建的圆形动物园是亚太地区的骄傲.圆形动物园坐落于太平洋的一个小岛上,包含一大圈围栏,每个围栏里有一种动物. 如下图所示: 你是动物园的公共主管.你要做的是,让每 ...

  2. uoj386 【UNR #3】鸽子固定器

    link (似乎很久没写题解了) 题意: n个物品,每个物品有a,b两个值,给定A,B,现在最多选其中m个,要求最大化选出的物品中[b权值和的B次方-a极差的A次方]. $n\leq 2\times ...

  3. linux常见命令集合(下)

    1. tar zcvf backup-$(date "+%Y-%m-%d").tar.gz demo01dir 常用命令集合 echo helloworld date “+%y-% ...

  4. jquery-ajax请求:超时设置,增加 loading 提升体验

    前端发送Ajax请求到服务器,服务器返回数据这一过程,因原因不同耗时长短也有差别,且这段时间内页面显示空白.如何优化这段时间内的交互体验,以及长时间内服务器仍未返回数据这一问题,是我们开发中不容忽视的 ...

  5. 如果内容很长ueditor编辑辑器怎么出现滚动条

    在开发网站的时候,有的页面需要加载ueditor编辑器,如果内容很长,默认设置的时候编辑器会根据内容拉长,而不是页面出现滚动条,如果拖动页面滚条,会比较麻烦,要拖动很长才能看到提交按钮. 如何才能让编 ...

  6. Codeforces Round #247 (Div. 2) ABC

    Codeforces Round #247 (Div. 2) http://codeforces.com/contest/431  代码均已投放:https://github.com/illuz/Wa ...

  7. NFC TI TRF7970A Breakout Board for BusPirate or other HW

    http://dangerousprototypes.com/forum/viewtopic.php?f=19&t=3187 Just a news about a new Hardware ...

  8. 修改gnome-shell扩展“Applications Menu”的菜单区域宽度。

    sudo打开 /usr/share/gnome-shell/extensions/apps-menu@gnome-shell-extensions.gcampax.github.com/extensi ...

  9. 字符串型MySQL查询条件需要注意的一点

    最近在工作中遇到了数据库服务器产生很多读写队列的问题,于是要求大家开始优化我们的SQL语句. 下面是查询quotedata_history表中的code字段的SQL语句,其中code字段的类型是var ...

  10. java获取指定日期之前或之后的时间

    /** * 前/后?分钟 * * @param d * @param minute * @return */ public static Date rollMinute(Date d, int min ...