ES6的Map,Set集合,新的数据结构
2017-04-03 14:54

ES6的Map,Set

ES6新增了Map,Set集合,这两个数据结构跟后台java中的Map,Set集合很像。我认为ES6提供这两个数据结构的最大用意是为了能使后台数据结构更方便的转换成JS中的数据结构。

Map,Set跟Object和Array还是有一些区别的。

先说Map,Map中的key值可以是任意数据结构,而Object的key值只能是String字符串。

在看Set,Set中的数值是不能重复的,而Array是可以重复的。

这是他们最重要的一点区别。

Map对象

Map对象的操作提供了一些简便的方法。

var map=new Map();
map.set("age",23);
map.set("name","mooshine");
var fn=function(){};
map.set(fn,"this is a function");
console.log("map's size:"+map.size);
console.log("map's keys:");
console.log(map.keys());
console.log("map's age:"+map.get("age"));
console.log("map has fn:"+map.has(fn));
console.log("map's values:");
console.log(map.values());
console.log("map's sex:"+map.get("sex"));
console.log("map iterator everyone--------");
var it=map.entries();
var tmp;
while((tmp=it.next()).done!=true) {
    var [key,val]=tmp.value;
    console.log(key + ":" + val);
}
console.log("delete one in map");
map.delete("name");
console.log("map forEach everyone-------");
map.forEach(function(val,key,mp){
    console.log("map's "+key+":"+val);
});
console.log("clear map");
map.clear();
console.log("map's size:"+map.size);

console.log("以数组创建map");
var map2=new Map([[1,2],[3,4],[5,6]]);
console.log(map2);

打印结果如下:

blob.png

创建Map,可以通过new Map()的方式创建,也可以通过传入一个iteratable的对象创建,这个对象要有key,value值,就像上面通过数据创建Map对象一样。

通过map.size可以获取map的大小。

通过map.keys()可以获取map中key组成的迭代器。

通过map.get("age")可以获取map中key对应的value值,没有此key时返回undefined。

通过map.has(fn)可以判断map中是否包含某个key值。

通过map.values()可以获取map中value组成的迭代器。

通过map.entries()可以获取map的迭代器进行迭代,迭代器的value值是[key,value]数组格式的。

通过map.forEach()可以对map进行遍历,forEach的回调函数接收三个参数,callback(value,key,map),value是map每一项的value值,key是key值,map是map对象本身。

通过map.clear()可以清空map对象,清空后map.size为0。

而如果我们使用Object创建一个类map对象,那么上面的这些个方法都要自己实现才行,就连获取元素个数的size也要自己计算才能获得。所以作为数据结构的存储,Map比Object更加合适。

map对象的set方法返回的是Map对象本身,所以map的set可以采用链式写法:

map.set("age",23).set("name","mooshine");


Set集合

Set集合中不允许有重复的值,Set集合提供的方法有很多相同的。

Set集合的方法:

创建Set集合

var set=new Set();
var set2=new Set([1,3,6,3,8]);
console.log(set2);

结果如下:

blob.png

通过传入数组创建Set集合时,会过滤掉数组中重复的项。

给Set集合添加一项内容

var set=new Set();
set.add("mooshine");
set.add("23");
set.add("boy");
set.add("mooshine");
console.log(set);

打印结果如下:

blob.png

通过add方式添加子项时,同样会过滤掉重复的值。add方法添加元素返回的是set结合本身,所以可以进行链式操作。

set.add("mooshine").add(23).add("boy");


从Set集合中删除一项内容

var set=new Set();
set.add("mooshine");
set.add("23");
set.add("boy");
set.delete("23");
console.log(set);

结果如下:

blob.png

通过delete方法,成功将add的23给删除了,注意这里的delete(23)是删除不了add("23")的,因为他们不是相等的值。

Set集合的其他方法给Map一样。

set.size 用于获取set中的元素个数。

set.clear() 用于清空set集合。

set.has("23") 用于判断set集合中是否包含某项值。

set的遍历也有两个方法,一种是通过set.entries()方法得到迭代器,一种是通过forEach方法来遍历,跟Map很类似

var it=set.entries();
var tmp;
while((tmp=it.next()).done!=true){
    let [key,val]=tmp.value;
    console.log(key+":"+val);
}
set.forEach(function(val,index,st){
    console.log(index+":"+val);
});

打印结果如下:

blob.png

在Set集合中迭代器返回结果的value值仍然是一个数组[value,value],只不过两项都是value值,forEach中的val,index两项也都是value值。

同理,set.keys(),set.values()返回的也都是value值组成的迭代器。他们两个在set集合中的作用是一样的。

所以在set集合中遍历元素,有四种方式:set.entries(),set.forEach(),set.keys(),set.values()。


原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(825)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1