1 ES6新增的数据结构 Map 的用法;
2 JavaScript的Object本身就是键值对的数据结构,但实际上属性和值构成的"字符串-值"对,属性只能是字符串
,如果传个对象字面量作为属性名,那么会默认把对象转换为字符串,结果这个属性名就编程了"[object Object]"。
3 ES6提供了"值-值"对的数据结构,键名不仅可以是字符串,也可以是对象。它是一个更完善的Hash结构。
4 特性:
5 1,键值对,键可以是对象。
6 const map1 = new Map();
7 const objkey = {p:"v1"};
8
9 map1.set(objkey,"hello");//设置属性给map对象。
10 console.log(map1.get(objkey));//;利用Map的方法get()方法获取到键值。
11 结果:
12 console.log(map1.get(objkey));//hello
13 2,Map 可以接受数组作为参数,数组成员还是一个数组,其中有两个参数,一个表示键一个表示值。
14 const map2 = new Map(['name','aissen'],['age',12]);
15 console.log(map2.get('name'));//aissen
16 console.log(map2.get('age'));//12
17
18 操作:
19 1,size
20 获取map的大小。
21 const map3 = new Map();
22 map3.set('k1',1);
23 map3.set('k2',2);
24 map3.set('k3',3);
25 console.log('%s',map3.size);//3
26
27 2,set
28 设置毽值对,毽可以是各种类型,包括undefined,function。
29 const map4 = new Map();
30 Map4.set('k1',6); //键是字符串
31 Map4.set(222,'哈哈哈');//键是数值
32 Map4.set(undefined,'gagaga');//键是undefined
33 const fun = function(){console.log('hello');};
34 map4.set(fun,'fun');//键是function
35
36 console.log('map4 size:%s',map4.size);
37 console.log('undefined value :%s',map4.get(undefined));
38 console.log('fun value:%s',map4.getfun(fun));
39
40 结果:
41 map4.size:4;
42 undefined value: gagaga;
43 fun value:fun
44 也可对set进行链式调用。
45 map4.set('k2',2).set('k3',4).set('k4',5);
46 console.log('map4 size:%s',map4.size);
47 结果:
48 map4 size:7;
49
50 3,get
51 获取键对应的值。
52 const map5 = new Map();
53 map5.set('k1',6);
54 console.log('map5 value:%s',map5.get('k1'));
55 结果:
56 map5 value:6;
57 4,has
58 判断指定的键值是否存在。
59 const map6 = new Map();
60 map6.set(undefined,4);
61 console.log('map6 undefined:%s',map6.has(undefined));
62 console.log('map6 k1:%s',map6.has('k1'));
63 结果:
64 map6 undefined:true;
65 map6 k1: false;
66 5,delete
67 删除键值对。
68 const map7 = new Map();
69 map7.set(undefined,4);
70 map7.delete(undefined);
71 console.log('map7 undefined:%s',map7.has(undefined));
72 结果:
73 map7 undefined:false;
74 6,clear
75 删除map所有的键值对。
76 const map8 = new Map();
77 map8.set('k1',1);
78 map8.set('k2',2);
79 map8.set('k3',3);
80 console.log('map8,pre-clear size:%s',map8.size);
81 map.8clear();
82 console.log('map8,post-clear size:%s',map8.size);
83 结果:
84 map.8,pre-clear size:3;
85 map.8,post-clear size:0;
86
87 遍历
88 1,key()
89 遍历map的所有key。
90 const map9 = new Map();
91 map9.set('k1',1);
92 map9.set('k2',2);
93 map9.set('k3',3);
94 for(let key of map9.keys()){
95 console.log(key);
96 }
97 结果:
98 k1,k2,k3
99 2,values
100 遍历map所有的值。
101 for(let value of map9.values()){
102 console.log(value);
103 }
104 结果:
105 1,2,3
106 3,entries()
107 遍历map的所有的键值对。
108 方法1:
109 for(let item of map9.entries()){
110 console.log(item[0],item[1]);
111 }
112 结果:
113 k1 1
114 k2 2
115 k3 3
116 方法2:
117 for(let [key,value] of map9.entries()){
118 console.log(key,value);
119 }
120 结果不变。
121 4,forEach()
122 遍历map的所有的键值对。
123 map9.forEach(function(value,key,map){
124 console.log("key:%s,value:%s"key,value);
125 });
126 key:k1,value:1;
127 key:k2,value:2;
128 key:k3,value:3;
129 forEach有第二个参数,可以用来绑定this。
130 这样有个好处,map的存储的数据和业务处理对象可以分离,业务处理对象可以尽可能的按职责分割的明确符合SRP原则。
131 const output = {
132 log:function(key,value){
133 console.log("key:%s,value:",key,value);
134 }
135 };
136 map9.forEach(function(value,key,map){
137 this.log(key,value);
138 },output);
139 和其他结构的互转
140 1 Map To Array
141 使用扩展运算符三个点(...)可将map内的元素都展开的数组。
142 const map10 = new Map();
143 map10.set('k1',1);
144 map10.set('k2',2);
145 map10.set('k3',3);
146 console.log([...map10]);
147 结果:
148 [['k1',1]['k2',2]['k3',3]]
149 2,Array To Map;
150 使用数组构造Map。
151 const map11 = new Map([
152 ['name','aissen'],
153 ['age',12]
154 ]);
155 console.log(map11);
156 结果:
157 Map{'name'=>'aissen','age'=>12}
158 3,Map To Object
159 写一个转换函数,遍历map的所有元素,将元素的键和值作为对象属性名和值写入Object中。
160 function mapToObj(map){
161 let obj = Object.create(null);
162 for(let [k,v] of map){
163 obj[k] = v;
164 }
165 return obj;
166 }
167 const map12 = new Map().set('k1',1).set({pa:1},2);
168 console.log(mapToObj(map12));
169 结果:
170 { k1: 1, '[object Object]': 2 }
171 4,Object To Map
172 同理,再写一个转换函数便利Object,将属性名和值作为键值对写入Map。
173 function objToMap(obj){
174 let map = new Map();
175 for(let k of Object.keys(obj)){
176 map.set(k,obj[k]);
177 }
178 return map;
179 }
180 console.log(objToMap({yes:true,no:false}))
181 结果:
182 Map { 'yes' => true, 'no' => false }
183 5,Set To Map
184 const set= new Set([['foo',1],['bar',2]]);
185 const map13 = new Map(set);
186 console.log(map13);
187 结果:
188 Map{'foo'=> 1,'bar'=>2}
189 6,Map To Set
190 function mapToSet(map){
191 let set = new Set();
192 for(let [k,v] of map){
193 set.add([k,v]);
194 }
195 return set;
196 }
197 const map14 = new Map().set('k1',1).set('k2',2);
198 console.log(mapToSet(map14));
199 结果:
200 Set{ [ 'k1' , 1 ],[ { pa : 1 } , 2] }