javascript 中的 map 对象有什么用?

javascriptfront end technologyobject oriented programming更新于 2024/8/15 17:16:17

Map 包含 键-值 对，其中键可以是任何类型。map 可以记住键的原始插入顺序。map 具有获取 map 大小的属性。map 可用于任何值，包括对象或原始数据类型。

通常，对象也可以用作 map 中的键。但 JavaScript 对象并非如此，它只允许将原始数据类型用作键。

map 中的键只能出现一次，它在 map 集合中是 唯一的。映射对象由键值对进行迭代，for…of 循环每次迭代都会返回一个包含 [key, value] 的两个成员的数组。

创建映射

您可以通过以下方式创建 JavaScript 映射 -

1. 将数组 ay 传递给构造函数 new map()

Const name-of-variable (object) = new Map();

2. 创建映射并使用 map.set()

name-of-variable(object).set();

地图方法

以下是 JavaScript 提供的各种方法。

S.No	方法和说明
1	new map() 创建一个新的地图对象
2	Set() 设置地图中键的值
3	Get() 获取映射中某个键的值
4	Clear() 从映射中删除所有元素
5	Delete() 删除由键指定的映射元素
6	Has() 如果映射中存在某个键，则返回 true
7	ForEach() 对映射中的每个键/值对调用一次回调
8	Entries() 返回带有映射中 [键, 值] 对的迭代器对象
9	Keys() 返回带有映射中键的迭代器对象
10	Values() 返回映射中值的迭代器对象

JavaScript Map 类还具有属性"size"，该属性返回映射元素的数量。

示例 1

在下面的示例中，我们通过将数组传递给 Map 类的构造函数来创建映射。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Map function</title>
</head>
<body>
   <h4>Creating a map from an array:</h4>
   <p id="demo"></p>
   <script>
      const myMap = new Map([["Rahul", 22],["Akash", 23],["Aman", 23]]);
      document.getElementById("demo").innerHTML = myMap.get("Aman");
   </script>
</body>
</html>

示例 2

在下面的例子中，我们创建了一个空地图，并使用 Map.set() 方法设置地图值。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Map function</title>
</head>
<body>
   <h4>using Map.set()</h4>
   <p id="demo"></p>
   <script>
      const myMap = new Map(); //creating empty map
      //set the value of the map
      myMap.set("Aman", 23);
      myMap.set("Akash", 22);
      myMap.set("Rahul", 21);
      document.getElementById("demo").innerHTML = myMap.get("Akash");
   </script>
</body>
</html>

示例 3

在下面的例子中，我们获取地图的大小并从地图中删除元素。删除后，我们再次检查大小。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Map Function</title>
</head>
<body>
   <h4>using Map.delete()</h4>
   <p id="demo"></p>
   <p>After Deletion</p>
   <p id="del"></p>
   <script>
      //creating empty map
      const myMap = new Map();
      
      //set the value of the map
      myMap.set("Aman", 23);
      myMap.set("Akash", 22);
      myMap.set("Rahul", 21);
      document.getElementById("demo").innerHTML = "Size of Map " + myMap.size;
      
      //Deleting one element
      myMap.delete("Aman");
      document.getElementById("del").innerHTML = "Size of Map " + myMap.size;
   </script>
</body>
</html>

示例 4

在下面的例子中，我们演示了 Map.has() 方法。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Map function</title>
</head>
<body>
   <h4>using Map.has()</h4>
   <p id="demo1"></p>
   <p id="demo2"></p>
   <p id="demo3"></p>
   <p id="demo4"></p>
   <script>
      const myMap = new Map(); //creating empty map
      //set the value of the map
      myMap.set("Aman", 23);
      myMap.set("Akash", 22);
      myMap.set("Rahul", 21);
      document.getElementById("demo1").innerHTML = myMap.has("Aman"); //true
      document.getElementById("demo2").innerHTML = myMap.has("Akash"); //true
      document.getElementById("demo3").innerHTML = myMap.has("Rahul"); //true
      document.getElementById("demo4").innerHTML = myMap.has("Anil"); //false because anil is not available on the map.
   </script>
</body>
</html>