乐趣区

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

如有不当住处,烦请指正

退出移动版