用new Map对象数组减少循环

迭代涟漪
• 阅读 2655

语法
let mapObj = new Map()。

方法

clear

从映射中移除所有元素。

delete

从映射中移除指定的元素。

forEach

对映射中的每个元素执行指定操作。

get

返回映射中的指定元素。

has

如果映射包含指定元素,则返回 true。

set

添加一个新建元素到映射。

toString

返回映射的字符串表示形式。

valueOf

返回指定对象的原始值。

比如有这样一种场景:后端返回的数据是一个数组,这个数组中有很多数据,可是我有某个地方只需要其中一部分数据,并且那部分数据需要进行处理。可能我描述的不够清楚。举个例子
后端返回一个数组的数据list[{},{},{},{},...]
数组里面的对象都含有id属性
与这个数组一起返回的还有需要显示的那一部分数据的id,前台需要做的是筛选出这些数据,然后在页面上渲染。

假设这是后端返回的list
let list1= [
{id:1, name:'21'},
{id:2, name:'22'},
{id:3, name:'23'},
{id:4, name:'24'},
{id:5, name:'25'},
{id:6, name:'26'},
{id:7, name:'27'},
{id:8, name:'28'}]
ids: [1,2,3]
ids这个数组就是需要在特定的地方显示的数组里面的数据的id

普通的做法可能就是做map匹配
let aaa = []; // 定义一个数组接筛选的数据
list1.map(item => {

let bbb = false; // 定义一个状态,判断是否为筛选项
ids.map(value => ({if(item.id === value){bbb = true}))
if(bbb === true){aaa.push(item)};

})
上面的这种方法肯定能够实现这个效果,它的原理就是循环两个数组,在一个数组里面再循环一个数组,然后进行判断,取对应的项,其时间复杂度为(n的平方)。

当然除了这种方法,还有比这个更高效的方法,就是用new Map()方法,它的高效体现为时间复杂度上,就是可以把上面那个方法的(n的平方)的时间复杂度降为n,它可以把一个数组变为一个对象数组,即key:{} 的形式,这个时候就可以用new Map()的get(key)方法拿到相对应的项,在push到一个数组里面,就是所需要的数组了。

let ccc = new Map();
let ddd = [];
list1.map(item => {

ccc.set(item.id,item); // 这个时候ccc这个new Map()数组里面就已经变为了对象数组,形式为[1:{id:1,name:'21'},...]

}
//这个时候就可以用返回的这个数组id去取相对应的数组项了
ids.map(item=>{

return ddd.push(ccc.get(item)); 
//注意,new Map()方法中的get方法去取相对应key值项的时候,它并没有循环所有的项,而是直接取的

})
console.log(ddd); // 这个时候你打印一下数组ddd,就可以看到筛选过后的项了

如有不当住处,烦请指正

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
虾米大王 虾米大王
3年前
java代码068
code068.jspsession添加用户移除用户监听<%VectorvectoruserList.getList();if(vector!null&&vector.size()0)for(inti0;i
Stella981 Stella981
3年前
Python+Selenium自动化篇
本篇文字主要学习selenium定位页面元素的集中方法,以百度首页为例子。0.元素定位方法主要有:id定位:find\_element\_by\_id('')name定位:find\_element\_by\_name('')class定位:find\_element\_by\_class\_name(''
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
3年前
HIVE 时间操作函数
日期函数UNIX时间戳转日期函数: from\_unixtime语法:   from\_unixtime(bigint unixtime\, string format\)返回值: string说明: 转化UNIX时间戳(从19700101 00:00:00 UTC到指定时间的秒数)到当前时区的时间格式举例:hive   selec
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
迭代涟漪
迭代涟漪
Lv1
东边日出西边雨,道是无晴却有晴。
文章
3
粉丝
0
获赞
0