JavaScript 中的地图简介

介绍

JavaScript 编程语言随着时间的推移不断发展，带来了许多新功能。2015年进行了一次重大更新，改变了开发人员使用该语言的方式。JavaScript 2015 (ES6) 引入了一项名为Map的功能。不要与数组方法混淆.map()，内置的 Map 对象是另一种构造数据的方法。地图是不同且有序的键值对的集合。

本教程将介绍一些概念，帮助您理解并为 JavaScript 应用程序创建新的 Map 对象。

先决条件

要学习本教程，您应该对 JavaScript 和 Object 数据类型有大致的了解。您可以从我们的JavaScript 教程系列中了解有关 JavaScript 的更多信息，并在本教程中了解有关 JavaScript 对象的更多信息。

您还应该能够使用Web 浏览器中的JavaScript 开发人员控制台或您最喜欢的文本编辑器来执行 JavaScript 代码示例。本教程中的示例使用 Chrome JavaScript 控制台来执行代码。您可以使用任何您喜欢的工具。

创建新地图

首先打开文本编辑器或 Web 浏览器中的 JavaScript 控制台。通过初始化名为 的变量来创建一个新的 Map 对象，items其值为new Map()：

let items = new Map();

您创建的变量包含一个空的 Map 对象。您可以通过输入以下内容在控制台中items观察变量的内容：items

items;

Output
Map(0) {size: 0}

请注意，输出显示 Map 对象的大小为0。 Map 对象上有一些方法可用于更新它。 Map 对象上还有一些属性可用于收集有关 Map 的信息。

使用 Map 方法

Map 对象包含可用于操作键值对的方法。

.set()方法

您可以使用该方法填充空的 Map 对象.set()。该.set()方法接受两个参数：一个键（可用于标识项目）和项目的值。与对象文字不同，键和值对可以是任何数据类型。

这是使用该方法用键值对填充 Map 对象的语法.set()：

your_data.set(key, value);

items例如，要用一些新的键值对填充您的Map 对象，请items在控制台中将以下几行附加到变量中：

items.set('item-1','Car');
items.set('item-2', 'Lawn Mower');
items.set('item-3', 'Bicycle');
items.set('item-4', 'Rake');

您还可以像这样将键值对链接在一起：

items.set('item-1', 'Car')
      .set('item-2', 'Lawn Mower')
      .set('item-3', 'Bicycle')
      .set('item-4','Rake');

items在用一些键值对填充Map 对象后，您可以通过在控制台中输入它来仔细检查它是否已正确填充。这将返回整个itemsMap 对象给您：

items;

Output
Map(4) {'item-1' => 'Car', 'item-2' => 'Lawn Mower', 'item-3' => 'Bicycle', 'item-4' => 'Rake'}

.get()方法

要从 Map 对象中检索值，请使用方法.get()。您必须知道键才能检索值。

items通过在.get()方法中附加已知键来从 Map 对象中检索值：

items.get('item-1');

Output
'Car'

如果您输入了无效的密钥或者找不到您要搜索的密钥，则此方法将返回undefined：

items.get('item-5');

Output
undefined

.has()方法

您可以使用下列方法在 Map 对象内进行搜索以确定特定键是否存在.has()：

items.has('item-4');

Output
true

输出是布尔值。true如果在 Map 对象中找到该键，则返回该值；false如果未找到，则返回该值：

items.has('item-10');

Output
false

.delete()方法

您可以使用该方法从 Map 对象中删除一个项目.delete()：

items.delete('item-2');

Output
true

输出返回表示成功删除了该项目。如果在 Map 对象中未找到具有指定键的项目，true它将返回。false

.clear()方法

您可以使用该方法从 Map 对象中删除所有项目.clear()：

items.clear();

Output
undefined

返回值为undefined预期值。使用该方法后，如果您在控制台中.clear()输入Map 对象，您会注意到它不再包含任何条目：items

items;

Output
Map(0) {size: 0}

使用.sizeMap 属性

如果你想知道 Map 对象的当前大小，你可以使用该.size属性来输出它包含的条目数：

items.size;

Output
0

请注意，没有()after .size。这是因为.size这不是方法，而是您可以在 Map 对象上访问以收集信息的属性。.size当您不确定在特定数据集中处理多少个条目时，使用该属性可能会有所帮助。

从数组初始化地图

您可能会遇到包含多维数组的数据集，这些数组是数组中的数组。如果内部数组恰好有两个值，则可以使用该数组中的第一个值作为键标识符，将第二个数组值用作 Map 值。

为了演示这一点，请在控制台或文本编辑器中输入以下几行：

const food = [
  ['food-item-1', 'Pizza'],
  ['food-item-2', 'Burger'],
  ['food-item-3', 'Taco'],
];

let menu = new Map(food);

menu.get('food-item-2');

Output
'Burger'

在此示例中，多维数组包含具有两个不同值的数组。 的第一个值food-item-1用作键， 数组中的第二个值用作Pizza新 Map 对象的值。

您会注意到，当您从数组创建新的 Map 对象时，您会将该数组作为参数传入。

一旦创建了数组的副本，您就可以使用 Map 方法（例如.get()）来更改和编辑 Map 对象。

迭代地图对象

您可以使用for…of之类的循环来迭代 Map 对象。

创建一个新的activitiesMap 对象，并用四个不同的键值对设置它。然后，您可以使用循环for...of来迭代 Map 对象项：

let activities = new Map();

activities.set(1, 'Snowboarding');
activities.set(2, 'Car Racing');
activities.set(3, 'Canoeing');
activities.set(4, 'Tennis');

for (let [number, activity] of activities) {
  console.log(`Activity ${number} is ${activity}`);
}

Output
Activity 1 is Snowboarding
Activity 2 is Car Racing
Activity 3 is Canoeing
Activity 4 is Tennis

您还可以使用.forEach()相同的方法迭代 Map。

以下将产生与for...of示例相同的结果：

activities.forEach((value, key) => {
  console.log(`Activity ${key} is ${value}`);
});

Output
Activity 1 is Snowboarding
Activity 2 is Car Racing
Activity 3 is Canoeing
Activity 4 is Tennis

结论

在本教程中，您创建了一个新的 Map 对象并了解了更新它的不同方法。您可以继续探索我们的“如何使用 JavaScript 编写代码”系列，以了解有关 JavaScript 内部工作原理的更多信息。