详细了解JS Map，它和传统对象有什么区别？

 

一直以来，JavaScript使用数组和对象来定义和存放结构化数据， 在这篇文章中，我们将一起深挖另一种对象Map的一切，我们将会去了解它是什么、如何遍历、都包括什么属性和方法以及优缺点是什么。

介绍

JavaScript的Map对象数据结构类似于例如C＃，Java或C ++中的字典，本质是一组包含键值对的集合，如果你了解其他语言的键/值对数据结构的概念的话，那么对您立即掌握Map基本概念是很有帮助的。不过，即便你之前没有接触过任何一种语言，那也不必担心，我们会从基础知识开始讲起的。

在将Map引入JavaScript语言之前，Object是创建键/值对数据结构的主要方式。而Map与常规对象有什么区别？

主要有两点不同：

1. key的类型无限制

Object无法使用非字符串值作为键名，但Map的键名可以是任意类型，让我们来看一个例子。

1 2 3 4

var firstInstance = { id: 1 }; var secondInstance = { id: 2 }; console.log(firstInstance["id"]); console.log(secondInstance ["id"]);

输出结果：1 2

下面我们将通过重新造轮子的形式让你了解Map和上述例子有什么区别　　

1 2 3 4 5 6 7

var firstInstance = { id: 1 }; var secondInstance = { id: 2 };   var sqlServer = {};   sqlServer[firstInstance] = "SQLServer1"; sqlServer[secondInstance] = "SQLServer2";

firstInstance和secondInstance这两个对象都产生了“[Object Object]”。因此，将这两个对象传入sqlServer中作为其键名，就能使其达到类似Map的效果，以下是输出结果。　　

在映射不同数据类型时，这个特性将提供极大的灵活性。

2. 可直接遍历

常规对象里，为了遍历keys、values和entries，你必须将它们转换为数组，如使用Object.keys()、Object.values()和Object.entries()，或使用for ... in，另外for ... in循环还有一些限制：它仅仅遍历可枚举属性、非Symbol属性，并且遍历的顺序是任意的。

但Map可直接遍历，且因为它是键值对集合，所以可直接使用for…of或forEach来遍历。这点不同的优点是为你的程序带来更高的执行效率。

什么是JavaScript Map？

从根上讲，Map是键/值对的集合。这些键和值可以是任何数据类型。在ES6语法下， 创建JavaScript map对像非常简单，让我们看看例子

1 2	let myMap = new Map(); console.log(myMap);

输出结果：　　

如您所见，我们只是创建了一个空的Map对象而已，只需使用new Map()，就可以在JavaScript中直接创建新的Map。

如何初始化Map？

如何创建和初始化一个包含数据的map？

有多种方法可以对其进行初始化。让我们一个接一个地看一看。

使用Array

1 2 3 4 5 6 7 8 9

let topProgrammingLanguages = new Map([     [1, 'JavaScript'],     [2, 'Python'],     [3, 'Java'],     [4, 'C#'],     [5, 'C'] ]);   console.log(topProgrammingLanguages);

输出结果

使用set() 方法

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

let myFavoriteBooks = new Map();   myFavoriteBooks.set(1, 'Rich Dad Poor Dad');   myFavoriteBooks.set(2, 'The Magic of Thinking Big');   myFavoriteBooks.set(3, 'Think and Grow Rich');   myFavoriteBooks.set(4, 'How to Win Friends & Influence People');   myFavoriteBooks.set(5, 'Shoe Dog');        console.log(myFavoriteBooks);

输出结果

使用get、has、includes、clear和delete方法

使用 get() 方法

该方法返回key对应的value，如果不存在，则返回undefined。

1 2 3 4 5 6 7 8 9 10

let sqlServerInstances = new Map();   sqlServerInstances.set('SQL_DEV_Instance', 'MS_SQLSERVER_1'); sqlServerInstances.set('SQL_UAT_Instance', 'MS_SQLSERVER_2'); sqlServerInstances.set('SQL_PROD_Instance', 'MS_SQLSERVER_3');   console.log(sqlServerInstances.get("SQL_DEV_Instance"));   //output: MS_SQLSERVER_1 console.log(sqlServerInstances.get('SQL_UAT_Instance'));   //output: MS_SQLSERVER_2 console.log(sqlServerInstances.get("SQL_PROD_Instance"));  //output: MS_SQLSERVER_3 console.log(sqlServerInstances.get("SQL "));  //output: undefined

使用 has() 方法

该方法用于检查Map是否有指定key对应的value。　　

1 2 3 4 5 6 7 8

let sqlServerInstances = new Map();   sqlServerInstances.set('SQL_DEV_Instance', 'MS_SQLSERVER_1'); sqlServerInstances.set('SQL_UAT_Instance', 'MS_SQLSERVER_2'); sqlServerInstances.set('SQL_PROD_Instance', 'MS_SQLSERVER_3');   console.log(sqlServerInstances.has("SQL_PROD_Instance"))   //output: true console.log(sqlServerInstances.has("SQL_PROD2_Instance"))  //output: false

使用 clear() 方法

该方法用于清空指定map对象中的所有内容。　　

1 2 3 4 5 6 7 8 9 10

let products = new Map();   products.set("PRODUCT_001", { name: "Product 1" }); products.set("PRODUCT_002", { name: "Product 2" }); products.set("PRODUCT_003", { name: "Product 3" });   //let's get the size of the Map before invoking clear() console.log(products.size);  //output: 3 products.clear();            //clears the Map-products console.log(products.size);  //output: 0

使用 delete() 方法

该方法用于删除map中指定key对应的一组key-value元素　　

1 2 3 4 5 6 7 8 9 10 11

let sqlServerInstances = new Map();   sqlServerInstances.set('SQL_DEV_Instance', 'MS_SQLSERVER_1'); sqlServerInstances.set('SQL_UAT_Instance', 'MS_SQLSERVER_2'); sqlServerInstances.set('SQL_PROD_Instance', 'MS_SQLSERVER_3');   //let's delete the UAT instance console.log(sqlServerInstances.get('SQL_UAT_Instance'));    //output: MS_SQLSERVER_2 console.log(sqlServerInstances.delete('SQL_UAT_Instance')); //deletes the key/value pair console.log(sqlServerInstances.has('SQL_UAT_Instance'));    //output: false console.log(sqlServerInstances.get('SQL_UAT_Instance'));    //output: undefined

Map遍历的方式

在本节中，我们将了解如何遍历Map。但是，在此之前，我们需要了解以下方法：keys、values和entries，这些方法将在我们开始使用for-of循环遍历map对象时很有帮助。

首先，我们将创建一个map对象作为数据源

1 2 3 4 5 6

let myFavoriteBooks = new Map(); myFavoriteBooks.set(1, 'Rich Dad Poor Dad'); myFavoriteBooks.set(2, 'The Magic of Thinking Big'); myFavoriteBooks.set(3, 'Think and Grow Rich'); myFavoriteBooks.set(4, 'How to Win Friends & Influence People'); myFavoriteBooks.set(5, 'Shoe Dog');

使用 keys() 方法

该方法返回Map对象中每个元素的key。尤其是你在只需要遍历Map集合的键时，更是如此。

1 2	const myMap1 = new Map([[1, 'red'], [2, 'blue']]); console.log(myMap1.keys());     //output: { 1, 2 }

遍历key

1 2 3 4 5 6 7 8 9 10 11 12

/**  * Output  * 1  * 2  * 3  * 4  * 5  */ for (const key of myFavoriteBooks.keys()) {     console.log(key); } //end of iteration over the keys

使用 values() 方法

和keys方法对应，values方法返回的就是Map对象中的value集合。

1 2	const myMap2 = new Map([['Electronic Gadget', 'Smart Phone'], ['Input Devices', 'Mouse']]); console.log(myMap2.values());   //output: {"Smart Phone", "Mouse"}

遍历value　　

1 2 3 4 5 6 7 8 9 10 11 12

/**  * Output  * Rich Dad Poor Dad  * The Magic of Thinking Big  * Think and Grow Rich  * How to Win Friends & Influence People  * Shoe Dog  */ for (const value of myFavoriteBooks.values()) {     console.log(value); } //end of iteration over the values

使用 entry() 方法

该方法返回Map集合中每个 [key，value] 元素的对象。　　

1 2 3 4

const myMap3 = new Map([['Samsung', 'Smart Phone'],                ['Colgate', 'Toothpaste'], ['Coke', 'Soda']]); console.log(myMap3.entries());   //output: {"Samsung" => "Smart Phone",                                  //"Colgate" => "Toothpaste", "Coke" => "Soda"}

遍历条目

1 2 3 4 5 6 7 8 9 10 11 12

/**  * Output  * 1 "Rich Dad Poor Dad"  * 2 "The Magic of Thinking Big"  * 3 "Think and Grow Rich"  * 4 "How to Win Friends & Influence People"  * 5 "Shoe Dog"  */ for (const [key, value] of myFavoriteBooks.entries()) {     console.log(key, value); } //end of iteration over the entries

散布运算符遍历Map

在文章的最后一部分，我们将了解通过使用散布运算符（...）轻松遍历map对象，下面让我们看一个例子吧！

1 2 3 4 5

let fastFoods = new Map([[1, 'McDO'], [2, 'Burger King'], [3, 'KFC'],                         [4, 'Wendys'], [5, 'Pizza Hut']]);   console.log(...fastFoods.keys()); console.log(...fastFoods.values());

大家可以自行执行一下上面这段程序，看看运行结果是什么。

总结

在本文中，我们讨论了JavaScript Map对象集合。相信通过这篇文章，你已经对Map对象有了一定的了解了。在文末，展示了遍历Map的另一种形式for-of和散布运算符（...）来遍历集合。

如果有什么问题或补充，欢迎通过评论区留言告诉我。