当前位置:首页 > Es6 Map数据结构 (读阮老师Es6基础笔记)

Es6 Map数据结构 (读阮老师Es6基础笔记)

发布于 2018-04-28 阅读 201 次 Javascript ES6

首先简单解释一下什么是Map,为毛有它

javascript有Object来表示键值对的数据结构,大家都知道,但是这种结构只能用字符串来定义键名,偏偏我们就是傲娇,
看我傲娇的小眼神我就想用其他的数据类型来定义键值,所以es6就给了我们这个蛋糕Map来响应广大需求者的号召,没错Map就是这么任性,想用什么类型来表示键名,都是阔以的,对象,数组,bool统统都木有问题,只要你喜欢,随便用

首先说说如何定义一个Map

构造函数定义,add一个个的添加

var map = new Map();
map.set('a', 123);
map.set('b', 456);
map.set({},123);
map.get('a'); //123
map.get('b'); //456


太麻烦,一个个的添加不是我懒人的风格,来个简单的

数组生成大法,Set生成 Map生成

其实只要是具有Iterator接口,且每个成员都是具有双元素数组的数据结构都可以生成Map

const mapFromArr = new Map([
  ['name', 'Xiaoyaoji'],
  ['age', '18']
]);

var set = new Set([
    ['name', 'Xiaoyaoji'],
    ['age', '18']
])
const mapFromSet = new Map(set);

const mapFromMap = new Map(mapFromArr);

Map的方法和属性

属性
——Map.prototypeof.size //获取Map数据结构的成员数量
——Map.prototypeofconstructor //获取构造函数,默认是Map
方法
has()//判断是否有某个成员,返回bool
delete() //删除某个成员 返回bool
get() //获取某个成员的值
set() //设置某个成员的值 返回整个Map结构
clear() //清空Map,没有返回值

var set = new Set([
    ['name', 'Xiaoyaoji'],
    ['age', '18']
])
const map = new Map(set);
map.has('a'); //false
map.has('name'); //true
map.delete('name');
map.get('name') //undefined
map.set('name','Doubibi'); //true
map.get('name');//Doubibi

get()取值注意

Map的键值适合键的内存地址绑定的,所以要得到相同的值,必须键值是两个绝对相等的值,所以下面的代码会返回undefined,因为{}和{}是不同的地址引用,所以下面代码的最后一行返回的是undefined,虽然NaN和NaN不严格相等但是,Map数据结构认为是取同一个值

var map = new Map();
map.set('a', 123);
map.set('b', 456);
map.set({},123);
map.get('a'); //123
map.get('b'); //456
map.get({}); //undefined

由下图可以看出Map的Iterator接口是entries方法,其遍历方法类似Set

所以可以用for of遍历Map

for(let [key,value] of map){
    console.log(key,value)
}

Map 还有一个forEach方法,与数组的forEach方法类似,也可以实现遍历。

map.forEach(function(value, key, map) {
    console.log("Key: %s, Value: %s", key, value);
});

Map和其他类型的相互转换

//Map转成数组
var arr = [...map];
var arr2 = Array.From(map);