说明

image.png

特点

1、对象保存键值对，并且能够记住键的原始插入顺序
2、键值对，键可以是任意数值类型

和Object对比

Map Object
意外的键 Map
默认情况不包含任何键。只包含显式插入的键。		 一个 Object 有一个原型, 原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。
注意: 虽然 ES5 开始可以用 Object.create(null) 来创建一个没有原型的对象，但是这种用法不太常见。
键的类型 一个 Map
的键可以是任意值，包括函数、对象或任意基本类型。		 一个Object
的键必须是一个 [String](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String)
或是[Symbol](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol)
。
键的顺序 Map 中的 key 是有序的。因此，当迭代的时候，一个 Map 对象以插入的顺序返回键值。 一个 Object 的键是无序的
注意：自ECMAScript 2015规范以来，对象确实保留了字符串和Symbol键的创建顺序； 因此，在只有字符串键的对象上进行迭代将按插入顺序产生键。
Size Map
的键值对个数可以轻易地通过[size](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map/size)
属性获取		 Object
的键值对个数只能手动计算
迭代 Map
是 iterable 的，所以可以直接被迭代。		 迭代一个Object
需要以某种方式获取它的键然后才能迭代。
1、内存性能 给定固定大小的内存Map 大约可以比 Object 多存储 50%的键/值对 不同浏览器差异很大
2、插入、删除性能 在频繁增删键值对的场景下表现更好。 在频繁添加和删除键值对的场景下未作出优化。
3、查找性能 从大型 Object 和 Map 中查找键/值对的性能差异极小 代码涉及大量查找操作，那么某些情况下可能选择 Object 更好一些。

=================

使用

1、创建

image.png
也可以创建时初始化里面的元素
image.png
格式
image.png

2、添加元素 set

image.png
image.png

3、获取元素值 get

根据键，获取值
image.png

4、删除元素 delete

image.png
根据键删除，删除成功返回true，失败返回false

5、查看元素数量 size

image.png

6、查看键列表 keys

  1. let myMap = new Map();
  3. myMap.set("key1", "zero");
  4. myMap.set("key2", "one");
  6. myMap.keys()

返回的是一个map迭代器，可以用于遍历
image.png

7、查看值列表 values

  1. let myMap = new Map();
  3. myMap.set("key1", "zero");
  4. myMap.set("key2", "one");
  6. myMap.values()

返回的是一个map迭代器，可以用于遍历
image.png

8、查看键值列表 entries

  1. let myMap = new Map();
  3. myMap.set("key1", "zero");
  4. myMap.set("key2", "one");
  6. myMap.entries()

image.png

9、遍历

得到的都是数组，返回 [ 键 , 值 ]

for of

  1. let myMap = new Map();
  3. myMap.set(0, "zero");
  4. myMap.set(1, "one");
  6. // ============= 1、直接获取，每个item是一个数组 =============
  7. for (let item of myMap) {
  8.   console.log(item);
  9. }
  10. // [0, "zero"]
  11. // [1, "one"]
  14. // ============= 2、通过数组解构的方式遍历 =============
  15. for (let [key, value] of myMap) {
  16.   console.log(key + " = " + value);
  17. }
  18. // 0 = zero
  19. // 1 = one
  22. // ============= 3、通过遍历键列表 =============
  23. for (let key of myMap.keys()) {
  24.   console.log(key);
  25. }
  26. // 0
  27. // 1
  30. // ============= 4、通过遍历值列表 =============
  31. for (let value of myMap.values()) {
  32.   console.log(value);
  33. }
  34. // zero 
  35. // one
  38. // ============= 5、通过遍历键值列表 =============
  39. for (let [key, value] of myMap.entries()) {
  40.   console.log(key + " = " + value);
  41. }
  42. // 0 = zero
  43. // 1 = one

forEach

image.png

10、清空 clear

image.png

11、合并

  1. let first = new Map([
  2.   [1, 'one'],
  3.   [2, 'two'],
  4.   [3, 'three'],
  5. ]);
  7. let second = new Map([
  8.   [1, 'uno'],
  9.   [2, 'dos']
  10. ]);
  12. // Map对象同数组进行合并时，如果有重复的键值，则后面的会覆盖前面的。
  13. let merged = new Map([...first, ...second, [1, 'eins']]);
  15. console.log(merged.get(1)); // eins
  16. console.log(merged.get(2)); // dos
  17. console.log(merged.get(3)); // three

12、转换

Map转Array

  1. let map= new Map([[a,123]);
  2. //法1：
  3. console.log(Array.from(map));
  5. //法二：
  6. console.log([...map]);
  8. //法三：
  9. let arr=[];
  11. for(let key of map){
  12.    arr.push(key);
  13. }
  15. console.log(arr);

===============

应用

状态的对应储存值

  1. let assS = {a:"待采购",b:"可领取",c:"使用中"}
  3. let assState = new Map()
  5. assState.set(assS.a,0)
  6. assState.set(assS.b,1)
  7. assState.set(assS.c,2)
  9. assS.a // "待采购" 需要用于界面显示时，用这个
  10. assState.get(assS.a) // 0 把这个状态实际表示的值，传给后端进行储存