Es6 Map 的使用和特点，Map的常用方法，Map的迭代器，Map与Object的区别

Es6 Map 的使用和特点

Map 结构的特点

• Map 相较于传统的Object ,Object类型只能使用string number symbol 类型作为 key(键) ，Map 的key 可以是任意类型
• Map 的容器为一个enteries的数组 每一对key value相当于一个entery数组 enteries中存放在多个entery(个人理解)
• Map 相较于Object 类型 Map 会维护键值对的插入顺序，所以可以根据插入的顺序进行迭代

Map 的使用

1. Map的初始化，使用new 关键字 new Map() 就可以创建一个空映射

const m = new Map()//普通初始化
const m2 = new Map([["name","tom"],["age",18],["gender","男"]])//初始化并赋值

2. Map 的常用API

   • 添加 使用set()添加一个entery。 set（）调用以后会返回Map实例对象，因此可以链式调用

     m.set("key1","value1")
      .set("key2","value2")
      .set("key3","value3")
     

   • 获取Map的长度

     const m = new Map([["name","tom"],["age",18],["gender","男"]])
     m.size() //3
     

   • 获取 使用get(‘key’)可以获取对应value

     m.get("key1") // "value"
     m.get("key4") //undefined
     

   • 查找是否存在 has()

     m.has("key1")//true
     m.has("key4")//false
     m.has(undefined)//true
     

   • 删除 删除一个键值对 delete() / 删除所有键值对 clear()

     m.delete("key1");//只删除一个键值对
     m.clear()//删除所有
     

3. Map 的迭代与遍历

   • Map 的实例提供一个迭代器 Iterator 可以按照插入顺序遍历Map ,通过enteries()或者Symbol.iterator属性获取迭代器

   const m = new Map([["name","tom"],["age",18],["gender","男"]])
   console.log(m.enteries() === m[Symbol.iterator])//true
   for(const item of m.enteries()){
       console.log(item)
       //["name","tom"]
       //["age",18]
       //["gender","男"]
   }
   //因为Map结构拥有迭代器所以可以将其转化为数组
   console.log([...m])//[["name","tom"],["age",18],["gender","男"]]
   

   • Map 的keys()方法可以获取所有key 的迭代器，values()方法返回所有value的迭代器

   const m = new Map([["name","tom"],["age",18],["gender","男"]])
   for(const key of m.keys()){
       console.log(key)
       //name age gender
   }
   for(const value of m.values()){
       console.log(value)
       // "tom" 18 "男"
   }
   

Map 和 Object如何选择

大多数日常情况下Map 和 Object 相差不大，可以根据个人喜好选择。但是如果从性能和内存占用上考虑两者有明显区别

1. 内存占用上

   • 在相同内存上 ，Map大约可以比Object多存储50%的键值对

2. 插入的性能

   • 如果不是插入大量数据，Map和Object 差距不大
   • 如果需要插入大量数据Map 的性能要优于 Object

3. 查找的速度

   • 与插入不同，从大型 Object 和 Map 中查找键/值对的性能差异极小，但如果只包含少量键/值对， 则 Object 有时候速度更快。
   • 在把 Object 当成数组使用的情况下（比如使用连续整数作为属性），浏 览器引擎可以进行优化，在内存中使用更高效的布局。
   • 这对 Map 来说是不可能的。对这两个类型而言， 查找速度不会随着键/值对数量增加而线性增加。
   • 如果代码涉及大量查找操作，那么某些情况下可能选 择 Object 更好一些。

4. 删除性能

   • 删除性能 使用 delete 删除 Object 属性的性能一直以来饱受诟病，目前在很多浏览器中仍然如此。
   • 为此， 出现了一些伪删除对象属性的操作，包括把属性值设置为 undefined 或 null。
   • 但很多时候，这都是一 种讨厌的或不适宜的折中。而对大多数浏览器引擎来说，Map 的 delete()操作都比插入和查找更快。
   • 如果代码涉及大量删除操作，那么毫无疑问应该选择 Map。

总结

• 如果是日常开发，不太在意性能Object 和 Map 可以按照个人喜好选择
• 如果考虑性能 Map 的内存占用、 插入性能 、删除性能 都要优于Object