JavaScript 地图简介

介绍

JavaScript编程语言随着时间的推移而演变,带来了许多新功能。 2015年进行了重大更新改变了开发人员使用该语言的方式。 JavaScript 2015(ES6)引入了一个名为 Map的功能。

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

前提条件

您可以从我们的 JavaScript 教程系列和关于 JavaScript 对象特别在本教程中了解更多关于 JavaScript 的信息。

您还应该能够在您的网页浏览器或喜爱的文本编辑器中使用 JavaScript Developer Console来执行JavaScript代码示例。本教程中的示例使用Chrome JavaScript控制台执行代码。

创建新地图

首先,在您的网页浏览器中打开文本编辑器或JavaScript控制台,创建一个新的地图对象,以新地图()的值初始化一个名为项目的变量:

1let items = new Map();

您创建的项目变量包含一个空的地图对象. 您可以通过键入在控制台中观察项目变量的内容:

1items;

1[secondary_label Output]
2Map(0) {size: 0}

请注意,输出显示地图对象的大小为0。地图对象上有方法可以用来更新它,地图对象上也有属性可以用来收集有关地图的信息。

使用地图方法

地图对象包含方法,您可以使用它们来操纵您的关键值对。

使用「設定( )」方法

您可以用 .set() 方法填充空的 Map 对象. .set() 方法需要两个参数:一个 key 可以用来识别一个项目和该项目的 value。

这是用 `.set() 方法填写 Map 对象的关键值对的语法:

1your_data.set(key, value);

例如,若要用一些新的键值对填充项目地图对象,请在您的控制台中附加项目变量,其中包含以下行:

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

您也可以将关键值对链接在一起,如下:

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

填写项目地图对象后,您可以用一些关键值对进行双重检查,通过在控制台中输入它来确定是否正确填写。

1items;

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

使用.get() 方法

要从地图对象中获取一个值,请使用 .get() 方法. 您必须知道密钥才能获取一个值。

从项目地图对象中获取一个值,使用已知密钥附加.get()方法:

1items.get('item-1');

1[secondary_label Output]
2'Car'

如果您输入了无效的密钥或无法找到您正在搜索的密钥,此方法将返回未定义:

1items.get('item-5');

1[secondary_label Output]
2undefined

「有(有)」方法

您可以在 Map 对象中搜索,以确定使用 .has() 方法是否存在特定密钥:

1items.has('item-4');

1[secondary_label Output]
2true

输出是布尔式,如果钥匙在地图对象中找到,返回true,如果不是,则返回false:

1items.has('item-10');

1[secondary_label Output]
2false

用`删除`方法

您可以使用 .delete() 方法从地图对象中删除一个项目:

1items.delete('item-2');

1[secondary_label Output]
2true

输出将返回真以成功删除该项目,如果在地图对象中找不到指定密钥的项目,则将返回假。

「清晰( )」方法

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

1items.clear();

1[secondary_label Output]
2undefined

在使用 .clear() 方法后,如果您在您的 items' 地图对象中输入控制台,您会注意到它不再包含任何条目:

1items;

1[secondary_label Output]
2Map(0) {size: 0}

使用「.size」地圖屬性

如果您想知道地图对象的当前大小,可以使用 .size 属性输出它包含多少条条目:

1items.size;

1[secondary_label Output]
20

请注意,在.size之后没有()。这是因为.size不是一种方法,而是您可以在地图对象中访问,以从中收集信息的属性。

从一个 Array 初始化地图

您可能会遇到具有 _ 多维数组的数据集,这些数组是数组中的数组. 如果内部数组有两个值,则可以使用该数组中的第一个值作为关键标识符,第二个数组值作为地图值。

要证明这一点,请在您的控制台或文本编辑器中输入以下行:

1const food = [
2  ['food-item-1', 'Pizza'],
3  ['food-item-2', 'Burger'],
4  ['food-item-3', 'Taco'],
5];
6
7let menu = new Map(food);
8
9menu.get('food-item-2');

1[secondary_label Output]
2'Burger'

在本示例中,多维数组中包含有两个不同的值的数组,第一个值为食物项目-1,第二个值为Pizza,作为新地图对象的值。

您会注意到,当您从数组创建一个新的地图对象时,您将数组作为一个参数。

<$>[注] **注:**重要的是要理解,当您创建新地图对象时,您不会更改原始数组。

一旦您创建了数组副本,您可以使用地图方法,例如 .get(),以更改和编辑地图对象。

在地图对象上迭代

您可以通过使用像 for...of这样的循环对地图对象进行迭代。

创建一个新的活动地图对象,并将其设置为四个不同的关键值对。

 1let activities = new Map();
 2
 3activities.set(1, 'Snowboarding');
 4activities.set(2, 'Car Racing');
 5activities.set(3, 'Canoeing');
 6activities.set(4, 'Tennis');
 7
 8for (let [number, activity] of activities) {
 9  console.log(`Activity ${number} is ${activity}`);
10}

1[secondary_label Output]
2Activity 1 is Snowboarding
3Activity 2 is Car Racing
4Activity 3 is Canoeing
5Activity 4 is Tennis

您也可以使用 .forEach() 方法以相同的方式重复地图。

<$>[注] **注:**请注意,在forEach()调用函数中的第一个参数是值,第二个参数是密钥。

下面的结果将与for...of示例相同:

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

1[secondary_label Output]
2Activity 1 is Snowboarding
3Activity 2 is Car Racing
4Activity 3 is Canoeing
5Activity 4 is Tennis

结论

在本教程中,您创建了一个新的地图对象,并了解更新它的不同方法. 您可以继续探索我们的如何编码在JavaScript系列了解更多关于JavaScript的内部运作。