ES6 map数据结构
1,map数据结构存在的意义
Javascript的Object本身就是键值对的数据结构,但实际上属性和值构成的是”字符串-值“对,属性只能是字符串,如果传个对象字面量作为属性名,那么会默认把对象转换成字符串,结果这个属性名就变成”[object Object]“。ES6提供了”值-值“对的数据结构,键名不仅可以是字符串,也可以是对象--map。它是一个更完善的Hash结构。
2,map的特性
1.键值对,键可以是对象。
const map1 = new Map() const objkey = {p1: 'v1'} map1.set(objkey, 'hello') console.log(map1.get(objkey))//hello
2.Map可以接受数组作为参数,数组成员还是一个数组,其中有两个元素,一个表示键一个表示值。
const map2 = new Map([ ['name', 'Aissen'], ['age', 12] ]) console.log(map2.get('name'))//Aissen
console.log(map2.get('age'))//12
3,map的方法
1 set +get +size
let map1=new Map();
map1.set('name','lili')
map1.get('name')//lili
map1.size()//1
map1.set('k1', 6) // 键是字符串 map1.set(222, '哈哈哈') // 键是数值 map1.set(undefined, 'gagaga') // 键是 undefined const fun = function() {console.log('hello');} map1.set(fun, 'fun') // 键是 function
map1.get(undefined)//gagaga
map1.get(fun)//fun
map1.set('k2', 2).set('k3', 4).set('k4', 5)
2.has
判断指定的键是否存在。
const map6 = new Map(); map6.set(undefined, 4) console.log('map6 undefined: %s', map6.has(undefined)) console.log('map6 k1: %s', map6.has('k1'))
结果:
map6 undefined: true map6 k1: false
3.delete
删除键值对。
const map7 = new Map(); map7.set(undefined, 4) map7.delete(undefined) console.log('map7 undefined: %s', map7.has(undefined))
结果:
map7 undefined: false
4.clear
删除map中的所有键值对。
const map8 = new Map(); map8.set('k1', 1); map8.set('k2', 2); map8.set('k3', 3); console.log('map8, pre-clear size: %s', map8.size) map8.clear() console.log('map8, post-clear size: %s', map8.size)
结果:
map8, pre-clear size: 3 map8, post-clear size: 0
4,map遍历: for of + forEach
const map9 = new Map(); map9.set('k1', 1); map9.set('k2', 2); map9.set('k3', 3);
for (let key of map9.keys()) { console.log(key);//k1,k2,k3 }
for (let value of map9.values()) { console.log(value);//1,2,3 }
for (let item of map9.entries()) { console.log(item[0]+':', item[1]);//k1:1,k2:2,k3:3
}
for (let [key, value] of map9.entries()) { console.log(key+':',value);//k1:1,k2:2,k3:3
}
map9.forEach(function(value, key, map) { console.log("Key: %s, Value: %s", key, value); });
Key: k1, Value: 1 Key: k2, Value: 2 Key: k3, Value: 3
注意:对象+数组的新方法 obj.keys() obj.values() obj.entries()
5,map的扩展(用处不大)
1.Map To Array
使用扩展运算符三个点(...)可将map内的元素都展开的数组。
const map10 = new Map(); map10.set('k1', 1); map10.set('k2', 2); map10.set('k3', 3); console.log([...map10]);
结果:
[ [ 'k1', 1 ], [ 'k2', 2 ], [ 'k3', 3 ] ]
2.Array To Map
1 使用数组构造Map。
const map11 = new Map([ ['name', 'Aissen'], ['age', 12] ]) console.log(map11)
结果:
Map { 'name' => 'Aissen', 'age' => 12 }
2 使用Object.entries()方法。
var obj2 = {foo:'bar',baz:42}; var map2 = new Map(Object.entries(obj2)); console.log(map2);
//map{"foo" => "bar", "baz" => 42}
3.Map To Object
写一个转换函数,遍历map的所有元素,将元素的键和值作为对象属性名和值写入Object中。
function mapToObj(map) { let obj = Object.create(null); for (let [k,v] of map) { obj[k] = v; } return obj; } const map12 = new Map() .set('k1', 1) .set({pa:1}, 2); console.log(mapToObj(map12))
结果:
{ k1: 1, '[object Object]': 2 }
4.Object To Map
同理,再写一个转换函数遍历Object,将属性名和值作为键值对写入Map。
function objToMap(obj) { let map = new Map(); for (let k of Object.keys(obj)) { map.set(k, obj[k]); } return map; } console.log(objToMap({yes: true, no: false}))
结果:
Map { 'yes' => true, 'no' => false }
5.Set To Map
const set = new Set([ ['foo', 1], ['bar', 2] ]); const map13 = new Map(set) console.log(map13)
结果:
Map { 'foo' => 1, 'bar' => 2 }
6.Map To Set
function mapToSet(map) { let set = new Set() for (let [k,v] of map) { set.add([k, v]) } return set; } const map14 = new Map() .set('k1', 1) .set({pa:1}, 2); console.log(mapToSet(map14))
结果:
Set { [ 'k1', 1 ], [ { pa: 1 }, 2 ] }