Map 保存键值对，其中键可以是任何数据类型。
Map 会记住键的原始插入顺序。
Map 提供表示映射大小的属性。
Map 方法
|-----------|-----------------------------------------|
| 方法 | 描述 |
| new Map() | 创建新的 Map 对象。 |
| set() | 为 Map 中的键设置值。 |
| get() | 获取 Map 对象中键的值。 |
| clear() | 从 Map 中移除所有元素。 |
| delete() | 删除由某个键指定的 Map 元素。 |
| has() | 如果键存在于 Map 中，则返回 true。 |
| forEach() | 为 Map 中的每个键/值对调用回调函数。 |
| entries() | 返回迭代器对象，其中包含 Map 中的 [key, value] 键值对。 |
| keys() | 返回迭代器对象，其中包含 Map 中的键。 |
| values() | 返回迭代器对象，其中包含 Map 中的值。 |
|------|---------------|
| 属性 | 描述 |
| size | 返回 Map 元素的数量。 |
如何创建 Map
您可以通过以下方式创建 JavaScript 映射：
- 将数组传递给 new Map()
- 创建映射并使用 Map.set()
new Map()
您可以通过将数组传递给 new Map() 构造函数来创建 Map：
实例
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
const fruits=new Map([
["pick",200],
["blue",500]
])
document.getElementById("demo").innerHTML = fruits.get("pick");
</script>
</body>
</html>
<!-- 200 -->
Map.set()
例子 1
您也可以使用 set() 方法将元素添加到 Map 中：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
const fruits = new Map();
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
document.getElementById("demo").innerHTML = fruits.get("apples");
</script>
</body>
</html>
<!-- 500 -->
例子 2
set() 方法还可用于更改现有的 Map 值：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
const fruits = new Map([
["apples",400],
["bananas",400],
["oranger",700]
]);
fruits.set("apples",400)
document.getElementById("demo").innerHTML = fruits.get("apples");
</script>
</body>
</html>
<!-- 400 -->
Map.get()
get() 方法获取 Map 中键的值：
实例
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
const fruits = new Map([
["apples",400],
["bananas",400],
["oranger",700]
]);
document.getElementById("demo").innerHTML = fruits.get("apples");
</script>
</body>
</html>
<!-- 400 -->
Map.size
size 属性返回 Map 中元素的数量：
实例
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
const fruits = new Map([
["apples",400],
["bananas",400],
["oranger",700]
]);
document.getElementById("demo").innerHTML = fruits.size;
</script>
</body>
</html>
<!-- 3 -->
Map.delete()
delete() 方法删除 Map 元素：
实例
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
const fruits = new Map([
["apples", 400],
["bananas", 400],
["oranger", 700]
]);
fruits.delete("apples");
document.getElementById("demo").innerHTML = fruits.size;
</script>
</body>
</html>
<!-- 2 -->
Map.clear()
clear() 方法从 Map 中删除所有元素：
实例
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
const fruits = new Map([
["apples", 400],
["bananas", 400],
["oranger", 700]
]);
fruits.clear();
document.getElementById("demo").innerHTML = fruits.size;
</script>
</body>
</html>
<!-- 0 -->
Map.has()
例子 1
如果 Map 中存在键，则 has() 方法返回 true：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
// 创建 Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
document.getElementById("demo").innerHTML = fruits.has("apples");
</script>
</body>
</html>
<!-- true -->
例子 2
请试试这个
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
// 创建 Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
// 删除元素
fruits.delete("apples");
document.getElementById("demo").innerHTML = fruits.has("apples");
</script>
</body>
</html>
<!-- false -->
Map 是对象
例子 1
typeof 返回 object：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
// 创建 Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
document.getElementById("demo").innerHTML = typeof fruits;
</script>
</body>
</html>
<!-- object -->
例子 2
instanceof Map 返回 true：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
// 创建 Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
document.getElementById("demo").innerHTML = fruits instanceof Map;
</script>
</body>
</html>
<!-- true -->
Map.forEach()
forEach() 方法为 Map 中的每个键/值对调用回调：
实例
JavaScript Object 对比 Map
JavaScript 对象与映射之间的差异：
|--------------|------------|
| Object（对象） | Map（映射） |
| 不可直接迭代 | 可直接迭代 |
| 无 size 属性 | 有 size 属性 |
| 键必须是字符串（或符号） | 键可以是任何数据类型 |
| 键不排序 | 键按插入排序 |
| 有默认键 | 没有默认键 |
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
// 创建 Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
let text = "";
fruits.forEach(function (value, key) {
text += key + '=' + value + "<br>"
})
document.getElementById("demo").innerHTML = fruits instanceof Map;
</script>
</body>
</html>
<!-- true -->
Map.entries()
entries() 方法返回一个带有 Map 中 [key,values] 的迭代器对象：
实例
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
// 创建 Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
let text = "";
for (const x of fruits.entries()) {
text += x + "<br>"
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
<!--
apples,500
bananas,300
oranges,200
-->
Map.keys()
keys() 方法返回一个迭代器对象，其中包含 Map 中的键：
实例
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
// 创建 Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
let text = "";
for (const x of fruits.keys()) {
text += x + "<br>"
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
<!--
apples
bananas
oranges
-->
Map.values()
例子 1
values() 方法返回一个迭代器对象，其中包含 Map 中的值：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
// 创建 Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
let text = "";
for (const x of fruits.values()) {
text += x + "<br>"
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
<!--
500
300
200
-->
例子 2
您可以使用 values() 方法对 Map 中的值求和：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
// 创建 Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
let total = 0;
for (const x of fruits.values()) {
total += x;
}
document.getElementById("demo").innerHTML = total;
</script>
</body>
</html>
<!--
1000
-->
将对象用作键
例子 1
能够将对象用作键是 Map 的一项重要特性
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
// 创建对象
const apples = { name: 'Apples' };
const bananas = { name: 'Bananas' };
const oranges = { name: 'Oranges' };
// 创建 Map
const fruits = new Map();
// 将对象添加到 Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
document.getElementById("demo").innerHTML = fruits.get(apples);
</script>
</body>
</html>
<!--
1000
-->
例子 2
请记住：键是对象（apples），而不是字符串（"apples"）：
<!DOCTYPE html>
<html>
<p id="demo"></p>
<script>
// 创建对象
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// 创建 Map
const fruits = new Map();
// 向 Map 添加元素
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
document.getElementById("demo").innerHTML = fruits.get("apples");
</script>
</body>
</html>
<!--
undefined
-->