es6数据结构Map

责编:menVScode 2018-02-23 16:57 阅读(560)

        数据结构 Map 是典型的字典型数据结构,是用来存储不重复key的Hash结构。不同于集合(Set)的是,字典的使用的是 [键、值] 的形式来存储数据的。

        JavaScript 的对象(Object:{ })只能用字符串当作键,这给它的使用带来了很大的限制。

var data1 = {a:1}, data2 = {b:2}, obj = {};
obj[data1] = 1;
obj[data2] = 2;
console.log(obj) // {[object Object]: 2}

//可见obj对象值添加了最后一项,这是因为浏览器引擎发现所添加的key是一个对象的时候,会调用这个对象的toString()方法,将这个对象变成字符串

        为了解决这个问题,ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object的结构提供了“字符串-值”的对应,而 Map 结构提供了”值-值“对的数据结构,键名不仅可以是字符串,也可以是对象,是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更适合。


        1、如何创建一个 Map,Map 本质上是构造函数

const map = new Map([ 
    // 里面的数组是键值对的形式
    ['a',1], //初始化了键为a值为1的一个值
    ['b',2]
]); // 可以接受一个参数:二维数组的参数

console.log(map); // Map {"a" => 1, "b" => 2}


        2、Map 类的属性 :size属性-->当前对象元素的个数

const map = new Map([ //里面的数组是键值对的形式
    ['a',1], //初始化了键为a值为1的一个值
    ['b',2]
]); // 可以接受一个参数:二维数组的参数

console.log(map.size); // 2


        3、Map 类的方法

        [1] set( key,value ):设置键名 key 对应的键值为 value,返回整个 Map 结构,因此可支持链式添加。如果 key 已经有值,则键值会被更新,否则就新生成该键。

const map = new Map([ 
    ['a',1],
    ['b',2]
]); 

map.set('mvc','menvscode').set('fe','wzc')
console.log(map); // {"a" => 1, "b" => 2, "mvc" => "menvscode", "fe" => "wzc"}

        Map数据结构的键值对,键可以是对象。

const map1 = new Map()
const objkey = {p1: 'v1'}

map1.set(objkey, 'hello')
console.log(map1.get(objkey)) // hello


        [2] get( key ):get 方法读取 key 对应的键值,如果找不到 key,返回undefined。

const map = new Map([ 
    ['a',1], ['b',2]
]); 

map.set('mvc','menvscode').set('fe','wzc')
console.log(map.get('mvc')); // menvscode
console.log(map.get('qiand')); // undefined

        [3] delete( key ):删除某个键,返回 true。如果删除失败,返回 false。

const map = new Map([ 
    ['a',1], ['b',2]
]); 

map.set('mvc','menvscode').set('fe','wzc')
console.log(map.delete('a'));//true
console.log(map); // {"b" => 2, "mvc" => "menvscode", "fe" => "wzc"}
console.log(map.delete('a')); //false

        [4] has( key ):判断某个键是否存在当前 Map 对象之中,返回一个布尔值。

const map = new Map([ 
    ['a',1], ['b',2]
]); 

map.set('mvc','menvscode').set('fe','wzc')
map.delete('a')
console.log(map.has('a')); // false
console.log(map.has('mvc'));// true

        [5] clear():清除所有数据,没有返回值

map.clear();

        [6] keys():返回键名的遍历器

const map = new Map([ 
    ['a',1], ['b',2]
]); 

map.set('mvc','menvscode').set('fe','wzc')
console.log(map.keys()); // {"a", "b", "mvc", "fe"}

        [7] values():返回键值的遍历器

const map = new Map([ 
    ['a',1], ['b',2]
]); 

map.set('mvc','menvscode').set('fe','wzc')
console.log(map.values()); // {1, 2, "menvscode", "wzc"}

        [8] entries():返回键值对的遍历器

const map = new Map([ 
    ['a',1], ['b',2]
]); 

map.set('mvc','menvscode').set('fe','wzc')
console.log(map.entries()); // {["a", 1], ["b", 2], ["mvc", "menvscode"], ["fe", "wzc"]}

        [9] forEach():使用回调函数遍历每个成员

const map = new Map([ 
    ['a',1], ['b',2]
]); 

map.set('mvc','menvscode').set('fe','wzc')
map.forEach(function(key,value,map){ //参数:键、值、数据本身
    console.log(key+':'+value)
})


        Map数据结构在使用过程中注意事项

        [1] NaN和其本身是不相等,但在Map数据结构中NaN是同一个键。

const map = new Map([ 
    ['a',1], ['b',2]
]); 

map.set(NaN,10).set(NaN,100)
console.log(map); // {"a" => 1, "b" => 2, NaN => 100}

        [2] 在Map数据结构中键为空对象的时候,因为引用类型的对象,两个空对象的内存地址不一样。

const map = new Map([ 
    ['a',1], ['b',2]
]); 

map.set({},10).set({},100)
console.log(map); // {"a" => 1, "b" => 2, Object {} => 10, Object {} => 100}

        可以发现Map的数据结构的键是内存地址绑定,只要内存地址不一样,就视为两个键,这样就从根本上解决了同名碰撞的问题。

        [3] 在Map里面的key的排列顺序是按照添加顺序进行排列的。

标签: Map es6
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码