关于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); 由此可得第二种形式的执行效率较高