猿创征文 |ES6学习笔记5-map

封闭第18天，做产品规划和后续培训新人，开始学习前端对应知识，JS和TS已经复习完毕，做整体大纲梳理，重点部分笔记分享。

映射对象可用于保存键/值对。映射中的键或值可以是任何对象（对象和基本体值）。

语法new Map（[iterable]）创建一个Map对象，其中iterable是一个数组或其元素是数组的任何其他iterable对象（每个对象都有一个键/值对）。

对象与贴图类似，但在某些情况下，有一些重要差异使得使用贴图更可取： 

一个Object 是类似于Map ，但在某些情况下使用Map 时也有很多的不同：

1）键可以是任何类型，包括函数、对象和任何基元。 

2）可以获得Map的大小。 

3）可以直接迭代Map。 

4）在涉及频繁添加和删除键/值对的场景中，Map的性能更好。size属性返回映射中键/值对的数目。 

例如：

let map = new Map([[ 'k1 ',‘v1']，['k2', ‘v2 ' ]]);
console.log(map.size);1/ 2

方法：

set（key，value）将指定的键/值对添加到映射中。如果指定的键已存在，则将用指定的值替换对应的值。

get（key）获取对应于映射中指定键的值。如果指定的键不存在，则返回undefined。

如果映射中存在指定的键，则has（key）返回true，否则返回false。

delete（key）从映射中删除具有指定键的键/值对，并返回true。如果元素不存在，则返回false。

clear（）从映射中删除所有键/值对。

keys（）返回映射中每个元素的键的迭代器。

values（）返回映射中每个元素的值的迭代器。

entries（）返回映射中每个元素的数组[key，value]的迭代器。

例子：

let map = new Map();
map.set( 'k1 ', 'v1 ' ).set( ' k2', 'v2 ');
console.log(map.get( 'k1'));/ v1
console.log(map.has( 'k2'));// true
for (let kv of map.entries())
console.log(kv[0] +" : " + kv[1]);

上面的示例我们演示了一些ES6映射方法。

Map支持不同的数据类型，即1和“1”是两个不同的键/值。

avaScript的对象​（Object）​，本质上是​键值对​的集合​（Hash结构）​，但是传统上只能用​字符串​当作键。

为了解决这个问题，ES6提供了​Map数据结构​。

它类似于​对象​，也是​键值对​的集合，但是​“键”​的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

var m = new Map();
var o = {p: 'welcome to w3cschool'};    // 使用对象做键
m.set(o, 'content')
m.get(o)     // "content"

m.has(o)     // true
m.delete(o)     // true
m.has(o)     // false

上面代码使用​set​方法，将对象​o​当作​m​的一个键，然后又使用​get​方法读取这个键，接着使用​delete​方法删除了这个键。

作为构造函数，​Map​也可以接受一个​数组​作为参数。该数组的成员是一个个表示​键值对​的数组。代码如下：

var map = new Map([
  ['name', 'jack'],
  ['age', 12]
]);
map.size 	    // 2
map.has('name') 	    // true
map.get('name')     	// "jack"
map.has('age')     	// true
map.get('age') 	    // "12"

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

map .set(1, 'aaa') .set(1, 'bbb');        // 结果是 bbb的值

如果读取一个​未知​的键，则返回​undefined​。

new Map().get('asfddfsasadf')
// undefined

注意：只有对同一个对象的引用，Map 结构才将其视为同一个键。这一点要非常小心。

const map = new Map();
map.set(['a'], 555);
map.get(['a']) // undefined

上面代码的​set​和​get​方法，表面是针对同一个键，但实际上这是两个不同的数组实例，内存地址是不一样的，因此​get​方法无法读取该键，返回​undefined​。

Map结构的实例属性和操作方法如下：

（1）​size属性​

    ​size​属性返回​Map​结构的成员总数。

（2）​set(key, value)​

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

（3）​get(key)​

    ​get​方法读取​key​对应的键值，如果找不到key，返回undefined。

（4）​has(key)​

    ​has​方法返回一个​布尔值​，表示某个键是否在​Map​数据结构中。

（5）​delete(key)​

    ​delete​方法删除某个键，返回​true​。如果删除失败，返回false。

（6）​clear()​

    ​clear​方法清除所有成员，没有返回值。

使用方法如下：

Map原生提供​三个遍历器​生成函数和一个​遍历方法​。

• ​keys()​：返回键名的遍历器。
• ​values()​：返回键值的遍历器。
• ​entries()​：返回所有成员的遍历器。
• ​forEach()​：遍历Map的所有成员。

遍历方法和Set的差不多。

数据结构的互相转换

（1）​Map转为数组​

前面已经提过，Map转为数组最方便的方法，就是使用扩展运算符​（...）​。

[...myMap]        //  myMap表示Map数据

（2）​数组转为Map​

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

new Map(数组)

（3）​Map转为对象​

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

// Map转对象函数
function cMapToObj(strMap) {

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

  return obj;
}

cMapToObj(myMap)

（4）对象转为Map

function objToMap(obj) {
  let strMap = new Map();
  for (let k of Object.keys(obj)) {
    strMap.set(k, obj[k]);
  }
  return strMap;
}
objToMap(对象)

（5）Map转为JSON

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

JSON.stringify(cMapToObj(myMap))    // cMapToObj是上面定义的函数

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

JSON.stringify([...myMap])

（6）JSON转为Map

​JSON​转为​Map​，正常情况下，所有键名都是字符串。

objToMap(JSON.parse( json数据 ))        // objToMap是上面定义的函数

var map=new Map();
map.set('foo', true);    	// 设置
map.size;     // 1
map.get('foo');     // true
map.has('foo')	    	// true
map.delete('foo');       // 删除map对象的foo键，删除后使用has返回false
map.clear()        // 删除map对象所有的键