用new Map对象数组减少循环

语法
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,就可以看到筛选过后的项了

如有不当住处,烦请指正

    原文作者:其实我喜欢喝咖啡
    原文地址: https://segmentfault.com/a/1190000019873463
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞