ES6 Map数据结构

参考文件：ES6 入门教程、3.1.1 ES6 Map 与 Set | 菜鸟教程

1、Map的含义

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

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

2、Map的基本用法

2.1、Map构造函数

作为构造函数，Map可以通过set方法添加成员。也可以接受数组、Set和Map等结构作为参数。

//1、set方法添加成员
const m = new Map();
const o = {p: 'Hello World'};
m.set(o, 'content')
m.get(o) // "content"
m.has(o) // true
m.delete(o) // true
m.has(o) // false

//2、接受数组作为参数
const map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);
map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"

//3、接受Set结构作为参数
const set = new Set([
  ['foo', 1],
  ['bar', 2]
]);
const m1 = new Map(set);
m1.get('foo') // 1

//4、接受Map结构作为参数
const m2 = new Map([['baz', 3]]);
const m3 = new Map(m2);
m3.get('baz') // 3

2.2、Map的属性

• Map.size：返回Map结构的成员总数。

const map = new Map();
map.set('foo', true);
map.set('bar', false);
console.log(map.size) // 2

2.3、Map的基本方法

方法	参数	描述
set()	key,value	设置键名key对应的键值value，然后返回当前的Map对象。如果key已经有值，则键值value会被更新。
get()	key	读取key对应的键值，如果找不到key，返回undefined
has()	key	返回true或false。表示某个键是否在当前Map对象之中。
delete()	key	删除某个键。删除成功，返回 true ；删除失败，返回 false。
clear()		清除所有成员，没有返回值。

2.4、Map的遍历方法

Map 结构原生提供三个遍历器生成函数和一个遍历方法。需要特别注意的是，Map 的遍历顺序就是插入顺序。

方法	描述
keys()	返回键名的遍历器。
values()	返回键值的遍历器。
entries()	返回所有成员的遍历器。
forEach()	遍历 Map 的所有成员。

const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);

for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"

for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

2.5、Map的特点

2.5.1、如果对同一个键多次赋值，后面的值将覆盖前面的值

const map = new Map();

map
.set(1, 'aaa')
.set(1, 'bbb');

map.get(1) // "bbb"

2.5.2、如果读取一个未知的键，则返回undefined 

const map = new Map();
map.get(1)// undefined

 2.5.3、Map 的键是跟内存地址绑定的

Map 的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键。

• 如果Map 的键是数字、字符串、布尔值，则只要两个值严格相等，Map 将其视为一个键。比如0和-0就是一个键，布尔值true和字符串true则是两个不同的键。另外，undefined和null也是两个不同的键。虽然NaN不严格相等于自身，但 Map 将其视为同一个键。

let map = new Map();

map.set(-0, 123);
map.get(+0) // 123

map.set(true, 1);
map.set('true', 2);
map.get(true) // 1

map.set(undefined, 3);
map.set(null, 4);
map.get(undefined) // 3

map.set(NaN, 123);
map.get(NaN) // 123

•  如果Map 的键是数组、对象，则即使键值严格相等，也是指向不同内存地址的，属于两个键。只有对同一个对象的引用，Map 结构才将其视为同一个键。这就解决了同名属性碰撞（clash）的问题，我们扩展别人的库的时候，如果使用对象作为键名，就不用担心自己的属性与原作者的属性同名。

const map = new Map();
//这是两个不同的数组实例，内存地址是不一样的，因此get方法无法读取该键，返回undefined
map.set(['a'], 555);
map.get(['a']) // undefined

const map = new Map();

const k1 = ['a'];
const k2 = ['a'];

map
.set(k1, 111)
.set(k2, 222);

//变量k1和k2的值是一样的，但是它们在 Map 结构中被视为两个键
map.get(k1) // 111
map.get(k2) // 222

3、Map与其他数据结构的互相转换

3.1、Map与数组

3.1.1、Map转为数组

Map 转为数组最方便的方法，就是使用扩展运算符（...）。

const myMap = new Map()
  .set(true, 7)
  .set({foo: 3}, ['abc']);

let myArr=[...myMap]; // [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]

3.1.2、数组转为Map

将数组传入 Map 构造函数，就可以转为 Map。

let m=[
  [true, 7],
  [{foo: 3}, ['abc']]
];
let myMap=new Map(m);

3.2、Map与对象

3.2.1、Map 转为对象

如果所有 Map 的键都是字符串，它可以无损地转为对象。

如果有非字符串的键名，那么这个键名会被转成字符串，再作为对象的键名。

function strMapToObj(strMap) {
  let obj = Object.create(null);
  for (let [k,v] of strMap) {
    obj[k] = v;
  }
  return obj;
}

const myMap = new Map()
  .set('yes', true)
  .set('no', false);
strMapToObj(myMap)
// { yes: true, no: false }

3.2.2、对象转为 Map

对象转为 Map 可以通过Object.entries()。或者，自己实现一个转换函数。

//方法一
let obj = {"a":1, "b":2};
let map = new Map(Object.entries(obj));

//方法二
function objToStrMap(obj) {
  let strMap = new Map();
  for (let k of Object.keys(obj)) {
    strMap.set(k, obj[k]);
  }
  return strMap;
}

objToStrMap({yes: true, no: false})
// Map {"yes" => true, "no" => false}

3.3、Map与JSON

3.3.1、Map 转为 JSON

Map 转为 JSON 要区分两种情况。一种情况是，Map 的键名都是字符串，这时可以选择转为对象 JSON。

//Map的键名都是字符串，Map先转为对象，再转为Json字符串
function strMapToJson(strMap) {
  return JSON.stringify(strMapToObj(strMap));
}

let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)
// '{"yes":true,"no":false}'

另一种情况是，Map 的键名有非字符串，这时可以选择转为数组 JSON。

//Map的键名有非字符串，Map先转为数组，再转为Json字符串
function mapToArrayJson(map) { 
  return JSON.stringify([...map]);
}

let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
mapToArrayJson(myMap)
// '[[true,7],[{"foo":3},["abc"]]]'

3.3.2、JSON 转为 Map

JSON 转为Map要区分两种情况。一种情况是，所有键名都是字符串。

//JSON的键名都是字符串，先将Json字符串解析为对象，再将对象转为Map
function jsonToStrMap(jsonStr) {
  return objToStrMap(JSON.parse(jsonStr));
}

jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}

另一种情况，整个 JSON 就是一个数组，且每个数组成员本身，又是一个有两个成员的数组。这时，它可以一一对应地转为 Map。这往往是 Map 转为数组 JSON 的逆操作。

//Josn是数组形式的字符串，先将Josn解析成数组，再将数组转为Map
function jsonToMap(jsonStr) {
  return new Map(JSON.parse(jsonStr));
}

jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}