站长资讯网
map是有序的。ES6中的map类型是一种储存着许多键值对的有序列表，其中的键名和对应的值支持所有数据类型；键名的等价性判断是通过调用“Objext.is()”方法来实现的，所以数字5与字符串“5”会被判定为两种类型，可以分别作为两种独立的键出现在程序中。
前端（vue）入门到精通课程：进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用
本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。
一、map集合
JavaScript的对象（object），本质是上键值对的集合，但是传统上只能用字符串当做键值对。
为了解决这个问题，ES6提供了map数据结构。它类似对象，也是键值对的集合。但是这个键的范围不限于字符串，各种类型的值（包括对象）都可以当做键。也就是说object结构提供了（字符串-值）的对应，map结构实现
ES6中的map类型是一种储存着许多键值对的有序列表，其中的键名和对应的值支持所有数据类型。键名的等价性判断是通过调用Objext.is()方法来实现的，所以数字5与字符串‘5’会被判定为两种类型，可以分别作为两种独立的键出现在程序中。
注意：有一个例外，map集合中将+0和-0视为相等，与Object.is()结果不同，如果需要“键值对”的数据结构，map比object更合适，具有极快的查找速度
1、属性：size
返回map的元素数
2、基本方法
（1）set()
给map添加数据，返回添加后的map（给已存在的键赋值后会覆盖掉之前的值）
（2）get()
获取某个key的值，返回key对应的值，没有则返回undefined
（3）has()
检测是否存在某个key，返回布尔值
let map = new Map(); map.set('JacksonWang','123'); map.set('LEO','456'); map.set('Z-','789'); console.log(map.size); console.log(map.get('JacksonWang')); console.log(map.get('LEO')); console.log(map.has('Z-')); //输出: 3 // 123 // 456 // true
（4）delete()
删除某个key及其对应的value，返回布尔值，成功删除则为true
（5）clear()
清除所有的值，返回undefined
let map = new Map(); map.set('JacksonWang','123'); map.set('LEO','456'); map.set('Z-','789'); map.delete('Z-'); console.log(map.size); console.log(map.clear()) //输出: 2 // undefined
3、遍历方式
注意：map的遍历顺序就是插入顺序
（1）keys()
获取map的所有key
（2）values()
获取map的所有值
（3）entries()
获取map的所有成员
let map = new Map(); map.set('JacksonWang','123'); map.set('LEO','456'); map.set('Z-','789'); console.log(map.keys())//打印所有的键 console.log(map.values())//打印所有的值 console.log(map.entries())//以键值对的方式 /*输出： [Map Iterator] { 'JacksonWang', 'LEO', 'Z-' } [Map Iterator] { '123', '456', '789' } [Map Entries] { [ 'JacksonWang', '123' ], [ 'LEO', '456' ], [ 'Z-', '789' ] }*/
（4）forEach()
遍历map的所有成员
let map = new Map(); map.set('JacksonWang','123'); map.set('LEO','456'); map.set('Z-','789'); for(const [key,value] of map.entries()){ console.log(`${key}:${value}`); } /*输出: JacksonWang:123 LEO:456 Z-:789 */
4、转为数组
map结构转为数组解构
let map1 = new Map([ [1,'One'], [2,'Two'], [3,'Three'] ]) console.log([...map1.keys()]); console.log(...map1.entries()) console.log([...map1.entries()]); /*输出: [ 1, 2, 3 ] [ 1, 'One' ] [ 2, 'Two' ] [ 3, 'Three' ] [ [ 1, 'One' ], [ 2, 'Two' ], [ 3, 'Three' ] ] */
二、weakmap集合
WeakMap是弱引用Map集合，也用于存储对象的弱引用。WeakMap集合中的键名必须是一个对象，如果使用非对象键名会报错：集合中保存的是这些对象的弱引用，如果在弱引用之外的不存在其他的强引用，引擎的垃圾回收机制会自动回收这个对象，同时会移出WeakMap集合中的键值对。但是只有集合的键名遵循这个规则，键名对应的值如果是一个对象，则保存的对象的强引用，不会触发垃圾回收装置
1、WeakMap集合的用途
（1）存储DOM元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="btn">WeskMap测试</button> <script> let btn = document.querySelector('#btn'); let wmap = new WeakMap(); wmap.set(btn,{timesClicked:0})//在map中放一个键值对，btn为键 btn.addEventListener('click',function(){ let temp = wmap.get(btn);//从这里获取键名为btn的值 temp.timesClicked++; console.log(temp.timesClicked) },false) </script> </body> </html>
代码中的myElement是一个DOM节点，每当发生click事件，就更新一下状态。我们将这个状态作为键值放在WeakMap里，对应的键名就是myElement，一旦这个DOM节点删除，该状态就会自动消失，不存在内存泄漏的风险
（2）注册监听事件的listener对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="btn">WeskMap测试</button> <script> let btn = document.querySelector('#btn'); let wmap = new WeakMap(); wmap.set(btn,{timesClicked:0})//在map中放一个键值对，btn为键 // btn.addEventListener('click',function(){ // let temp = wmap.get(btn);//从这里获取键名为btn的值 // temp.timesClicked++; // console.log(temp.timesClicked) // },false) function f1(){ let temp = wmap.get(btn);//从这里获取键名为btn的值 temp.timesClicked++; console.log(temp.timesClicked) } btn.addEventListener('click',f1,false) </script> </body> </html>
所体现的效果是一样的
（3）部署私有属性
function Person(name){ this._name = name; } Person.prototype.getName = function(){ return this._name; } //但这是，创建一个Person对象的时候，我们可以直接访问name let p = new Person('张三'); console.log(p._name) //输出：张三
我们不想让用户直接访问name属性，直接使用下面的方法将name包装成私有属性
let Person = (function(){ let privateData = new WeakMap(); function Person(yourname){ privateData.set(this,{_name:yourname})//this当前这个键的对象 } Person.prototype.getName = function(){ return privateData.get(this)._name;// } return Person; })();//定义好了函数就开始执行 let p = new Person('jack'); console.log(p._name)//因为name的私有型，所以在外不可访问 console.log(p.getName()) /*输出: undefined jack */
【