什么是Map 对象
Map对象是一种有对应 键/值 对的对象。
Maps 和 Objects 的区别
1、一个 Object 的key只能是字符串或者 Symbol对象,但是 Map 的key可以是任意值;
2、Map 中的key/value是有序的,我们可以根据序号进行获取key/vlaue,而Object中则不是;
3、Map 的键值对个数可以通过 size 属性来获取,而 Object 的键值对个数只能手动计算;
4、Object 都有自己的原型,原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。除非我们通过Object.create(null)的方式来创建一个没有原型的对象。
01
Map 中的 key
字符串作为key
![1f7e0bca450d4283ba59dd3cb0eee928.png](https://img-blog.csdnimg.cn/img_convert/1f7e0bca450d4283ba59dd3cb0eee928.png)
运行结果:
![e48f921146f6907e3014500e7cb8876d.png](https://img-blog.csdnimg.cn/img_convert/e48f921146f6907e3014500e7cb8876d.png)
在上面的运行结果里面我们会发现有个序号:0,1,2对应上面的区别2.下面有个size:4 对应了上面的区别3。
key 是对象
![ee7fd8580bce31c400595048b0122979.png](https://img-blog.csdnimg.cn/img_convert/ee7fd8580bce31c400595048b0122979.png)
运行结果
![1e488893609fb8c8a6db966cb2b2accd.png](https://img-blog.csdnimg.cn/img_convert/1e488893609fb8c8a6db966cb2b2accd.png)
上面例子的map1中的key是map对象。
key 是函数
![f01be9efce827f5cadc8883ab76f1787.png](https://img-blog.csdnimg.cn/img_convert/f01be9efce827f5cadc8883ab76f1787.png)
运行结果
![ac8f3c700eb4c21b2d992e539c5e2689.png](https://img-blog.csdnimg.cn/img_convert/ac8f3c700eb4c21b2d992e539c5e2689.png)
上面的代码。第22行,map增加了一个属性。key是一个函数,value是一个字符串。
key 是 NaN
![c892b81161233ee84de1580c103bc5ff.png](https://img-blog.csdnimg.cn/img_convert/c892b81161233ee84de1580c103bc5ff.png)
运行结果:
![ace397517b2b9250f639e23395076222.png](https://img-blog.csdnimg.cn/img_convert/ace397517b2b9250f639e23395076222.png)
提示
虽然在js的判断语句中, NaN 和任何值甚至和自己都不相等,但是NaN作为Map的key来说是就是一个。
02
Map 的迭代
下面来看看Map的两种迭代方式。
for...of 迭代
![2b23ac90edc2349653ac88eecf007b17.png](https://img-blog.csdnimg.cn/img_convert/2b23ac90edc2349653ac88eecf007b17.png)
运行结果:
![88a9665cd7abbaf8435d7b1a70814b2d.png](https://img-blog.csdnimg.cn/img_convert/88a9665cd7abbaf8435d7b1a70814b2d.png)
![705b052b47a1821ff3befe10e6c81086.png](https://img-blog.csdnimg.cn/img_convert/705b052b47a1821ff3befe10e6c81086.png)
forEach() 迭代
![71ab08897d2821ce5e7ddbc75cb6156b.png](https://img-blog.csdnimg.cn/img_convert/71ab08897d2821ce5e7ddbc75cb6156b.png)
运行结果:
![0c980aeac8ada00aa61b3829ceb51961.png](https://img-blog.csdnimg.cn/img_convert/0c980aeac8ada00aa61b3829ceb51961.png)
提示
1、forEach中只有一个参数的时候,该参数是value;
2、forEach中如果有两个参数的时候,需要注意它跟for...of的区别,forEach中的两个参数分别是value和key,它跟for...of是反的。
03
Map 对象的操作
Map 与 Array的转换
![c498a7b300038b8c7eb3c84b63205f48.png](https://img-blog.csdnimg.cn/img_convert/c498a7b300038b8c7eb3c84b63205f48.png)
运行结果
![fe7b7da0d9fa403693e69aed6614e88e.png](https://img-blog.csdnimg.cn/img_convert/fe7b7da0d9fa403693e69aed6614e88e.png)
注意
Map转换成数组是一个二维数组。同理要想一个数组能够转换成Map,该数组必须是二维数组。
Map 的克隆
![a5dbd22d7dd9fc35688961f0db32ed91.png](https://img-blog.csdnimg.cn/img_convert/a5dbd22d7dd9fc35688961f0db32ed91.png)
运行结果:
![aa0e855afbfaefa6dc5684dbd82d9e78.png](https://img-blog.csdnimg.cn/img_convert/aa0e855afbfaefa6dc5684dbd82d9e78.png)
注意
该拷贝是深拷贝。也就是说改变第一个map中的key/vlaue不会影响到拷贝之后的新值。
Map 的合并
![fc2a5bdd7923ee33e4266464cb9e8342.png](https://img-blog.csdnimg.cn/img_convert/fc2a5bdd7923ee33e4266464cb9e8342.png)
运行结果:
![d4f1d5e46566f2b90275167617794d4e.png](https://img-blog.csdnimg.cn/img_convert/d4f1d5e46566f2b90275167617794d4e.png)