JavaScript - Map 对象

上一页
下一页

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 对象的属性：

序号 名称和描述
1

size

此属性返回此 Map 中的元素数量。

Map 方法

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

序号 名称和描述
1

clear()

此方法删除 Map 对象中的所有元素。
2

delete()

此方法通过键从 Map 对象中删除指定的元素。
3

entries()

此方法返回一个新的 Map 迭代器对象，其中包含 [键，值] 对。
4

forEach()

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

get()

此方法用于从 Map 对象中返回指定的元素。
6

has()

此方法指示是否指定键的元素存在。
7

keys()

此方法返回一个新的迭代器对象，其中包含 Map 对象中每个元素的键。
8

set()

此方法将键值对插入到 Map 对象中。
9

values()

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

JavaScript 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 的每个值。

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); // 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

示例：使用对象作为键

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

JavaScript中的Map与Object

Map类似于JavaScript中的Object，但是有一些区别，我们在这里解释：

比较依据 Map Object
键 map允许您设置对象、函数和其他原始值作为键。 Object只能包含字符串和符号作为键。
大小 您可以使用'size'属性获取map的大小。 您需要遍历对象来确定对象的大小。
键比较 它使用灵活的方法来比较键。它认为两个具有不同引用的相似对象是不同的。 它隐式地将键转换为字符串并进行匹配。
迭代 您可以使用for...of循环遍历map。 您可以使用for...in循环遍历对象的属性。
性能 由于其复杂的结构，map稍微慢一些。 Object比map快，因为它只以字符串格式存储键。
用例 对于动态添加键值对，map是更好的选择。 如果键值对是静态和固定的，则object更好。
打印页面
上一页
下一页
广告