Javascript 简明教程

JavaScript - The Maps Object

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

要创建一个新的 Map 对象，可以使用 new Map() 构造函数。然后，可以使用 set() 方法向映射中添加键值对。要获取特定键的值，可以使用 get() 方法。要从映射中移除键值对，可以使用 delete() 方法。

Syntax

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

const map = new Map([iterable]);

在上述语法中，我们使用带有 Map() 构造函数的“new”关键字来定义 Map 的实例。

Parameters

  1. iterable ：这是一个包含键值对的可迭代内容，用于使用可迭代内容的元素来初始化映射。此外，它是一个可选参数。

JavaScript 中的 Map 类包含一组内置方法，让我们能够使用 Map 对象。在此，我们列出了 Map 的属性和方法。

Map Properties

以下是 Map 对象的属性：

Sr.No.

Name & Description

1

size ：此属性返回此映射中的元素数量。

Map Methods

在下面的表格中，我们列出了 Map 对象的所有方法及其说明：

Sr.No.

Name & Description

1

clear() ：此方法从 Map 对象中移除所有元素。

2

delete() ：此方法按键从 Map 对象移除指定元素。

3

entries() ：此方法返回一个新的映射迭代器对象，其中包含 [键、值] 对。

4

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

5

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

6

has() ：此方法指示是否存在具有指定键的元素。

7

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

8

set() ：此方法向 Map 对象插入键值对。

9

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

JavaScript Map Constructor()

以下是在 JavaScript 中的 Map 的构造函数——

Sr.No.

Name & Description

1

Map() 要创建一个 Map 对象。

Examples

Example: Creating new Map Object

在下面的示例中，我们传递了一个包含键值对的二维数组作为 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

Example: Inserting key-value pair in the 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

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

Example: Accessing Map Elements

可以 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>

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

Name: John
Roll Id: 123

Example: Removing a Map Element

在下面的示例中，我们使用 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

Example: Size of the 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

Example: Use object as a key

map 允许开发者使用对象作为键。在这里，我们定义了一个包含两个属性的 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

Map vs. Object in JavaScript

Map 类似于 JavaScript 中的对象，但这里有一些我们已解释过的不同——

Basis of Comparison

Map

Object

Keys

map 允许你将对象、函数和其他基本值设为键。

Object 只能包含字符串和符号作为键。

Size

你可以使用 size 属性获取 map 的大小。

您需要遍历对象来确定对象的大小。

Key comparison

它使用灵活的方法来比较键。它将具有不同引用关系的两个相似对象视为不同的对象。

它会自动将键转换为字符串并进行匹配。

Iteration

可以使用 for…​of 循环来遍历映射。

可以使用 for…​in 循环来遍历对象属性。

Performance

由于结构复杂，映射会略慢一些。

对象比映射更快，因为它仅以字符串格式存储键。

Use cases

映射是动态添加键值对的更佳选择。

如果键值对是静态且固定的，则对象是更好的选择。