JavaScript - Maps 对象

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

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

语法

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

const map = new Map([iterable]);

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

参数

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

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

Map 属性

以下是 Map 对象的属性 −

Map 方法

下表列出了 Map 对象的所有方法及其说明 -

JavaScript Map 构造函数()

以下是 JavaScript 中 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 对象中。

示例:访问 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); // 从 map 中删除 [20,30] 键值对

      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

示例:使用对象作为键

该映射允许开发者使用对象作为键。这里，我们定义了包含两个属性的笔记本电脑对象。

之后，我们将该对象设置为映射中的键，并将笔记本电脑的价格设置为映射中的值。

<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 与 Object

Map 与 JavaScript 中的 Object 类似，但两者之间存在一些差异，我们已在此处进行了解释 -