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

合集 - 前端(8)

1.Web项目如何配置Eslint2023-09-142.如何使用Vite创建Vue3的uniapp项目2023-09-11

3.js中两个对象数组如何比对合并2022-04-11

4.npm安装依赖时出现Peer Dependencies冲突报错2023-09-115.在Vue2和Vue3中JSX的使用集锦2023-09-126.Webpack性能优化 SplitChunksPlugin的使用详解2023-09-167.ES 2023新特性速解2023-09-188.如何实现浏览器标签页之间的通信2023-09-21

收起

情景

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

//需要将这个数组中的字段合并，渲染在列表中
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);由此可得第二种方式的执行效率较高