转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
原文出处: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_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对象中的所有内容。  

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_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对象作为数据源

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'], [2, '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', 'Smart Phone'],
['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'], [2, 'Burger King'], [3, 'KFC'],
[4, 'Wendys'], [5, 'Pizza Hut']]); console.log(...fastFoods.keys());
console.log(...fastFoods.values());

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

总结

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

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

详细了解JS Map,它和传统对象有什么区别?的更多相关文章

  1. js基本类型存放和对象存放的区别(对象遍历)

    js的基本类型,对象类型的应用在初学的时候,需要自己加以明确,明确了数据类型,在使用过程中才能正确使用变量.如下两个例子是摘自初学时的笔记,为大家提供参考. 1.对象可以存放属性和方法,js基本类型不 ...

  2. js map()处理数组和对象数据

    之前的文章梳理了JS数组与对象属性的遍历方法,本文介绍专门用以遍历并处理数据的map()方法. 一.原生map() map()是数组的一个方法,它创建一个新数组,其结果是该数组中的每个元素都调用一个提 ...

  3. Js基础知识7-Es6新增对象Map和set数据结构

    前言 JavaScript中对象的本质是键值对的集合,ES5中的数据结构,主要是用Array和Object,但是键只能是字符串.为了弥补这种缺憾,ES6带来了一种新的数据结构Map. Map也是键值对 ...

  4. js中内置有对象

    statpot:使用mongo+bootstrap+highcharts做统计报表 最近做了一个统计项目,这个统计项目大致的需求是统计接口的访问速度.客户端会调用一个接口来记录接口的访问情况,我的需求 ...

  5. JS中遍历数组、对象的方式

    1.标准的for循环遍历数组 //不打印自定义属性和继承属性 var array = [1,2,3]; for (var i = 0; i < array.length; i++) { cons ...

  6. JS基础-全局内置对象

    对象 JS中有那些内置对象 数据封装类对象 String.Array.Object.Boolean.Number 其他对象 Math.Date.RegExp.Error.Function.Argume ...

  7. jsp的C标签一般使用方法以及js接收servlet中的对象及对象数字

    jsp的C标签一般使用方法以及js接收servlet中的对象及对象数组 由于现流行的javaWeb框架提倡前后端分离,比如在SpringMvc中已经很少写servlet的一些东西:目前 前端jsp中大 ...

  8. JS对象与Dom对象与jQuery对象之间的区别

    前言 通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 $("#save&qu ...

  9. C#中??和?分别是什么意思? 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中,对象相等和对象一致分别指的是什么?

    C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...

随机推荐

  1. 【mysql数据库优化】

    sql优化:1.MYSQL逻辑分层 :连接层 服务层 引擎层 存储层 InnoDB(默认) :事务优先 (适合高并发操作:行锁) MyISAM :性能优先 (表锁) 2.sql的执行顺序:SQL : ...

  2. 利用Python操作MySQL数据库

    前言 在工作中,我们需要经常对数据库进行操作,比如 Oracle.MySQL.SQL Sever 等,今天我们就学习如何利用Python来操作 MySQL 数据库. 本人环境:Python 3.7.0 ...

  3. 8月份Python招聘情况怎么样?Python爬取招聘数据,并进行分析

    前言 拉勾招聘是专业的互联网求职招聘平台.致力于提供真实可靠的互联网招聘求职找工作信息.今天我们一起使用 python 采集拉钩的 python 招聘信息,分析一下找到高薪工作需要掌握哪些技术 开发环 ...

  4. opencv图片缩放与镜像

    一个练习的代码,先对图片进行缩放,然后再做镜像: import cv2 import numpy as np img = cv2.imread("src.jpg", 1) cv2. ...

  5. CSS可见格式化模型

    1.盒模型 1.1 盒子大小 盒模型描述了元素如何显示,以及如何相互作用.相互影响. 页面中的所有元素都被看作一个矩形盒子,这个盒子包含元素的内容.内边距.边框和外边距. 给元素应用的背景会作用于元素 ...

  6. css 命名规则 BEM!

    随着CSS的发展,使用CSS有语义化的命名约定和CSS层的分离,将有助于它的可扩展性,性能的提高和代码的组织管理.著作权归作者所有. BEM本质应该是一个css命名方案,最流行的命名规则之一就是BEM ...

  7. 2020-06-15:Redis分布式锁怎么解锁?

    福哥答案2020-06-15: 答案来自群成员:1.setnx:del2.set:lua+del3.redisson:@Overridepublic void unlock(String lockKe ...

  8. Vuex mapGetter的基本使用

    getter相当于Vuex中的计算属性 对 state 做处理再返回 mapGetters 把 Store 中的 getters 映射到组件中的计算属性中 Store文件 import Vue fro ...

  9. MySQL查看正在执行的SQL进程

    查看正在执行的SQL进程: show processlist; 查出来之后, 可以使用下面的命令终止SQL进程: kill ${进程ID}

  10. vue cli3.0使用svg全过程

    VUE-cli3使用 svg-sprite-loader svg-sprite-loader 的插件,用来根据导入的 svg 文件自动生成 symbol 标签并插入 html 1.安装依赖 npm i ...