JavaScript 中的 Map 对象是一个包含键值对的集合，其中的键可以是任意类型，包括对象或函数。Map 元素的顺序与键值对插入的顺序相同。
要创建一个新的 Map 对象，你可以使用 new Map() 构造函数。然后可以使用 set() 方法将键值对添加到 Map 中。要获取特定键的值，可以使用 get() 方法。要从 Map 中移除一个键值对，可以使用 delete() 方法。
语法
下面是使用 Map 数据结构的语法：
const map = new Map([iterable]);
在上面的语法中，我们使用带有 new 关键字的 Map() 构造函数定义了一个 Map 实例。
参数
-
iterable - 包含键值对的可迭代对象用于初始化 Map 的元素。这也是一个可选参数。
JavaScript 中的 Map 类包含一组内置的方法，允许我们操作 Map 对象。以下是 Map 对象的属性和方法列表。
Map 属性
| 序号 |
名称 & 描述 |
| 1 |
size |
| |
返回此 Map 中元素的数量。 |
Map 方法
| 序号 |
名称 & 描述 |
| 1 |
clear() |
| |
从此 Map 对象中移除所有元素。 |
| 2 |
delete() |
| |
通过键移除指定元素。 |
| 3 |
entries() |
| |
返回包含 [键, 值] 对的新 Map 迭代器对象。 |
| 4 |
forEach() |
| |
在 Map 对象中的每个键/值对上执行回调函数一次。 |
| 5 |
get() |
| |
用于从 Map 对象中返回指定元素。 |
| 6 |
has() |
| |
指示具有指定键的元素是否存在。 |
| 7 |
keys() |
| |
返回包含 Map 对象中每个元素的键的新迭代器对象。 |
| 8 |
set() |
| |
在 Map 对象中插入键值对。 |
| 9 |
values() |
| |
返回包含 Map 对象中值的新迭代器对象。 |
JavaScript Map 构造函数
| 序号 |
名称 & 描述 |
| 1 |
Map() |
| |
创建一个 Map 对象。 |
示例
示例：创建新的 Map 对象
在下面的例子中，我们将包含键值对的二维数组作为 Map() 构造函数的参数。之后，我们遍历 Map 以获取 Map 的每个值并在输出中显示。
<html>
<body>
<div> Map elements are: </div>
<div id="output"> </div>
<script>
const map = new Map([["Apple", 100], ["Banana", 20], ["Orange", 50]]);
for (let [key, value] of map) {
document.getElementById("output").innerHTML += `${key} : ${value} <br>`;
}
</script>
</body>
</html>
输出：
Map elements are:
Apple : 100
Banana : 20
Orange : 50
示例：在 Map 中插入键值对
在下面的例子中，我们使用 set() 方法在 Map 中插入键值对。set() 方法接受键作为第一个参数，值作为第二个参数。
<html>
<body>
<div>After inserting 2 key-value pairs in the map: </div>
<div id="output"> </div>
<script>
const map = new Map();
map.set("Grapes", 40);
map.set("Apples", 50);
for (let [key, value] of map) {
document.getElementById("output").innerHTML += `${key} : ${value} <br>`;
}
</script>
</body>
</html>
输出：
After inserting 2 key-value pairs in the map:
Grapes : 40
Apples : 50
示例：访问 Map 元素
可以使用 get() 方法来访问 Map 元素。在此例中，我们已经向 Set 中添加了元素。
之后，我们使用 get() 方法来访问 name 和 RollId 键的值。
<html>
<body>
<div id="output1">Name: </div>
<div id="output2">Roll Id: </div>
<script>
const map = new Map();
map.set("name", "John");
map.set("rollId", 123);
document.getElementById("output1").innerHTML += map.get("name");
document.getElementById("output2").innerHTML += map.get("rollId");
</script>
</body>
</html>
输出：
Name: John
Roll Id: 123
示例：移除 Map 元素
在下面的例子中，我们使用 delete() 方法删除键为 20 的键值对。
你也可以使用 clear() 方法来移除 Map 中的所有元素。
<html>
<body>
<div>Map after deleting the [20,30] key-value pair: </div>
<div id="demo"> </div>
<script>
const output = document.getElementById("demo");
const map = new Map([[10, 20], [20, 30], [30, 40]]);
map.delete(20);
for (let [key, value] of map)
output.innerHTML += "Key: " + key + " Value: " + value + "<br/>";
</script>
</body>
</html>
输出：
Map after deleting the [20,30] key-value pair:
Key: 10 Value: 20
Key: 30 Value: 40
示例：Map 的大小
在下面的代码中，我们使用 Map 类的 size 属性来获取 Map 中键值对的总数。
<html>
<body>
<p id="output">Size of the map object is: </p>
<script>
const map = new Map();
map.set("Grapes", 40);
map.set("Apples", 50);
document.getElementById("output").innerHTML += map.size;
</script>
</body>
</html>
输出：
Size of the map object is: 2
示例：使用对象作为键
Map 允许开发者使用对象作为键。在此例中，我们定义了一个包含两个属性的笔记本电脑对象。
之后，我们将对象设置为 Map 中的键，并将笔记本电脑的价格设置为值。
<html>
<body>
<p id="output">The laptop price is: </p>
<script>
const map = new Map();
const laptop = {
brand: "HP",
model: "Pavilion",
}
map.set(laptop, 100000);
document.getElementById("output").innerHTML += map.get(laptop);
</script>
</body>
</html>
输出：
The laptop price is: 100000
Map 与 JavaScript 中的对象对比
Map 与 JavaScript 中的对象类似，但有一些差异，如下所述：
| 比较基础 |
Map |
Object |
| 键 |
Map 允许你将对象、函数和其他原始值设置为键。 |
对象只能包含字符串和符号作为键。 |
| 大小 |
你可以使用 size 属性来获取 Map 的大小。 |
你需要遍历对象来确定对象的大小。 |
| 键比较 |
它使用灵活的方法来比较键。它认为两个相似的对象如果引用不同则不同。 |
它隐式地将键转换成字符串并匹配它们。 |
| 迭代 |
你可以使用 for...of 循环来遍历 Map。 |
你可以使用 for...in 循环来遍历对象属性。 |
| 性能 |
由于其复杂的结构，Map 略慢一些。 |
对象比 Map 快，因为它只以字符串格式存储键。 |
| 使用场景 |
如果需要动态添加键值对，Map 是更好的选择。 |
如果键值对是静态且固定的，对象是更好的选择。 |