javascript 中的 map 对象有什么用?
javascriptfront end technologyobject oriented programming
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>
