微信扫一扫关注微信公众号阿勇学前端

个人chatgpt欢迎使用

ayongnice.love/chatgpt/ 在我们平常前端实际项目当中,有时候需要请求多个接口数据,由于数据量太大问题,导致后端不能把相对应数据整合在一起,需要我们前端来针对两个Array 数据类型的数组根据相同字段名进行内容合并

这是我们平常前端项目中处理数据经常会碰到的问题

一般有人会这么解决

/**  
* 根据相同ID 合并成绩  
* @type {[{name: string, id: number},{name: string, id: number}]}  
*/  
  
const arr = [{id: 1, name: 'yuanlin'}, {id: 2, name: 'zhangqing'}]  
const res = [{id: 1, chengji: '96'}, {id: 1, chengji: '100'}]  
arr.forEach((item) => {  
res.forEach((itemRes) => {  
if (item.id === itemRes.id) {  
     arr.chengji = res.chengji  
     }  
   })  
})  
  
console.log(arr); //根据相同ID 合并成绩

虽然这种处理方式非常简单,代码量少,单这种方式在实际项目中会消耗很大性能,除非数据量明确非常少可以这么做;为什么会消耗性能呢?

因为 arr res两个数组进行了嵌套循环,数组之间一旦进行了嵌套循环,那么循环总次数就是两个数组的length 乘积, 假如有100条数据, 那么要循环 100*100 = 10000 次.

**所以我们大部分数据整合方式不能那样写,我们需要这样做
**

/** * 根据相同ID 合并成绩 * @type {[{name: string, id: number},{name: string, id: number}]} */  
const arr = [{id: 1, name: 'yuanlin'}, {id: 2, name: 'zhangqing'}]  
const res = [{id: 1, chengji: '96'}, {id: 1, name: '100'}]  
  
//定义一个对象,用来存放以 相同id为 key,数据为value  
/** * arr与res数组共同标识id，map对象中 key : map[_.id] value: id所在的整个对象 */  
const map = {};  
res.forEach(_ => map[_.id] = _)  
  
/** * arr与res数组共同标识id，通过arr循环中有map[_.id] 访问map对象方法 即可找到 对应id 的成绩，将其通过Object.assign（）合并对象 */  
arr.forEach(_ => Object.assign(map[_.id], _))  
console.log('成绩单', arr)

这样的写法 ,即使有个十个数组,都可以根据已创造好的map 对象,根据字段进行数据合并.虽然多了一个map对象声明,代码量扩大了,但是在时间性能上大大提高; 这样以来他们总的数据循环次数是数组的length 之和;假如有100条数据,循环总次数是 100+100=200; 比之前那种方法减少了9800次循环.

项目中多个Array<Object> 数据根据相同字段内容合并(高性能)

个人chatgpt欢迎使用