es6 学习笔记 （map）

JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。

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

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

上述代码中，obj 只有一个属性 [object Object]，因为在向 obj 中添加属性时，遇到两个对象，而对象的键值只能是字符串，因此调用 toString 方法转换为字符串，两个对象都转换为  [object Object]，所以添加属性的时候，后面的属性值将覆盖前面的值

console.log(data1.toString());         // [object Object]
console.log(data2.toString());         // [object Object]

1、如何创建一个 Map

var a = new Map([
    [ "a" , 1 ],
    [ "b" , 2 ]
]);
console.log(a);     // Map(2) {"a" => 1, "b" => 2}

var b = new Map([
    [ { q : 1 } , 2 ],
    [ undefined , 3 ],
    [ NaN , 5 ],
    [ NaN , 8 ]
]);
console.log(b);        // Map(3) {Object {q: 1} => 2, undefined => 3, NaN => 8}

2、size 属性 （返回 Map 结构的成员总数）

var b = new Map([
    [ { q : 1 } , 2 ],
    [ undefined , 3 ],
    [ NaN , 5 ],
    [ NaN , 8 ]
]);
console.log(b.size);        // 3

 

map 的方法 

3、set 方法 （设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键）

 set方法返回的是当前的Map对象，因此可以采用链式写法

var b = new Map([
    [ { q : 1 } , 2 ],
    [ undefined , 3 ],
    [ NaN , 5 ],
    [ NaN , 8 ]
]);
b.set( "a" , 555 ).set( null , 3 ).set( undefined , 66 );
console.log(b);        // Map(5) {Object {q: 1} => 2, undefined => 66, NaN => 8, "a" => 555, null => 3}

4、get 方法 （读取key对应的键值，如果找不到key，返回undefined）

var b = new Map([
    [ { q : 1 } , 2 ],
    [ undefined , 3 ],
    [ NaN , 5 ],
    [ NaN , 8 ]
]);
b.set( "a" , 555 ).set( null , 3 ).set( undefined , 66 );
console.log(b.get(undefined));        // 66
console.log(b.get("aa"));              // undefined

5、has 方法（返回一个布尔值，表示某个键是否在当前 Map 对象之中）

var b = new Map([
    [ { q : 1 } , 2 ],
    [ undefined , 3 ],
    [ NaN , 5 ],
    [ NaN , 8 ]
]);
b.set( "a" , 555 ).set( null , 3 ).set( undefined , 66 );
console.log(b.has(undefined));        // true
console.log(b.has("aa"));              // false

6、delete 方法 （删除某个键，返回true。如果删除失败，返回false）

var b = new Map([
    [ { q : 1 } , 2 ],
    [ undefined , 3 ],
    [ NaN , 5 ],
    [ NaN , 8 ]
]);
b.set( "a" , 555 ).set( null , 3 ).set( undefined , 66 );
console.log(b.delete(undefined));        // true
console.log(b.delete("aa"));              // false

7、clear 方法 （方法清除所有成员，没有返回值）

var b = new Map([
    [ { q : 1 } , 2 ],
    [ undefined , 3 ],
    [ NaN , 5 ],
    [ NaN , 8 ]
]);
b.set( "a" , 555 ).set( null , 3 ).set( undefined , 66 );
b.clear();
console.log(b);         // Map(0) {}

遍历方法 

8、keys 方法 （返回键名的遍历器）

var b = new Map([
    [ { q : 1 } , 2 ],
    [ undefined , 3 ],
    [ NaN , 5 ],
    [ NaN , 8 ]
]);
b.set( "a" , 555 ).set( null , 3 ).set( undefined , 66 );
for(let item of b.keys()){
    console.log(item);      // Object {q: 1} , undefined , NaN , a , null
}

9、values 方法 （返回键值的遍历器）

var b = new Map([
    [ { q : 1 } , 2 ],
    [ undefined , 3 ],
    [ NaN , 5 ],
    [ NaN , 8 ]
]);
b.set( "a" , 555 ).set( null , 3 ).set( undefined , 66 );
for(let item of b.values()){
    console.log(item);      // 2 , 66 , 8 , 55 , 3
}

10、entries 方法 （返回所有成员的遍历器）

var b = new Map([
    [ { q : 1 } , 2 ],
    [ { w : 2 } , "wwww" ],
    [ undefined , 3 ],
    [ NaN , 5 ],
    [ NaN , 8 ]
]);
b.set( "a" , 555 ).set( null , 3 ).set( undefined , 66 );
for(let item of b.entries()){
    console.log(item[0] + ":" + item[1]);      // [object Object]:2 ,[object Object]:wwww ,undefined:66 , NaN:8 , a:555 , null:3
}

var b = new Map([
    [ { q : 1 } , 2 ],
    [ { w : 2 } , "wwww" ],
    [ NaN , 5 ],
    [ NaN , 8 ]
]);
b.set( "a" , 555 ).set( null , 3 );
console.log(b.entries());       // MapIterator {Object {q: 1} => 2, Object {w: 2} => "wwww", NaN => 8, "a" => 555, null => 3}

11、forEach 方法 （遍历 Map 的所有成员）

var b = new Map([
    [ { q : 1 } , 2 ],
    [ { w : 2 } , "wwww" ],
    [ NaN , 5 ],
    [ NaN , 8 ]
]);
b.set( "a" , 555 ).set( null , 3 );

b.forEach(function (value, key, b) {
    console.log( key + ":" + value )    // [object Object]:2 , [object Object]:wwww , NaN:8 ,a:555 , null:3
})

 

结合 filter 方法实现过滤

const map0 = new Map().set(1,"a").set(2,"b").set(3,"c");
const mp1 = new Map(
    [...map0].filter(([k,v]) => k<3)
);
console.log(mp1);       // Map(2) {1 => "a", 2 => "b"}

结合 map 实现遍历

const map0 = new Map().set(1,"a").set(2,"b").set(3,"c");
const mp1 = new Map(
    [...map0].map(([k,v]) => [k*2,"_"+v])
);
console.log(mp1);       // Map(3) {2 => "_a", 4 => "_b", 6 => "_c"}