您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

ES6+ Map

前面两节我们学习了 Set 的相关,本节我们开始学习 Map 数据结构的。Map 对象和原生的 Object 类似都是存储数据的,而且也推荐使用 Map 的方式来存储数据。

在 ES5 中使用 Object 来存储对象,然而这种存储存在一些问题,比如说 Object 中的键是无序的,Object 的键只能是字符串类型等等。ES6 提供了 Map 数据结构,保存的是键值对,而且能够记住键的插入顺序,并且任何值 (对象或者原始值) 都可以作为键或值,这样极大地扩展了数据存储的场景。

在前面的 一节我们已经了解到 Map 的基本使用。和 Set 一样,Map 也是构造,不能直接使用,需要通过 new 的方式来创建 Map 实例。

var map = Map([iterable]);

Map 对象在插入数据时是按照顺序来插入的,也就是说在插入时会保持插入的位置,Object 的在插入数据时没有顺序概念。Map 对象可以被 for...of 循环,在每次迭代后会返回形式为 [key,value] 的数组,这个我们在下面的例子中会说到。

Map 的本质其实还是对象,并且它也是继承 Object 的,看下面的实例:

var map = new Map([["x", ], ["y", ]]);
console.log(map instanceof Object);   //true

从上面的中可以看出 Object 在实例 map 的原型链上。

在创建 Map 实例时可以接收数组或是可遍历的对象作为参数,这个参数内的每一项是键值的组合 [key, value] 第值时键,第二个值时键的值。

在初始化 Map 对象时,如果认参数的数组中超过两个以上的值不会被 Map 对象读取。

var map = new Map([["x", , 'a', 'b'], ["y", , 'c'], ["z", , 'd']]);
console.log(map)  // Map(3) {"x" => 1, "y" => 2, "z" => 3}

上面的中,从打印的结果可以看出,数组中超过的元素都会被忽略。

Map 提供的和从增、删、改、查几个方面入手,主要有以下 5 种:

Map 提供 size 可以 Map 实例上的长度

var map = new Map([["x", ], ["y", ], ["z", ]]);
console.log(map.size)  // 3

set()Map 实例或更新指定了键(key)和值(value)的键值对。

myMap.set(key, value);

通常情况下不会一开始就初始化值,而是动态地,或更新 Map 时需要用到 set ,可以新增和 Map 实例的值。而且 key 值可以是任意类型的,查看如下示例:

var map = new Map();

var str = 'string';
var obj = {};
var arr = [];
var fun = function() {};

map.set(str, '键的类型字符串');
map.set(obj, '键的类型对象');
map.set(arr, '键的类型数组');
map.set(fun, '键的类型');

上面的中,我们定义了不同类型的变量,使用这些变量为 map 数据。相比 Object 对象,扩展性更强了。另外还可以链式键值对:

var map = new Map();
map.set('a', ).set('b', ).set('c', );
console.log(map);   // Map(3) {"a" => 1, "b" => 2, "c" => 3}

使用链式键值对的方式比较简洁,如果需要多个值,建议使用这样的方式去。

get() 是接收指定的键(key)返回 Map 对象中与这个指定键相关联的值,如果找不到这个键则返回 undefined

myMap.get(key);

使用上面的示例,可以通过 get 对应的值:

console.log(map.get('string'));  // "键的类型字符串"
console.log(map.get(str));       // "键的类型字符串"
console.log(map.get(obj));       // "键的类型对象"
console.log(map.get(arr));       // "键的类型数组"
console.log(map.get(fun));       // "键的类型数组"

上面的可以看出,我们可以直接使用键的值去 Map 实例上对应的值,也可以通过定义变量的方式去。

has() 是用于判断指定的键是否存在,并返回 bool 值,如果指定元素存在于 Map 中,则返回 true,否则返回 false

myMap.has(key);

实例:

var map = new Map();
map.set("a", );

map.has("a");  // true
map.has("b");  // false

delete() 用于移除 Map 实例上的指定元素,如果 Map 对象中存在该元素,则移除它并返回 true;否则如果该元素不存在则返回 false

myMap.delete(key);

实例:

var map = new Map();
map.set("a", );

map.delete("a");  // true
map.has("a");     // false

clear() 会移除 Map 对象中的所有元素,返回 undefined

myMap.clear(key);

实例:

var map = new Map();
map.set("a", );

map.clear();  // 返回 undefined

这里需要注意的是 clear() 返回的值是 undefined 而不是 true 所以如果在判断结果的时候需要注意这一点。

Set 数据结构一样,Map 也提供了三个 Map 对象的键值以及键值对组合的:

keys()Map 实例上的键,并返回可迭代(Iterator)的对象。

myMap.keys();
var map = new Map();
map.set('a', );
map.set('b', );
map.set('c', );

var keys = map.keys()
console.log(keys.next().value);  // "a"
console.log(keys.next().value);  // "b"
console.log(keys.next().value);  // "c"

后的 keys 结构可以被迭代器上的 next 到对应值。

values()Map 实例上元素的值,并返回可迭代(Iterator)的对象。

myMap.values();

实例:

var map = new Map();
map.set('a', );
map.set('b', );
map.set('c', );

var values = map.values()
console.log(values.next().value);  // 1
console.log(values.next().value);  // 2
console.log(values.next().value);  // 3

后的 values 结构可以被迭代器上的 next 到对应值。

entries() 返回包含 [key, value] 的可迭代(Iterator)的对象,返回的迭代器的迭代顺序与 Map 实例的插入顺序相同。

myMap.entries()

实例:

var map = new Map();
map.set('a', );
map.set('b', );
map.set('c', );

var values = map.values()
console.log(values.next().value);  // 1
console.log(values.next().value);  // 2
console.log(values.next().value);  // 3

keys()values()entries() 都可以被 for...of 循环。

var map = new Map([["x", ], ["y", ], ["z", ]]);

for (let value of map.values()) {
  console.log(value);
}
// 1
// 2
// 3

for (let [key, value] of map.entries()) {
  console.log(key + " = " + value);
}
// x = 1
// y = 2
// z = 3

注意在循环 entries() 结果的时候,因为每一项是包含键值的数组,可以通过 [key, value] 这种数组结构的方式把键值结构出来直接使用。

MapObject 有非常多的相似的地方,Map 的出现也是为了弥补 Object 的不足。 Object 的键只能是字符串,Map 的键可以是任意类型的值(对象),所以 Map 是一种更完善的 Hash 结构实现。

Object 的键是无序的,当键可以隐式转换为数值时,在循环的时候就会被优先排序。这也是为什么要求最好不要使用 Number 类型作为对象的。

var obj = {
  c: 'C',
  : ,
  a: 'A',
  : ,
}

for (let key in obj) {
  console.log(key, obj[key])
}
// 1 1
// 3 3
// c C
// a A

Map 会记录插入的顺序,存放的是键值对的组合,并且不会做类型转换。Map 可以用 forEach 循环。

var map = new Map();
map.set('c', 'C').set(, ).set('a', 'A').set(, );
map.forEach((item, key) => {
    console.log(key, item, typeof key)
})
// c C string
// 3 3 "number"
// a A string
// 1 1 "number"

从上面的中,使用 typeof 去检查 key 的数据类型,可以看出 Map 并不会对键做类型转换。

Object 不仅是存储数据用的,它还可以有自己的内部逻辑。的值是时,是可以被执行的,并且可以通过 this 拿到对象上的。

var obj = {
    id: , 
    desc: "imooc ES6 wiki", 
    print: function(){ 
        console.log(this.desc)
    }
}
console.log(obj.print()); //"imooc ES6 wiki"

所以,尽管 Map 相对于 Object 有很多优点,但 Object 在某些场景更易于使用,比如上面的实例。毕竟 Object 是 JavaScript 中最基础的概念,给出使用场景的几个参考。

使用 Object 的场景:

使用 Map 的场景:

因为在 Map 对象中键可以是任意值,所以对键的说明有以下几点:

本节我们深入地学习了 Map 的使用情况,并对比 Object 给出了几个使用场景的参考。学习完本章你需要知道以下几点:


联系我
置顶