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. luoguP3255 [JLOI2013]地形生成 动态规划

    出题人语文真好... 各不相同的标号和高度 = 各不相同的标号 + 单独的高度... 第一问比较简单,考虑从大到小插入,在相同情况下,按关键值从小到大插入 这样子,关键大的元素一定会影响到关键小的元素 ...

  2. 2017-2018-1 JAVA实验站 冲刺 day06

    2017-2018-1 JAVA实验站 冲刺 day06 各个成员今日完成的任务 小组成员 今日工作 完成进度 张韵琪 进行工作总结.博客.小组成员头像 100% 齐力锋 找背按钮声音 100% 张浩 ...

  3. django自定义分页控件

    1.准备数据 在models创建测试表 from django.db import models class Host(models.Model): hostname = models.CharFie ...

  4. Shell脚本:“syntax error:unexpected end of file”

    这种错误只能说是坑,如果没有见到过,很可能就要摔里头.解决问题是重要的,但弄明白问题的来源,往往更为重要. 所以要先扯一下,换行和回车的历史遗留问题. 在计算机出现之前,有个玩意叫电传打字机.每秒钟可 ...

  5. bzoj 1115: [POI2009]石子游戏Kam -- 博弈论

    1115: [POI2009]石子游戏Kam Time Limit: 10 Sec  Memory Limit: 162 MB Description 有N堆石子,除了第一堆外,每堆石子个数都不少于前 ...

  6. elasticsearch聚合--桶(Buckets)和指标(Metrics)的概念

    写在前面的话:读书破万卷,编码如有神--------------------------------------------------------------------主要内容包括: 聚合的两个核 ...

  7. PAT甲级1033. To Fill or Not to Fill

    PAT甲级1033. To Fill or Not to Fill 题意: 有了高速公路,从杭州到任何其他城市开车很容易.但由于一辆汽车的坦克容量有限,我们不得不在不时地找到加油站.不同的加油站可能会 ...

  8. vue获取当前v-for里当前点击元素

    app.vue <template> <div id="app"> <ul > <li v-for="(item,index) ...

  9. div中内容超出自动换行

    下面以table中td的内容超出为例说明: 首先: td { display: block; } 然后:给td设置css样式: 1.  td { word-wrap: break-word; } 2. ...

  10. java类中属性的加载顺序,以及内存分配情况介绍

    看下面例子及说明: /** 假如有外部类调用了该类,代码为:new StaticTest(); 那么下面是类属性的加载顺序 */ public class StaticTest{ public int ...