js中的Map集合类型

Map是一种新的集合类型，为ECMAScript语言带来了真正的键/值存储机制，Map的大多数特性都可以通过Obeject类型实现，但二者之间还是存在一些细微的差异。

6.4.1.基本API

1. 使用new关键字和Map构造函数可以创建一个空映射。

2. 如果想在创建的同时初始化实例，可以给Map构造函数传入一个可迭代的对象，需要包含键/值对数组，可迭代对象中的每个键/值对数组，可迭代对象中的每个键/值都会按照迭代顺序插入到新映射实例中。

   const m = new Map();
   console.log(m); //Map {}
   
   // 使用嵌套数组初始化映射
   const m1 = new Map([
     ["key1", "value1"],
     ["key2", "value2"],
     ["key3", "value3"]
   ]);
   console.log(m1); // Map { 'key1' => 'value1', 'key2' => 'value2', 'key3' => 'value3' }
   console.log(m1.size); // 3
   
   // 使用自定义迭代器初始化映射
   const m2 = new Map({
     [Symbol.iterator]: function* () {
       yield ["key1","val1"],
       yield ["key2","val2"],
       yield ["key3","val3"]
     }
   })
   console.log(m2); // Map { 'key1' => 'val1', 'key2' => 'val2', 'key3' => 'val3' }
   console.log(m2.size); // 3
   
   // 映射期待的键值对，无论是否提供
   const m3 = new Map([[]]);
   console.log(m3.has(undefined)); // true
   console.log(m3.get(undefined)); // undefined
   

3. 初始化之后，可以使用set()方法再添加键值对，另外可以使用get()和has()进行查询，可以通过size属性获取映射中的键值对的数量，还可以使用delete()和clear()删除值。

   const m = new Map();
   console.log(m.has("firstName")); // false
   console.log(m.get("firstName")); // undefined
   console.log(m.size); // 0
   
   m.set("firstName", "Matt").set("lastName", "Frisbie");
   console.log(m); // Map { 'firstName' => 'Matt', 'lastName' => 'Frisbie' }
   console.log(m.size); // 2
   console.log(m.has("firstName")); // true
   console.log(m.get("firstName")); // Matt
   
   m.delete("firstName");// 只删除这一个键值对
   
   console.log(m.has("firstName")); // false
   console.log(m.has("lastName")); // true
   console.log(m.size); // 1
   
   m.clear(); // 清除这个遇敌实例中的所有键值对
   
   console.log(m.has("firstName")); // false
   console.log(m.has("lastName")); // false
   console.log(m.size); // 0
   
   // set()方法返回映射实例，因此可以把多个操作连缀起来，包括初始化声明。
   const mm = new Map().set("key1", "val1");
   mm.set("key2", "val2").set("key3", "val3");
   console.log(mm.size); // 3
   console.log(mm); // Map { 'key1' => 'val1', 'key2' => 'val2', 'key3' => 'val3' }
   

4. 与Object只能使用数值，字符串和符号作为键不同，Map可以使用任何JavaScript数据类型作为键，Map内部使用SameValueZero比较操作（ECMAScript规范内部定义，语言中不能使用），基本上相当于使用严格对象相等的标准来检查键的匹配性，与Object类似，映射的值是没有限制的。

   const m = new Map();
   const functionKey = function () { };
   const symbolKey = Symbol();
   const objectKey = new Object();
   
   m.set(functionKey, "functionValue").set(symbolKey, "symbolValue").set(objectKey, "objectValue");
   console.log(m.get(functionKey)); // functionValue
   console.log(m.get(symbolKey)); // symbolValue
   console.log(m.get(objectKey)); // objectValue
   
   // SameValueZero比较意味着独立实例不冲突
   console.log(m.get(function () {})); // undefined
   

5. 在映射中，用作键和值的对象及其他集合类型，在自己的内容或属性被修改时仍然保持不变。

   const m = new Map();
   const objKey = {}, objVal = {}, arrKey = [], arrVal = [];
   m.set(objKey, objVal);
   m.set(arrKey, arrVal);
   console.log(m); // Map { {} => {}, [] => [] }
   
   objKey.foo = "foo";
   objVal.bar = "bar";
   arrKey.push("foo");
   arrVal.push("bar");
   console.log(m); // Map { { foo: 'foo' } => { bar: 'bar' }, [ 'foo' ] => [ 'bar' ] }
   
   console.log(m.get(objKey)); // { bar: 'bar' }
   console.log(m.get(arrKey)); // [ 'bar' ]
   

6. SameValueZero比较也可能导致意想不到的冲突。

   const m = new Map();
   const a = 0 / "",
         b = 0 / "",
         pz = +0,
         nz = -0;
         
   console.log(a === b); // false
   console.log(pz === nz); // true
   m.set(a, "foo");
   m.set(pz, "bar");
   console.log(m.get(b));  // foo
   console.log(m.get(nz)); // bar
   

6.4.2顺序与迭代

1. 与Object类型的一个主要差异是：Map实例会维护健值对的插入顺序，因此可以根据插入顺序执行迭代操作。

2. 映射实例可以提供一个迭代器（iterator），能以插入顺序生成[key,value]形式的数组，可以通过entries()方法或者Symbol.iterator属性（它引用entries()）取得这个迭代器。

3. 因为entries()是默认迭代器，所以可以直接对映射实例使用扩展操作，把映射转换为数组。

   const m = new Map([
     ["key1", "val1"],
     ["key2", "val2"],
     ["key3", "val3"]
   ]);
   console.log(m.entries === m[Symbol.iterator]); // true
   
   for (let pair of m.entries()) {
     console.log(pair);
   }
   // ['key1', 'val1']
   // ['key2', 'val2']
   // ['key3', 'val3']
   
   for (let pair of m[Symbol.iterator]()) {
     console.log(pair);
   }
   // ['key1', 'val1']
   // ['key2', 'val2']
   // ['key3', 'val3']
   
   console.log([...m]); // [ [ 'key1', 'val1' ], [ 'key2', 'val2' ], [ 'key3', 'val3' ] ]
   

4. 如果不使用迭代器，而是使用回调 方式，则可以调用映射的forEach(callback,opt_thisArg)方法并传入回调，依次迭代每个健值对。传入的回调接收可选的第二个参数，这个参数用于重写回调内部的this的值。

   const m = new Map([
     ['key1', 'val1'],
     ['key2', 'val2'],
     ['key3', 'val3']
   ]);
   
   m.forEach((val, key) => console.log(`${key}->${val}`))
   // key1 - > val1
   // key2 - > val2
   // key3 - > val3
   
   for (let key of m.keys()) {
     console.log(key);
   }
   // key1
   // key2
   // key3
   
   for (let key of m.values()) {
     console.log(key);
   }
   // val1
   // val2
   // val3
   

5. keys()和values()分别返回插入顺序生成键和值的迭代器。

6. 键和值在迭代器遍历时是可以修改的，但映射内部的引用则无法修改。

   const m1 = new Map([
     ["key1", "val1"]
   ]);
   
   // 作为键的字符串原始值是不能修改的
   for (let key of m1.keys()) {
     key = "newKey";
     console.log(key); // newKey
     console.log(m1.get("key1")); // val1
   }
   
   const keyObj = { id: 1 };
   const m = new Map([
     ["keyObj", "vall"]
   ]);
   
   // 修改了作为键的对象的属性，但对象在映射内部仍然引用相同的值
   for (let key of m.keys()) {
     key.id = "newKey";
     console.log(key); // keyObj
     console.log(m.get(keyObj)); // undefined
   }
   console.log(keyObj); //{ id: 1 }
   

6.4.3 选择Object还是Map

对于web开发任务来说，选择Object还是Map只是个人偏好问题，但对于在乎内存和性能的开发者来说，对象和映射之间确实存在显著区别。

1. 内存占用：给定固定大小的内存，Map可以比Object多存储50%的键值对。
2. 插入性能：插入Map稍微快一点。
3. 查找速度：Object更优。
4. 删除性能：Map的delete()操作都比插入和查找更快。