ES6 Map数据结构

2019-06-28  本文已影响0人  萘小蒽

Map结构的目的和基本用法
js里面的对象(Object)本质上是键值对的集合(Hash结构),但是只能以字符串做为键。这给它带来很大的限制。

var data = {};
var element = document.getElementById('myDiv');
data[element] = 'metadata' 
data// {'[object HTMLDivElement]':'test'}

上面使用DOM节点作为对象data的健,因为对象只接受字符串为键,所以默认被转为了字符串(调用toString())。

为了解决这个问题,ES6提供了Map数据结构。

1.它类似于对象,也是键值对的集合,但是它的健不受类型的限制,各种类型的值都可以当做它的健。

  1. 对象结构是字符串和值的对应,而Map是值与值的对应,是一种更完善的Hash结构实现。
var o = {p:'hello'};
var m = new Map();
m.set(o:'cotent')
m.get(o) //'cotent'
m.has(o)  //true
m.delete(o)// true ;
m.has(o)  //false
var m = new Map([['name','张三'],['title','author']])
m //Map(2) {"name" => "张三", "title" => "author"}
var m = new Map([['name','张三'],['name','李四']])
m.get('name') // "李四"
m.set('name','王五')
m.get('name') // "王五"
var m = new Map();
m.set({name:'赵六'},'test');
m.get({name:'赵六'}); //undefined
//要区分唯一引用
var a = {name:'赵六'};
var b = {name:'赵六'};
m.set(a,'赵六,的媳妇');
m.set(b,'另一个赵六,的媳妇');
m.get(a)//'赵六,的媳妇'
m.get(b)//'另一个赵六,的媳妇'

map结构与数组以及对象之间的相互转换。

var map = new Map().set([1,2,3],"数组键的值").set('name',"余佳").set(0,[ 4, 5, 6 ])
var mapToArr = [...map]
//[ [ [1, 2, 3], "数组键的值" ] , [ "name","余佳" ] , [ 0, [4, 5, 6] ] ]
var arrToMap = new Map(mapToArr)
arrToMap.has("name") //true
function strMapToObj (strMap){
   let obj= Object.create(null);
   for(let [k,v] of strMap){
     obj[k] = v; 
    }
    return  obj;
}
function objToStrMap (obj){
   var map = new Map();
   for(let key in obj){
      map.set(key,obj[key])
    }
     return  map
}
var person = {name:'余佳', age: 25 ,};
var personMap =  objToStrMap(person);
//Map(2) {"name" => "余佳", "age" => 25}
strMapToObj(personMap)
//{name: "余佳", age: 25}

总结

  1. Map类型弥补了对象对key的限制(字符串),它接受任何类型作为它的key
  2. Map 类型和 Set 类型有着同样的实例方法,set()、get()、delete()、has()、clear() 等方法以及 sizeconstructor属性。
  3. map提供三个遍历器函数keys()、values()、entries()和一个遍历方法forEach()
  4. map可以在数组、对象、JSON等数据类型之间相互转换。
上一篇 下一篇

猜你喜欢

热点阅读