JavaScript Map

基本含义

Map 对象 保存键值对，与 objects 对象最大的区别是：能够记住原始插入顺序；并可以直接统计总数量；且任何值（对象/原始值）都能作为一个键或一个值。

键相等

NaN 是与 NaN 相等的（虽然 NaN !== NaN），剩下所有其它的值是根据 === 运算符的结果判断是否相等。
(可以理解为直接用 === 作为判断依据)

Objects 和 maps 的比较

属性

size

size 属性的值是一个整数，表示 Map 对象有多少个键值对。size 是 只读 属性，用set 方法修改size返回 undefined，即不能改变它的值。

代码演示：

let myMap = new Map();
myMap.set("a", "aaa");
myMap.set("b", "bbb");

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

has

方法has() 返回一个bool值，用来表明map 中是否存在指定元素.

var myMap = new Map();
myMap.set("test", "value");

myMap.has("test");  // returns true
myMap.has("ceshi");  // returns false
myMap.has("value");  // returns false

get

get() 方法返回某个 Map 对象中的一个指定元素。
myMap.get(key); key: 必须参数，也是它唯一的参数
返回一个 Map 对象中与指定键相关联的值，如果找不到这个键则返回 undefined。

let myMap = new Map();
myMap.set("test", "hhh");

myMap.get("test");  // 返回 "hhh"
myMap.get("ceshi");  // 返回 undefined

set

set() 方法为 Map 对象 添加. 或 更新 一个指定了键（key）和值（value）的（新）键值对。

let myMap = new Map();

// 将一个新元素添加到 Map 对象
myMap.set("test", "hhh");
myMap.set(1, "one");

// 在Map对象中更新某个元素的值
myMap.set("test", "test");

// 链式设置更新某个元素的值
myMap.set('test', 'hhh')
     .set(1, '111')
     .set(2, '222');

keys

keys() 返回一个新的 Iterator 对象。它包含按照顺序插入 Map 对象中每个元素的key值。

var myMap = new Map();
myMap.set("0", "000");
myMap.set(1, 111);
myMap.set({}, "222");

var mapIter = myMap.keys();

console.log(mapIter.next().value); // "0"
console.log(mapIter.next().value); // 1
console.log(mapIter.next().value); // Object

values

values() 方法返回一个新的Iterator对象。它包含按顺序插入Map对象中每个元素的value值。

var myMap = new Map();
myMap.set("0", "000");
myMap.set(1, 111);
myMap.set({}, "222");

var mapIter = myMap.keys();

console.log(mapIter.next().value); // "000"
console.log(mapIter.next().value); // 111
console.log(mapIter.next().value); // "222"

entries

entries() 方法返回一个新的包含 [key, value] 对的 Iterator 对象，返回的迭代器的迭代顺序与 Map 对象的插入顺序相同。

var myMap = new Map();
myMap.set("0", "test");
myMap.set(1, "ceshi");

var mapIter = myMap.entries();

console.log(mapIter.next().value); // ["0", "test"]
console.log(mapIter.next().key); // undefined

clear

• clear() 方法会移除Map对象中的所有元素。

let myMap = new Map();
myMap.set("test", "1");
myMap.set(1, "2");

myMap.size;       // 2
myMap.has("test"); // true

myMap.clear();

myMap.size;       // 0
myMap.has("test")  // false

delete

• delete() 方法用于移除 Map 对象中指定的元素。
• 参数：从 Map 对象中移除的元素的键。
• 返回值：如果 Map 对象中存在该元素，则移除它并返回 true；否则如果该元素不存在则返回 false。

let myMap = new Map();
myMap.set("test", "1");

myMap.delete("test"); // 返回 true。成功地移除元素
myMap.has("test");    // 返回 false。"test" 元素将不再存在于 Map 实例中

forEach

• forEach() 方法将会以插入顺序对 Map 对象中的每一个键值对执行一次参数中提供的回调函数。

function logMapElements(value, key, map) {
    console.log("m[" + key + "] = " + value);
}
Map([["test", 3], ["shiyan", {}], ["ceshi", undefined]]).forEach(logMapElements);
// logs:
// "m[test] = 3"
// "m[shiyan] = [object Object]"
// "m[ceshi] = undefined"

代码

使用 for…of 方法迭代 Map

Map 与数组的关系

复制或合并 Maps

1. 像数组一样合并

   let original = new Map([
     [1, 'one']
   ]);
   
   let clone = new Map(original);
   
   console.log(clone.get(1)); // one
   console.log(original === clone); // false. 浅比较 不为同一个对象的引用
   

2. Map对象间可以进行合并，但是会保持键的唯一性

   let first = new Map([
     [1, 'one'],
     [2, 'two'],
     [3, 'three'],
   ]);
   
   let second = new Map([
     [1, 'uno'],
     [2, 'dos']
   ]);
   
   // 合并两个Map对象时，如果有重复的键值，则后面的会覆盖前面的。
   // 展开运算符本质上是将Map对象转换成数组。
   let merged = new Map([...first, ...second]);
   
   console.log(merged.get(1)); // uno
   console.log(merged.get(2)); // dos
   console.log(merged.get(3)); // three
   

3. Map对象也能与数组合并

   let first = new Map([
     [1, 'one'],
     [2, 'two'],
     [3, 'three'],
   ]);
   
   let second = new Map([
     [1, '1'],
     [2, '2']
   ]);
   
   // Map对象同数组进行合并时，如果有重复的键值，则后面的会覆盖前面的。
   let merged = new Map([...first, ...second, [1, '3']]);
   
   console.log(merged.get(1)); // 3
   console.log(merged.get(2)); // '2'
   console.log(merged.get(3)); // 'three'
   

参考链接

[1] MDN Map
[2] MDN Map.prototype.size