关于javascript:js中两个对象数组如何比对合并

情景

有时候，从后端的数据并非是能够间接应用渲染的，须要通过解决之后才可应用，比如说以下这种状况

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