JavaScript 地图


目录

    显示目录

Map 保存键值对,其中键可以是任何数据类型。

Map 会记住键的原始插入顺序。

基本地图方法

new Map()

创建一个新地图

set()

设置 Map 中键的值

get()

获取 Map 中某个键的值

delete()

删除由键指定的 Map 元素

has()

如果 Map 中存在键则返回 true

forEach()

为 Map 中的每个键/值对调用一个函数

entries()

返回具有 Map 中的 [key, value] 对的迭代器

size

返回 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>


JavaScript 对象与地图

JavaScript 对象和映射之间的区别:

目的

可迭代:不可直接迭代

尺寸:没有尺寸属性

键类型:键必须是字符串(或符号)

按键顺序:按键顺序不正确

默认值:有默认键

地图

可迭代:直接可迭代

尺寸:有尺寸属性

键类型:键可以是任何数据类型

键顺序:键按插入顺序排列

默认值:没有默认键


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