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 属性
.