ES6 Map的创建、遍历、使用及注意

先导篇

 JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串或者 symbol 来作为键名，这给它的使用带来了很大的限制。Map 类似于对象，都用于存储 key-value 结构的数据，Map 与对象最大的差别就在于它可以以各种数据类型作为键名。

对象的key必须是字符串。如果想映射为其它类型，它会默默转化为字符串，没有任何提示。

有这样一种情况：如果创建的key是两个html元素，在为对象赋值的时候，健会被转换为字符串，因为对象的key必须是字符串，这意味着当视图使用非字符串类型如HTML元素作为key时，其值被toString方法静默转换为字符串类型。HTML元素转换为字符串后的值为[object HTMLDivElement]，第1个元素的数据信息被存储在[object HTMLDivElement]属性中。接着，当试图为第二个元素创建映射时，发生了相同的过程。第2个元素也是HTML元素，也被转换成为字符串，对应的数据也被存储在[object HTMLDivElement]属性上，覆盖了第一个元素的值。由于这两个原因：原型继承属性以及key仅支持字符串，所以通常不能使用对象作为map。由于这种限制，ECMAScript委员会定义了一个全新的类型Map。
原文链接

创建Map

let myMap=new Map()//创建map结构

使用set创建key对应的value：

直接创建key和value
作为构造函数，Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。

以上是我的错误示范和正确示范，一定要注意参数是数组，每一个健值对也是数组！ ==注：forEach的回调函数第一个参数为value，第二个为key。==

遍历Map

直接上图去发现吧：

如果是这样解构，key和value是正常顺序的健值

如果使用forEach遍历时候只穿一个参数，那么只输出value：

mapp.keys()返回的是一个对象，而不是数组，不能直接forEach，如果要遍历，需要借助for循环 ![在这里插入图片描述](https://img-blog.csdnimg.cn/f201e5e9d4ac480d81c991bdddeeb56a.png)

手写map

function MyMap() {this.element = new Array()//获取map元素个数this.size = function () {return this.element.length}//判断map是否为空this.isEmpty = function () {return this.element.length < 1}//删除map所有元素this.clear = function () {this.element = new Array()}//删除指定元素，才知道delete方法是有返回值的this.delete = function (_key) {console.log(this.element, _key)try {for (let i = 0; i < this.element.length; i++) {let item = this.elementif (item[i].key === _key) {this.element.splice(i, 1)return true}}} catch {return false}return false}//增加元素this.set = function (key, value) {this.element.push({key: key,value: value})}//获取元素this.get=function(_key){for(let i=0;i<this.element.length;i++){if(this.element[i].key===_key){return this.element[i].value}}return null}//获取map中所有keythis.keys=function(){let arr=new Array()for(let i=0;i<this.element.length;i++){arr.push(this.element[i].key)}return arr}//获取map中所有valuethis.values=function(){let arr=new Array()for(let i=0;i<this.element.length;i++){arr.push(this.element[i].value)}return arr}
}
let mymap = new MyMap()
mymap.set('a',1)
mymap.set('b',2)
console.log(mymap.get('b'))
console.log(mymap.keys())
console.log(mymap.values())

delete方法的返回值：删除成功返回true，失败返回false：

这是其他博主分享的js创建map对象方法，大家可以对比学习！