转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。
原文出处：https://www.codeproject.com/Articles/5278387/Understanding-Maps-in-JavaScript
一直以来，JavaScript使用数组和对象来定义和存放结构化数据， 在这篇文章中，我们将一起深挖另一种对象Map的一切，我们将会去了解它是什么、如何遍历、都包括什么属性和方法以及优缺点是什么。
介绍
JavaScript的Map对象数据结构类似于例如C＃，Java或C ++中的字典，本质是一组包含键值对的集合，如果你了解其他语言的键/值对数据结构的概念的话，那么对您立即掌握Map基本概念是很有帮助的。不过，即便你之前没有接触过任何一种语言，那也不必担心，我们会从基础知识开始讲起的。
在将Map引入JavaScript语言之前，Object是创建键/值对数据结构的主要方式。而Map与常规对象有什么区别？
主要有两点不同：
1. key的类型无限制
Object无法使用非字符串值作为键名，但Map的键名可以是任意类型，让我们来看一个例子。
var firstInstance = { id: 1 };
var secondInstance = { id: 2 };
console.log(firstInstance["id"]);
console.log(secondInstance ["id"]);
输出结果：1 2
下面我们将通过重新造轮子的形式让你了解Map和上述例子有什么区别
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对像非常简单，让我们看看例子
let myMap = new Map();
console.log(myMap);
输出结果：
如您所见，我们只是创建了一个空的Map对象而已，只需使用new Map()，就可以在JavaScript中直接创建新的Map。
如何初始化Map？
如何创建和初始化一个包含数据的map？
有多种方法可以对其进行初始化。让我们一个接一个地看一看。
使用Array
let topProgrammingLanguages = new Map([
[1,'JavaScript'],[2,'Python'],[3,'Java'],[4,'C#'],[5,'C']
]);
console.log(topProgrammingLanguages);
输出结果
使用set() 方法
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。
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。
let sqlServerInstances = new Map();
sqlServerInstances.set('sql_DEV_Instance','MS_sqlSERVER_3');
console.log(sqlServerInstances.has("sql_PROD_Instance")) //output: true
console.log(sqlServerInstances.has("sql_PROD2_Instance")) //output: false
使用 clear() 方法
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元素
let sqlServerInstances = new Map();
sqlServerInstances.set('sql_DEV_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对象作为数据源
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集合的键时，更是如此。
const myMap1 = new Map([[1,'red'],'blue']]);
console.log(myMap1.keys()); //output: { 1,2 }
遍历key
/**
* 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集合。
const myMap2 = new Map([['Electronic Gadget','Smart Phone'],['Input Devices','Mouse']]);
console.log(myMap2.values()); //output: {"Smart Phone","Mouse"}
遍历value
/**
* 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] 元素的对象。
const myMap3 = new Map([['Samsung',['Colgate','Toothpaste'],['Coke','Soda']]);
console.log(myMap3.entries()); //output: {"Samsung" => "Smart Phone",//"Colgate" => "Toothpaste","Coke" => "Soda"}
遍历条目
/**
* 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对象，下面让我们看一个例子吧！
let fastFoods = new Map([[1,'McDO'],'Burger King'],'KFC'],'Wendys'],'Pizza Hut']]);
console.log(...fastFoods.keys());
console.log(...fastFoods.values());
大家可以自行执行一下上面这段程序，看看运行结果是什么。
总结
在本文中，我们讨论了JavaScript Map对象集合。相信通过这篇文章，你已经对Map对象有了一定的了解了。在文末，展示了遍历Map的另一种形式for-of和散布运算符（...）来遍历集合。
如果有什么问题或补充，欢迎通过评论区留言告诉我。