Map Object本质上是键值对的集合（Hash结构），但Object只能将字符串当做键，这就给Object带来了很大的限制。 let data = {} let s = { name : '东方不败' } data[s] = '西方求败' // 如果键传入非字符串的值，会自动为字符串 console.log(data); // {[object Object]: '西方求败'} console.log(data['[object Object]']); // 西方求败 为了解决这个问题，es6提供了Map数据结构。它类似于对象，也是键值对集合，但键不局限于字符串，各种类型的值都可以当做键。 Object结构：字符串键:值 Map结构：值键:值 let data2 = new Map() let s2 = { name : "艺术概论" } data2.set(s2,'中国工艺美术史') console.log(data2.get(s2)); // 中国工艺美术史 console.log(data2); // key: {name: '艺术概论'} , value : "中国工艺美术史" 上面案例使用Map的set方法，将s2当做data2的键，使用get方法取值。 Map的一些常用方法 方法 说明 set() 为Map对象添加一个指定键（key）和值（value）的新元素 get() 用来获取Map对象中指定的元素 has() 返回boolean值，用来表明Map中是否存在该元素 delete() 删除对应元素 size 返回Map的成员数 clear() 清除Map所有成员，没有返回值 let data2 = new Map() let s2 = { name : "艺术概论" } data2.set(s2,'中国工艺美术史') data2.size; // 1 data2.has(s2); // treu data2.delete(s2); // true data2.has(s2); // false data2.clear(); // undefined Map参数 Map可以接收数组作为参数，数组的成员是单个单个的键值对的数组 let map = new Map([ ['name','东方不败'], ['title','西方求败'] ]) console.log(map.size); // 2 console.log(map); // {"name" => "东方不败"}， {"title" => "西方求败"} console.log(map.has('name')); // true console.log(map.get('name')); // 东方不败 注意：如果有多个相同的键，后面的键值会覆盖前面的键值 不仅是数组，任何具有Iterator接口、且每个成员都是一个双元素的数组的数据结构，都可以当做Map构造函数的参数，Set和Map也可以用来生成新的Map Set作为参数 let set = new Set([['a',1],['b',2]]) let m = new Map(set) console.log(m); // {'a' => 1, 'b' => 2} console.log(m.get('a')); // 1 Map作为参数 let map2 = new Map([['text','世界现代设计史'],['name','王受之']]) let m2 = new Map(map2) console.log(m2); // {'text' => '世界现代设计史', 'name' => '王受之'} console.log(m2.get('text')); // 世界现代设计史 console.log(m2.get('hello')); // 读取不存在的键会返回undefined Map只有对同一个对象的引用才视为同一个键 let map3 = new Map() map3.set(['a',100]) console.log(map3.get(['a'])); // undefined 因为数组不是引用类型，生成多个数组，它们的内存地址是不一样的，其实就是基础数据类型和引用数据类型的应用，这里的两个['a']看似是一样的，其实它们根本就是两个不同的值，Map只有对同一个对象的引用才视为同一个键，没有读取到所以返回undefined。请看下面的例子 let map4 = new Map() let b = ['b'] let b2 = ['b'] map4.set(b) console.log(map4.get(b2)); // undefined Map的值其实是跟内存地址绑定的，内存地址不同，那么键就不同（即使名字一模一样），在这里Map就解决了同名属性冲突的问题，当我们使用别人的库时，使用对象名当做键，就不同担心自己的属性与别人的属性相同了。 如果Map的键是一个简单数据类型的值，如：number、string、boolean，只要这两个值严格相等，Map就视为同一个键，例如：0和-0就是同一个键，而布尔值true和字符串true就是不同的键，此外null和undefined也是不同的键。NaN视为同一个键。 let n = new Map() n.set(0,100) console.log(n.get(-0)); // 100 n.set(5,123) console.log(n.get('5')); // undefined n.set(true,100) console.log(n.get(1)); // undefined n.set(NaN,123) console.log(n.get(NaN)); // 123 n.set(null,100) console.log(n.get(null)); // 100 console.log(n.get(undefined)); // undefined Map遍历方法 Map提供三个遍历器生成函数和一个遍历方法 方法 说明 Map.prototype.keys() 返回键名的遍历器。 Map.prototype.values() 返回键值的遍历器。 Map.prototype.entries() 返回所有成员的遍历器。 Map.prototype.forEach() 遍历 Map 的所有成员。 定义数据 let m3 = new Map([ ['a',100], ['b',200], ['c',300] ]) keys /* keys */ for(let k of m3.keys()){ console.log(k); // a b c } values /* values */ for(let k of m3.values()){ console.log(k); // 100 200 300 } entries for(let k of m3.entries()){ console.log(k); // ['a', 100] ['b', 200] ['c', 300] console.log(k[0],k[1]); // a 100 b 200 c 300 } // 或 for(let [k,v] of m3.entries()){ console.log(k,v); // a 100 b 200 c 300 } forEach m3.forEach(el => console.log(el)) // 100 200 300 m3.forEach((val,index) => console.log(val,index)) // 100 'a' 200 'b' 300 'c' Map数据结构转换 Map转数组 使用扩展运算符将Map结构转换为数组 let a = new Map([ ['a',1], ['b',2], ['c',3] ]) console.log([...a.keys()]); // ['a','b','c'] console.log([...a.values()]); // [1,2,3] console.log([...a.entries()]); // ['a', 1] ['b', 2] ['c', 3] console.log([...a]); // ['a', 1] ['b', 2] ['c', 3] 转换后的数组是一个真正的数组，可以使用数组方法 let back = [...a].filter((val,index) => val[1] == 2 ) console.log(back); // ['b',2] 数组转Map let a2 = new Map([ ['name','东方不败'], [{num : 3},['abc']] ]) console.log(a2); // 0: {"name" => "东方不败"} 1: {Object => Array(1)} Map转对象 let a3 = new Map() .set('a',100) .set('b',200) /* 通过函数传入map */ function mapToObj(mapVal){ // 在内部创建一个空对象 let obj = {} // 遍历map结构，给空对象赋值 for([k,v] of mapVal){ obj[k] = v } return obj } let mObj = mapToObj(a3) console.log(mObj); // {a: 100, b: 200} 如果有非字符串键名，会被转换成字符串再创建对象键名 对象转Map let obj = {'a':123,'b':456} let mObj2 = new Map(Object.entries(obj)) console.log(mObj2); // {'a' => 123, 'b' => 456} Map转JSON Map转JSON需要区分两种情况 1、Map键名都是字符串 2、Map键名有非字符串的情况 1、Map键名都是字符串 可以写一个通用函数，用来将Map转为JSON let j = new Map() .set('name','东方') .set('text','不败') // mapToObj为上面创建的Map转对象的函数 let shiftStrJson = (mapVal) => JSON.stringify(mapToObj(mapVal)) console.log(shiftStrJson(j)); // '{"name":"东方","text":"不败"}' 2、Map键名有非字符串的情况 function shiftMaptoArrayJson(mapVal){ return JSON.stringify([...mapVal]) } let j2 = new Map() .set('name','东方') .set('text','不败') let shiftStrJson2 = shiftMaptoArrayJson(j2) console.log(shiftStrJson2); // '[["name","东方"],["text","不败"]]' 以上两种的转换结果： JSON转Map JSON转Map需要区分两种情况 1、Map键名都是字符串 2、Map键名有非字符串的情况 1、键名都是字符串 let strObj = '{"name":"东方","text":"不败"}' let strMap = new Map(Object.entries(JSON.parse(strObj))) console.log(strMap); // {'name' => '东方', 'text' => '不败'} 2、键名有非字符串情况 let strObj2 = '[["name","东方"],["text","不败"]]' let strMap2 = new Map(JSON.parse(strObj2)) console.log(strMap2); // {'name' => '东方', 'text' => '不败'} 案例源码：https://gitee.com/wang_fan_w/es6-science-institute 如果觉得这篇文章对你有帮助，欢迎点亮一下star哟