javascript - 如何从嵌套引用中整理数据？

大家好，我需要一些帮助来构建一些数据，但我需要一些见识以使性能尽可能地高。我一直因递归和多个循环而迷失了方向。我已经简化了数据，以了解概念并通过您的见解自己解决问题。
我有：

const data = [
{
   id: 'W1',
   color: red,
   personId: 'P77',
},
{
   id: 'W7',
   color: yellow,
   personId: 'P21',
},
]

const persons = [
{
   id: 'P77',
   name: 'Peter',
   favoriteFoodId: 'FF4',
},
{
   id: 'P21',
   name: 'John',
   favoriteFood: 'FF9',
}
];

const favoriteFood = [
{
   id: 'FF9'
   food: 'pasta'
  description: 'fresh italian pasta from stone oven'
},
{
   id: 'FF4'
   food: 'banana'
  description: 'fresh bananas from the tree'
}
]

如何合并要平整的数据及其所有引用？如何使此泛型足以处理深层嵌套以使其变平并拾取引用？我试过了，但是我循环得太多了，看起来不再理智了。

我想得到这样的结果：

const result  = [
{
   id: 'W1',
   color: red,
   name: 'Peter',
  food: 'banana'
  description: 'fresh bananas from the tree'
},
{
   id: 'W7',
   color: yellow,
   name: 'Peter',
    food: 'pasta'
   description: 'fresh italian pasta from stone oven'
},
]

并且result将被传递到我的表组件，该组件将每个对象呈现为一行

最佳答案

您考虑过字典吗？

const data =
{
   'W1':{ color: "red" ,  personId: 'P77' }
   ,'W7':{ color: "yellow", personId: 'P21'},
}

const persons =
{
  'P77':{ name: 'Peter', favoriteFoodId: 'FF4' },
   'P21':{ name: 'John', favoriteFoodId: 'FF9' }
}

const favoriteFoods =
{
   'FF9':{ food: 'pasta', description: 'fresh italian pasta from stone oven' }
  ,'FF4':{ food: 'banana', description: 'fresh bananas from the tree' }
}

function getFavFood( pId , field ){
  return favoriteFoods[ persons[ data[pId].personId ].favoriteFoodId ][field]
}

// not sure what template library you'll be using
// but for now plain old js....

table = "<TABLE>"

for( d in data){
  table += `<TR style="background:${data[d].color}">`
  + `<TD>${ persons[ data[d].personId ].name }</TD>`
  + `<TD>${ getFavFood( d , "food" ) }</TD>`
  + `<TD>${ getFavFood( d , "description" ) }</TD>`
  +`</TR>`
}

table += "</TABLE>"

document.body.insertAdjacentHTML( "beforeend" , table )

关于javascript - 如何从嵌套引用中整理数据？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58538099/