合并 JavaScript 对象数组答案

【问题标题】：Merging JavaScript array of objects合并 JavaScript 对象数组
【发布时间】：2020-12-18 13:17:25
【问题描述】：

我正在使用 JavaScript 创建一个项目。我试图在某些条件下将值添加到 JavaScript 对象数组中。一切正常，我已经达到了预期的输出，但唯一的问题是代码看起来很长。

let f1Response = [{
  "uuid": "1",
  "name": "f1",

}]
    
let f2Response = [{
    "name": "f2",
    "f1uuid": "1",
    "f3uuid":"3"

}]

let f3Response = [{
    "name": "f3",
    "uuid": "3",

}]
    
for(var i=0; i<f2Response.length; i++){
  for(var j=0;j<f3Response.length; j++){
    if(f3Response[j]['uuid'] == f2Response[i]['f3uuid']){
     f2Response[i]['f3Name'] = f3Response[j]['name']
    }
  }
} 
          
for(var ik=0; ik<f2Response.length; ik++){
  for(var jk=0;jk<f1Response.length; jk++){
    if(f1Response[jk]['uuid'] ==f2Response[ik]['f1uuid']){
      f2Response[ik]['f1Name'] = f1Response[jk]['name']
    }
  }
}
console.log(f2Response)

输出：

请提出更好的想法，以更短的方式实现这一目标。

【问题讨论】：

标签： javascript arrays object ecmascript-6

【解决方案1】：

您可以使用 reduce 来做到这一点。

let f1Response = [{
  "uuid": "1",
  "name": "f1",

}]
    
let f2Response = [{
    "name": "f2",
    "f1uuid": "1",
    "f3uuid":"3"

}]

let f3Response = [{
    "name": "f3",
    "uuid": "3",

}]

f2Response = f2Response.reduce((acc, curr) => {
   const { f3uuid, f1uuid } = curr;
   
   let f3Index = f3Response.findIndex(item => item.uuid === f3uuid);
   let f1Index = f1Response.findIndex(item => item.uuid === f1uuid);
   
   const {name: f3name} = f3Response[f3Index];
   const {name: f1name} = f1Response[f1Index];
   
   acc.push({...curr, f3name, f1name,});
   return acc;
}, []);
    

console.log(f2Response)

【讨论】：

【解决方案2】：

将f1Response 和f3Response 转换为Maps 的[uuid, name]。现在 map f2Response 并通过它们各自的 uuid 获取名称：

const createNamesMap = arr => 
  new Map(arr.map(item => [item.uuid, item.name]))
  
const combine = (f1, f2, f3) => {
  const f1Map = createNamesMap(f1) // create a Map of f1 name by uuid
  const f3Map = createNamesMap(f3) // create a Map of f3 name by uuid
  
  return f2.map(item => ({
    ...item,
    f3Name: f3Map.get(item.f3uuid), // get f3 name
    f1Name: f1Map.get(item.f1uuid) // get f1 name
  }))
}

const f1Response = [{"uuid": "1","name": "f1"}]
const f2Response = [{"name": "f2","f1uuid": "1","f3uuid": "3"}]
const f3Response = [{"name": "f3","uuid": "3"}]

const result = combine(f1Response, f2Response, f3Response)

console.log(result)

【讨论】：