Map对象是对象Object中的一种。Map对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或基本类型）都可以作为一个键或一个值。
简介
声明定义
new Map()直接声明一个Map对象。接收一个二维数组，该数组的成员表示键值对。
Map的属性
- size：表示Map中键值对的个数
<!DOCTYPE html>
<html>
<head>
<title>Map对象</title>
</head>
<body>
<div id="message">
</div>
<script>
"use strict"
let map = new Map()
let map2 = new Map([
['number', '数字'],
['string', '字符串']
]); // 二维数组中的一维数组只能有两个值，第一个表示key，第二个表示value
console.dir(map) // Map(0)
console.dir(map.size) // 0
console.dir(map2) // Map(2)
console.dir(map2.size) // 2
</script>
</body>
</html>
Map对象与数组的关系
Map对象是由二维数组构成的，所以转变为数组的时候也是二维数组。
通过...或Array.from()可以转换为数组
<!DOCTYPE html>
<html>
<head>
<title>Map对象</title>
</head>
<body>
<div id="message">
</div>
<script>
"use strict"
let obj = {"obj": "对象"}
let map = new Map([
['number', '数字'],
['string', '字符串']
]);
map.set(obj, "对象作为键");
[...map].map(function(item){ // Map转数组，三点语法
console.log(item) // ["number", "数字"] ["string", "字符串"] [{…}, "对象作为键"]
})
let maparray = Array.from(map) // Map转数组，Array.from()
maparray.map(function(item){
console.log(item)
})
</script>
</body>
</html>
Map的操作
Map的增删查改、检测值
| 方法 | 作用 | 参数 | 返回值 |
|---|---|---|---|
| set(key, value) | 设置Map对象键的值 | 键, 值 | Map对象 |
| get(key) | 根据键获取Map对象的值 | 键 | 返回键对应的值；如果不存在，返回undefined |
| delete(key) | 根据键删除Map对象的键值对 | 键 | 存在该元素，删除返回true；否则返回false |
| clear() | 清空Map对象 | 无 | 无 |
| has(key) | 根据键查看Map对象中是否有该键 | 键 | 存在返回true；否则返回false |
注意：
1、Map的键为对象等引用类型的时候，保存的是内存地址。
2、操作Map对象中的值，不能使用方括号，否则会出现异常
<!DOCTYPE html>
<html>
<head>
<title>Map对象</title>
</head>
<body>
<div id="message">
</div>
<script>
"use strict"
let obj = {"obj": "对象"}
let map = new Map([
['number', '数字'],
['string', '字符串']
]);
map.set(obj, "对象作为键")
map.set("number", "修改数字键")
console.dir(map.get(obj)) // 对象作为键
console.log(map.has("number")) // true
map.delete("number")
console.log(map.has("number")) // false
console.dir(map.get("number")) // undefined
map.clear()
console.dir(map.size) // 0
</script>
</body>
</html>
Map的遍历
| 方法 | 作用 | 参数 | 返回值 |
|---|---|---|---|
| map.keys() | 返回Map对象的所有键 | 无 | keys |
| map.values() | 返回Map对象的所有值 | 无 | values |
| map.entries() | 返回Map对象的所有键值对 | 无 | key,value |
| map.forEach() | map是迭代对象，可以直接遍历 | function(value, key, map) | 无 |
<!DOCTYPE html>
<html>
<head>
<title>Map对象</title>
</head>
<body>
<div id="message">
</div>
<script>
"use strict"
let obj = {"obj": "对象"}
let map = new Map([
['number', '数字'],
['string', '字符串']
]);
map.set(obj, "对象作为键")
for(let key of map.keys()) {
console.log(`${key}--->${map.get(key)}`)
}
for(let value of map.values()) {
console.log(`${value}`)
}
for(let [key, value] of map.entries()) {
console.log(`${key}--->${value}`)
}
map.forEach(function(value, key, map) {
console.log(`${key}--->${value}`)
})
</script>
</body>
</html>
Map对象的合并
Map对象的合并就是将Map对象展成数组，然后调用new Map()构造函数。
<!DOCTYPE html>
<html>
<head>
<title>Map对象</title>
</head>
<body>
<div id="message">
</div>
<script>
"use strict"
let first = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let second = new Map([
[1, 'uno'],
[2, 'dos']
]);
// 合并两个Map对象时，如果有重复的键值，则后面的会覆盖前面的。
// 展开运算符本质上是将Map对象转换成数组。
let merged = new Map([...first, ...second]);
console.log(merged.get(1)); // uno
console.log(merged.get(2)); // dos
console.log(merged.get(3)); // three
</script>
</body>
</html>
Map的使用
操作页面节点集合
<!DOCTYPE html>
<html>
<head>
<title>Map对象</title>
</head>
<body>
<div desc="后盾人">houdunren</div>
<div desc="开源系统">hdcms</div>
<script>
"use strict"
const divMap = new Map();
const divs = document.querySelectorAll("div");
divs.forEach(div => {
// 使用div对象作为key存储相关的信息
divMap.set(div, {
content: div.getAttribute("desc")
});
});
divMap.forEach((config, elem) => {
elem.addEventListener("click", function() {
alert(divMap.get(this).content);
});
});
</script>
</body>
</html>
Map对象 VS 普通对象Object
| Map | Object | |
|---|---|---|
| 意外的键 | Map默认不包含任何键，只是包含显式插入的键 | 一个Object有一个原型，可能与原型链上的键名冲突 |
| 键的类型 | 任意值，如函数、对象、基本类型 | 字符串或Symbol |
| 键的顺序 | 有顺序，迭代的时候是以插入的顺序返回的 | 无序的 |
| size | 提供了size属性 | 只能手动计算 |
| 迭代 | 直接迭代 | 通过某种方式才能进行迭代（keys、values、entries） |
| 性能 | 频繁增删键值对的场景下表现好 | 无 |
