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

前端之家收集整理的这篇文章主要介绍了详细了解JS Map,它和传统对象有什么区别?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
原文出处: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的键名可以是任意类型,让我们来看一个例子。

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

输出结果:1 2

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

  1. var firstInstance = { id: 1 };
  2. var secondInstance = { id: 2 };
  3.  
  4. var sqlServer = {};
  5.  
  6. sqlServer[firstInstance] = "sqlServer1";
  7. 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. let myMap = new Map();
  2. console.log(myMap);

输出结果:  

 

 

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

如何初始化Map?

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

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

使用Array

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

输出结果

 

使用set() 方法

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

输出结果

 

 

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

使用 get() 方法

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

  1. let sqlServerInstances = new Map();
  2.  
  3. sqlServerInstances.set('sql_DEV_Instance','MS_sqlSERVER_1');
  4. sqlServerInstances.set('sql_UAT_Instance','MS_sqlSERVER_2');
  5. sqlServerInstances.set('sql_PROD_Instance','MS_sqlSERVER_3');
  6.  
  7. console.log(sqlServerInstances.get("sql_DEV_Instance")); //output: MS_sqlSERVER_1
  8. console.log(sqlServerInstances.get('sql_UAT_Instance')); //output: MS_sqlSERVER_2
  9. console.log(sqlServerInstances.get("sql_PROD_Instance")); //output: MS_sqlSERVER_3
  10. console.log(sqlServerInstances.get("sql ")); //output: undefined

使用 has() 方法

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

  1. let sqlServerInstances = new Map();
  2.  
  3. sqlServerInstances.set('sql_DEV_Instance','MS_sqlSERVER_3');
  4.  
  5. console.log(sqlServerInstances.has("sql_PROD_Instance")) //output: true
  6. console.log(sqlServerInstances.has("sql_PROD2_Instance")) //output: false

使用 clear() 方法

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

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

使用 delete() 方法

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

  1. let sqlServerInstances = new Map();
  2.  
  3. sqlServerInstances.set('sql_DEV_Instance','MS_sqlSERVER_3');
  4.  
  5. //let's delete the UAT instance
  6. console.log(sqlServerInstances.get('sql_UAT_Instance')); //output: MS_sqlSERVER_2
  7. console.log(sqlServerInstances.delete('sql_UAT_Instance')); //deletes the key/value pair
  8. console.log(sqlServerInstances.has('sql_UAT_Instance')); //output: false
  9. console.log(sqlServerInstances.get('sql_UAT_Instance')); //output: undefined

Map遍历的方式

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

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

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

使用 keys() 方法

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

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

遍历key

  1. /**
  2. * Output
  3. * 1
  4. * 2
  5. * 3
  6. * 4
  7. * 5
  8. */
  9. for (const key of myFavoriteBooks.keys()) {
  10. console.log(key);
  11. }
  12. //end of iteration over the keys

使用 values() 方法

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

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

遍历value  

  1. /**
  2. * Output
  3. * Rich Dad Poor Dad
  4. * The Magic of Thinking Big
  5. * Think and Grow Rich
  6. * How to Win Friends & Influence People
  7. * Shoe Dog
  8. */
  9. for (const value of myFavoriteBooks.values()) {
  10. console.log(value);
  11. }
  12. //end of iteration over the values

使用 entry() 方法

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

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

遍历条目

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

散布运算符遍历Map

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

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

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

总结

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

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

 

猜你在找的Web前端相关文章