MapObject本质上是一个键值对的集合(Hash结构),但是Object只能使用字符串作为键,这给Object带来了很大的局限性。letdata={}lets={name:'EasternUndefeated'}data[s]='WesternUndefeated'//如果key传入非字符串值,则自动为字符串console.log(data);//{[objectObject]:'西秋白'}console.log(data['[objectObject]']);//为了解决这个问题,es6提供了Map数据结构。它类似于对象,也是键值对的集合,但键不限于字符串,各种类型的值都可以作为键。Object结构:stringkey:valueMap结构:valuekey:valueletdata2=newMap()lets2={name:"IntroductiontoArt"}data2.set(s2,'中国工艺美术史')console.日志(data2.get(s2));//中国工艺美术史console.log(data2);//key:{name:'IntroductiontoArt'},value:"中国工艺美术史"上面的案例使用了Map的set方法,使用s2作为data2的key,使用get方法获取价值。Map的一些常用方法方法说明set()向Map对象添加一个具有指定键(key)和值(value)的新元素get()用于获取Map对象中的指定元素has()返回一个booleanvalue表示Map中是否存在元素delete()删除对应的元素大小返回Map的成员个数clear()清除Map的所有成员,没有返回值letdata2=newMap()lets2={name:《美术概论》}data2.set(s2,'中国工艺美术史')data2.size;//1data2.has(s2);//treudata2.delete(s2);//truedata2.has(s2);//falsedata2.clear();//undefinedMap参数Map可以接收一个数组作为参数,数组的成员是单个键值对的数组letmap=newMap([['name','东方不败'],['title','西乞']])console.log(map.size);//2console.log(地图);//{"name"=>"东方不败"},{"title"=>"西方不败"}console.log(map.has('name'));//trueconsole.log(map.get('name'));//东方不败注意:如果有多个相同的键,后面的键值会被覆盖前面的键值不仅是数组,任何具有Iterator接口且每个成员都是两个元素的数组的数据结构可以作为Map构造函数的参数,Set和Map也可以作为参数生成一个新的MapSetletset=newSet([['a',1],['b',2]])letm=newMap(set)console.log(m);//{'a'=>1,'b'=>2}console.log(m.get('a'));//1Map作为参数letmap2=newMap([['text','世界近代设计史'],['name','王守志']])letm2=newMap(map2)console.log(m2);//{'text'=>'世界现代设计史','name'=>'王守志'}console.log(m2.get('text'));//世界现代设计史console.log(m2.get('hello'));//读取一个不存在的key会返回undefinedMap只有对同一个对象的引用才被认为是同一个keyletmap3=newMap()map3.set(['a',100])console.log(map3.get(['A']));//undefined因为数组不是引用类型,生成多个数组,它们的内存地址不同。其实就是基本数据类型和引用数据类型的应用。这里的两个['a']看似一样,其实是两个不同的值。地图只有相同的对象。引用被认为是同一个key,没有读到则返回undefined。请看下面的例子letmap4=newMap()letb=['b']letb2=['b']map4.set(b)console.log(map4.get(b2));//undefinedMap的值实际上绑定了内存地址。如果内存地址不同,key也会不同(即使名字完全一样)。在这里,Map解决了同名属性冲突的问题,我们在使用别人的库时,以对象名作为key,就不用担心自己的属性和别人的属性一样了。如果Map的key是一个简单数据类型的值,比如:number,string,boolean,只要两个值严格相等,Map就会被认为是同一个key,例如:0和-0是同一个key,布尔值true和字符串true是不同的key,null和undefined也是不同的key。NaN被视为相同的键。让n=newMap()n.set(0,100)console.log(n.get(-0));//100n.set(5,123)console.log(n.get('5'));//undefinedn.set(true,100)console.log(n.get(1));//undefinedn.set(NaN,123)console.log(n.get(NaN));//123n.set(null,100)console.log(n.get(null));//100console.log(n.get(undefined));//undefinedMap遍历方法Map提供了三个遍历器生成函数和一个遍历方法方法说明Map.prototype.keys()返回键名迭代器。Map.prototype.values()返回一个键值迭代器。Map.prototype.entries()返回所有成员的迭代器。Map.prototype.forEach()遍历Map的所有成员。定义数据letm3=newMap([['a',100],['b',200],['c',300]])keys/*keys*/for(letkofm3.keys()){控制台.日志(k);//abc}values/*values*/for(letkofm3.values()){console.log(k);//100200300}entriesfor(letkofm3.entries()){console.log(k);//['a',100]['b',200]['c',300]console.log(k[0],k[1]);//a100b200c300}//orfor(let[k,v]ofm3.entries()){console.log(k,v);//a100b200c300}forEachm3.forEach(el=>console.log(el))//100200300m3.forEach((val,index)=>console.log(val,index))//100'a'200'b'300'c'Map数据结构转换Map转数组使用展开运算符将Map结构转换为数组leta=newMap([['a',1],['b',2],['c',3]])控制台。日志([...a.keys()]);//['a','b','c']console.log([...a.values()]);//[1,2,3]console.log([...a.entries()]);//['a',1]['b',2]['c',3]console.log([...a]);//['a',1]['b',2]['c',3]转换后的数组是真正的数组,可以使用数组的方法letback=[...a].filter((val,index)=>val[1]==2)console.log(返回);//['b',2]arraytoMapleta2=newMap([['name','东方无敌'],[{num:3},['abc']]])console.log(a2);//0:{"name"=>"东方不败"}1:{Object=>Array(1)}Maptoobjectleta3=newMap().set('a',100).set('b',200)/*通过函数传递map*/functionmapToObj(mapVal){//内部创建一个空对象letobj={}//遍历map结构,给空对象赋值for([k,v]ofmapVal){obj[k]=v}returnobj}letmObj=mapToObj(a3)console.log(mObj);//{a:100,b:200}如果有非字符串键名,则将其转换为字符串,然后创建一个对象键名对象映射到letobj={'a':123,'b':456}letmObj2=newMap(Object.entries(obj))console.log(mObj2);//{'a'=>123,'b'=>456}MaptoJSONMaptoJSON需要区分两种情况1.Map键名是字符串2.有非字符串的Map键名1.Map键名都是字符串。可以写一个通用函数将Map转成JSONletj=newMap().set('name','Orient').set('text','undefeated')//mapToObj是将Map对象转换的函数在上面创建letshiftStrJson=(mapVal)=>JSON.stringify(mapToObj(mapVal))console.log(shiftStrJson(j));//'{"name":"Oriental","text":"Undefeated"}'2、如果Map键名有非字符串函数functionshiftMaptoArrayJson(mapVal){returnJSON.stringify([...mapVal])}letj2=newMap().set('name','Orient')。set('text','unbeaten')letshiftStrJson2=shiftMaptoArrayJson(j2)console.log(shiftStrJson2);//'[["name","Oriental"],["text","unbeaten"]]'上面两种转换结果:JSONtoMapJSONtoMap需要区分两种情况1.mapkeynames都是字符串2.Mapkeynameshavenon-stringnames1.keynames都是字符串letstrObj='{"name":"Oriental","text":"Undefeated"}'letstrMap=newMap(Object.entries(JSON.parse(strObj)))console.log(strMap);//{'name'=>'Oriental','text'=>'unbeaten'}2.如果键名不是字符串让strObj2='[["name","Oriental"],["text""不败"]]'letstrMap2=newMap(JSON.parse(strObj2))console.log(strMap2);//{'name'=>'Eastern','text'=>'Undefeated'}案例源码:https://gitee.com/wang_fan_w/es6-science-institute如果您觉得本文对您有帮助,请点亮星星
