1. 首页
  2. JavaScript 菜鸟教程
  3. JavaScript - Maps (地图) 对象

JavaScript - Maps (地图) 对象

JavaScript 中的 Map 对象是键值对的集合，其中键可以是任何类型，包括对象或函数。映射元素的顺序与键值对的插入顺序相同。

要创建新的 Map 对象，可以使用新的 Map（） 构造函数。然后，您可以使用 set（） 方法将键值对添加到映射中。要获取特定键的值，您可以使用 get（） 方法。要从 map 中删除键值对，可以使用 delete（） 方法。

语法

以下是在 JavaScript 中使用 Map 数据结构的语法 -

 const map = new Map([iterable]);

在上面的语法中，我们使用了 'new' 关键字和 Map（） 构造函数来定义 Map 的实例。

参数

  • iterable − 它是一个包含键值对的可迭代对象，用于使用可迭代对象的元素初始化 Map。此外，它是一个可选参数。

JavaScript 中的 Map 类包含一组内置方法，允许我们使用 Map 对象。在这里，我们列出了 Map 的属性和方法。

Map 属性

以下是 Map 对象的属性 −

名称 描述
size 此属性返回此映射中的元素数。

Map 方法

在下表中，我们列出了 Map 对象的所有方法及其描述 -

名称 描述
clear()

此方法从 Map 对象中删除所有元素。
delete()

该方法按键从 Map 对象中删除指定的元素。
entries()

此方法返回包含 [key， value] 对的新 map 迭代器对象。
forEach()

此方法对 Map 对象中的每个键/值对执行一次回调函数。
get()

此方法用于从 Map 对象返回指定的元素。
has()

该方法指示具有指定键的元素是否存在。
keys()

此方法返回一个新的 Iterator 对象，其中包含 Map 对象中每个元素的键。
set()

该方法将键值对插入到 Map 对象中。
values()

此方法返回一个新的 Iterator 对象，其中包含 Map 对象的值。

JavaScript Map 构造函数（）

以下是 JavaScript 中 Map 的构造函数 -

名称 描述
Map()

创建 Map 对象。

例子

示例：创建新的 Map 对象

在下面的示例中，我们已将包含键值对的 2D 数组作为 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 的每个值。

Map elements are:
Apple : 100
Banana : 20
Orange : 50

示例：在 Map 中插入键值对

在下面的示例中，我们使用 set（） 方法在 map 中插入键值对。set（） 方法将 key 作为第一个参数，将 value 作为第二个参数。

<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

正如我们在输出中看到的，提供的 [key-value] 对已插入到 Map 对象中。

示例：访问 Map 元素

get（） 方法可用于访问 map 元素。在这里，我们向集合添加了元素。

之后，我们使用 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>

输出

执行后，它返回 Map 对象中存在的所有元素。

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); // Deleting a [20,30] key-value pair from the map

	 	 	 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

示例：使用 object 作为键

该映射允许开发人员将对象用作键。在这里，我们定义了包含两个属性的 laptop 对象。

之后，我们将对象设置为键，将笔记本电脑的价格设置为 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

JavaScript 中的 Map vs. Object

Map 类似于 JavaScript 中的 Object，但有一些差异，我们在这里已经解释了 -

基础比较 Map Object
键 该 map 允许您将对象、函数和其他原始值设置为键。 Object 只能包含一个字符串和一个作为键的 symbol 。
大小 您可以使用 'size' 属性获取 Map 的大小。 您需要遍历 Object 以确定对象的大小。
键比较 它使用灵活的方法来比较键。它将具有不同引用的两个相似对象视为不同对象。 它将键隐式转换为字符串并匹配它们。
迭 代 您可以使用 for...of 循环遍历 Map 您可以使用 for...in 循环遍历 Object 属性。
性能 由于其复杂的结构， Map 的速度略慢。  Object 比 map 更快，因为它只以字符串格式存储键。
使用案例 map 是动态添加键值对的更好选项。 如果键值对是静态且固定的，则最好使用该对象。
<< JavaScript - WeakSet 对象 JavaScript - WeakMap 对象 >>