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對象是由二維數組構成的，所以轉變?yōu)閿到M的時候也是二維數組。
通過...或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的使用
操作頁面節(jié)點集合
<!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） |
| 性能 | 頻繁增刪鍵值對的場景下表現好 | 無 |
