js中两个对象数组如何比对合并

luxigaola / 67 /

ChatGPT 可用网址,仅供交流学习使用,如对您有所帮助,请收藏并推荐给需要的朋友。
https://ckai.xyz

情景

有时候,从后端的数据并非是可以直接使用渲染的,需要经过处理之后才可使用,比如说以下这种情况

//需要将这个数组中的字段合并,渲染在列表中
const array1 = [{id:1,name:'张三'},{id:2,name:'李四'}]
const array2 = [{id:1,age:6,desc:'描述1'},{id:2,age:7,desc:'描述2'}]

方法

方法1

使用嵌套循环的方式去查找比对,我这里采用Array.map方法嵌套Array.find方法来实现,此时的时间复杂度为 O(m*n)

//formArray:主数组,compareArray:需要联合的数组,key:比对的属性,isExpand是否将属性展开到item中
function compareArrayUnion(formArray, compareArray, key,isExpand) {
  const resultArray = formArray?.length ? compareArray.map(item=>{
    const result = compareArray.find(i=>i[key] === item[key]) ?? {}
    if(isExpand){
      item = {
        ...item,
        ...result
      }
    }else{
      item.result = result
    }
    return item
  }):[]
  return resultArray;
}

方法2

使用Array.reduce将联合的数组展开为一个对象,主数组使用属性索引的方式查找,此时的时间复杂度为 O(m+n)

//formArray:主数组,compareArray:需要联合的数组,key:比对的属性,isExpand是否将属性展开到item中
function compareArrayUnion(formArray, compareArray, key,isExpand) {
  const compareObj = compareArray?.length
    ? compareArray.reduce((acc, cur) => {
        return {
          ...acc,
          [cur[key]]: cur,
        };
      }, {})
    : {};
  const resultArray = formArray?.length
    ? formArray.map((item) => {
        if(isExpand){
          item = {
            ...item,
            ...compareObj[item[key]]
          }
        }else{
          item.result = compareObj[item[key]] ?? {};
        }
        return item;
      })
    : [];
  return resultArray;
}

总结

以这两种方式来比较的话,我比较推荐第二种,第一种方式的虽然写的语句少,但是它每次执行主数组每一项时,用来联合的数组都会跟着循环一次,因此它的时间复杂度为O(m*n);而第二种方式,它的两个数组,由始至终都只是遍历了一次,因此它的时间复杂度为O(m+n);由此可得第二种方式的执行效率较高


js中两个对象数组如何比对合并
作者
luxigaola
许可协议
CC BY 4.0
发布于
2023-09-09
修改于
2024-07-17
Bonnie image
尚未登录