Map 保存键值对,其中键可以是任何数据类型。
Map 会记住键的原始插入顺序。
地图有一个表示地图大小的属性。
创建一个新的地图对象
设置 Map 中键的值
获取 Map 中某个键的值
从 Map 中删除所有元素
删除由键指定的 Map 元素
如果 Map 中存在键则返回 true
为 Map 中的每个键/值对调用回调
返回具有 Map 中的 [key, value] 对的迭代器对象
返回带有 Map 中的键的迭代器对象
返回 Map 中值的迭代器对象
返回 Map 元素的数量
您可以通过以下方式创建 JavaScript 地图:
将数组传递给 new Map()
创建地图并使用 Map.set()
新地图()
您可以通过将数组传递给 new Map()
构造函数来创建 Map:
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Creating a Map from an Array:</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
document.getElementById("demo").innerHTML = fruits.get("apples");
</script>
</body>
</html>
Map.set()
您可以使用 set()
方法向 Map 添加元素:
// Create a Map
const fruits = new Map();
// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.set():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map();
// Set Map Values
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
document.getElementById("demo").innerHTML = fruits.get("apples");
</script>
</body>
</html>
set()
方法也可用于更改现有的 Map 值:
fruits.set("apples", 500);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.set():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
fruits.set("apples", 200);
document.getElementById("demo").innerHTML = fruits.get("apples");
</script>
</body>
</html>
Map.get()
get()
方法获取 Map 中键的值:
fruits.get("apples"); // Returns 500
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.get():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
document.getElementById("demo").innerHTML = fruits.get("apples");
</script>
</body>
</html>
地图大小
size
属性返回 Map 中的元素数量:
fruits.size;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.size:</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
document.getElementById("demo").innerHTML = fruits.size;
</script>
</body>
</html>
Map.delete()
delete()
方法删除 Map 元素:
fruits.delete("apples");
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Deleting Map elements:</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
// Delete an Element
fruits.delete("apples");
document.getElementById("demo").innerHTML = fruits.size;
</script>
</body>
</html>
Map.clear()
clear()
方法从 Map 中删除所有元素:
fruits.clear();
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Clearing a Map:</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
// Clear the Map
fruits.clear();
document.getElementById("demo").innerHTML = fruits.size;
</script>
</body>
</html>
Map.has()
如果 Map 中存在键,则 has()
方法返回 true:
fruits.has("apples");
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.has():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
document.getElementById("demo").innerHTML = fruits.has("apples");
</script>
</body>
</html>
fruits.delete("apples");
fruits.has("apples");
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Maps</h2>
<p>Using Map.has():</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
// Delete an Element
fruits.delete("apples");
document.getElementById("demo").innerHTML = fruits.has("apples");
</script>
</body>
</html>
typeof
返回对象:
// Returns object:
typeof fruits;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Map typeof:</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
document.getElementById("demo").innerHTML = typeof fruits;
</script>
</body>
</html>
instanceof
Map 返回 true:
// Returns true:
fruits instanceof Map;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Map instanceof:</p>
<p id="demo"></p>
<script>
// Create a Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
document.getElementById("demo").innerHTML = fruits instanceof Map;
</script>
</body>
</html>
直接可迭代
拥有大小属性
键可以是任何数据类型
键按插入顺序排列
没有默认键
Map.forEach()
forEach()
方法为 Map 中的每个键/值对调用回调:
// List all entries
let text = "";
fruits.forEach (function(value, key) {
text += key + ' = ' + value;
})
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.forEach():</p>
<p id="demo"></p>
<script>
// Create a 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 = text;
</script>
</body>
</html>
Map.entries()
entries()
方法返回一个迭代器对象,其中包含 Map 中的 [key,values]:
// List all entries
let text = "";
for (const x of fruits.entries()) {
text += x;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.entries():</p>
<p id="demo"></p>
<script>
// Create a 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>
Map.keys()
keys()
方法返回一个迭代器对象,其中包含 Map 中的键:
// List all keys
let text = "";
for (const x of fruits.keys()) {
text += x;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.keys():</p>
<p id="demo"></p>
<script>
// Create a 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>
Map.values()
values()
方法返回一个迭代器对象,其中包含 Map 中的值:
// List all values
let text = "";
for (const x of fruits.values()) {
text += x;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.values():</p>
<p id="demo"></p>
<script>
// Create a 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>
您可以使用 values()
方法对 Map 中的值求和:
// Sum all values
let total = 0;
for (const x of fruits.values()) {
total += x;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Using Map.values():</p>
<p id="demo"></p>
<script>
// Create a 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>
能够使用对象作为键是一个重要的 Map 功能。
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Create a Map
const fruits = new Map();
// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p>Being able to use objects as keys is an important Map feature:</p>
<p id="demo"></p>
<script>
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Create a Map
const fruits = new Map();
// Add the Objects to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
document.getElementById("demo").innerHTML = fruits.get(apples);
</script>
</body>
</html>
请记住:键是一个对象(苹果),而不是字符串(“苹果”):
fruits.get("apples"); // Returns undefined
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Map Objects</h2>
<p id="demo"></p>
<script>
// Create Objects
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Create a Map
const fruits = new Map();
// Add Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
document.getElementById("demo").innerHTML = fruits.get("apples");
</script>
</body>
</html>
除 Internet Explorer 外,所有浏览器都支持 JavaScript 地图:
Chrome | Edge | Firefox | Safari | Opera |