ES6数据结构：Map

 Map：

一、什么是map：

ES6 提供了 Map 数据结构，map类似于对象，是键值对的集合，但是键的范围不限于字符串，各种类型的值都可以当作键，object结构提供了“字符串-值”的对应，Map结构提供了“值-值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

二、map特征

map对象保存键值对，并且能够记住键的原始插入顺序

任何值（对象或者原始值）都可以作为一个键或者一个值

Map是es6引入的一种新的数据结构

三、map和objects的区别

• 一个 Object 的键必须是一个 String 或是 Symbol，但是map的键可以是任意值，包括函数、对象或任意基本类型。
• Map 中的键值是有序的，当迭代的时候，一个 Map 对象以插入的顺序返回键值。而添加到对象中的键则不是，对象是无序的
• Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算
• 一个Object 有一个原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。
• Map 是 可迭代的 的，所以可以直接被迭代。
• Object 没有实现 迭代协议，所以使用 JavaSctipt 的 for...of 表达式并不能直接迭代对象。for...in允许你迭代一个对象的可枚举属性

四、构造函数之创建Map对象

Map()：创建Map对象

let map1=new Map();
map1.set('123',123)

//数组创建Map
const m2 = new Map([['baz', 3]]);

//set 创建Map
const set=new Set([
    ['foo',1],
    ['bar',2]
])
const m3=new Map(set);

五、Map属性

Map.prototype.size(key，value)：返回Map对象中的键值对数量，实例的属性
size属性返回 Map 结构的成员总数。

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

六、实例方法：

6.1、Map.prototype.set(key, value)

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

const m = new Map();
 
m.set('edition', 6)        // 键是字符串
m.set(262, 'standard')     // 键是数值
m.set(undefined, 'nah')    // 键是 undefined
set方法返回的是当前的Map对象，因此可以采用链式写法。

let map = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');

6.2、Map.prototype.has(key)：has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。

const m = new Map();
 
m.set('edition', 6);
m.set(262, 'standard');
m.set(undefined, 'nah');
 
m.has('edition')     // true
m.has('years')       // false
m.has(262)           // true
m.has(undefined)     // true

6.3、Map.prototype.delete(key)
delete方法删除某个键，返回true。如果删除失败，返回false。

const m = new Map();
m.set(undefined, 'nah');
m.has(undefined)     // true
 
m.delete(undefined)
m.has(undefined)       // false

6.4、Map.prototype.clear()：clear方法清除所有成员，没有返回值。

let map = new Map();
map.set('foo', true);
map.set('bar', false);
 
map.size // 2
map.clear()
map.size // 0

七、Map循环方法：Map 的遍历顺序就是插入顺序。

• Map.prototype.keys()：返回键名的遍历器。
• Map.prototype.values()：返回键值的遍历器。
• Map.prototype.entries()：返回所有成员的遍历器。
• Map.prototype.forEach()：遍历 Map 的所有成员。
• for of 由于有iterable迭代， 所以也可以使用此方法for..of，进行迭代

 keys() ， values() ， entries() 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);
}

八、Map和对象最大的区别：多类型的key

//字符串
//创建空map 再添加
var myMap = new Map(); 
var keyString = "a string"; 
//设置键值对，返回该 Map 对象
myMap.set(keyString, "和键'a string'关联的值");



//对象
var myMap = new Map(); 
var keyObj = {}
myMap.set(keyObj, "和键 keyObj 关联的值");


//NaN
var myMap = new Map(); 
myMap.set(NaN, "not a number");

九、使用扩展运算符快速转数组

const map = new Map([  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

[...map.keys()]
// [1, 2, 3]

[...map.values()]
// ['one', 'two', 'three']

[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]

[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]

转为数组后，可以使用数组的map，filter方法
ini复制代码const map0 = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');

const map1 = new Map(
  [...map0].filter(([k, v]) => k < 3)
);
// 产生 Map 结构 {1 => 'a', 2 => 'b'}

const map2 = new Map(
  [...map0].map(([k, v]) => [k * 2, '_' + v])
    );
// 产生 Map 结构 {2 => '_a', 4 => '_b', 6 => '_c'}

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

1、Map转为数组：Map 转为数组最方便的方法，就是使用扩展运算符（…）

onst map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);
 
[...map.keys()]
// [1, 2, 3]
 
[...map.values()]
// ['one', 'two', 'three']
 
[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]
 
[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]

const myMap = new Map()
  .set(true, 7)
  .set({foo: 3}, ['abc']);
//其实就是在new Map()后边使用了两个.set方法：const myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
 
 
[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]