Map 保存键值对,其中键可以是任何数据类型。
Map 会记住键的原始插入顺序。
创建一个新地图
设置 Map 中键的值
获取 Map 中某个键的值
删除由键指定的 Map 元素
如果 Map 中存在键则返回 true
为 Map 中的每个键/值对调用一个函数
返回具有 Map 中的 [key, value] 对的迭代器
返回 Map 中的元素数量
您可以通过以下方式创建 JavaScript 地图:
将数组传递给 new Map()
创建地图并使用 Map.set()
new Map()
方法您可以通过将数组传递给 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>
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", 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([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
fruits.set("apples", 200);
document.getElementById("demo").innerHTML = fruits.get("apples");
</script>
</body>
</html>
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
属性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>
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>
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>
可迭代:不可直接迭代
尺寸:没有尺寸属性
键类型:键必须是字符串(或符号)
按键顺序:按键顺序不正确
默认值:有默认键
可迭代:直接可迭代
尺寸:有尺寸属性
键类型:键可以是任何数据类型
键顺序:键按插入顺序排列
默认值:没有默认键
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>
entries()
方法entries()
方法返回一个迭代器对象,其中包含 Map 中的 [key, value]:
// 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>
除 Internet Explorer 外,所有浏览器都支持 JavaScript 地图:
Chrome | Edge | Firefox | Safari | Opera |