Javascript 如何从嵌套引用中展平数据？

嘿，伙计们，我需要一些帮助来构建一些数据，但我需要一些见解来尽可能地做到这一点。我一直对递归和多个循环感到困惑。我简化了数据，以理解概念，并用您的见解自行解决。 我有：

const数据=[
{
id:'W1'，
颜色：红色，
人像：“P77”，
},
{
id:'W7'，
颜色：黄色，
personId:'P21'，
},
]
警察人员=[
{
id:'P77'，
姓名：'彼得'，
FavoriteFooded:'FF4'，
},
{
id:'P21'，
姓名：'约翰'，
最喜欢的食物：“FF9”，
}
];
常数favoriteFood=[
{
id:'FF9'
食物：“意大利面”
描述：“来自石炉的新鲜意大利面食”
},
{
id:'FF4'
食物：“香蕉”
描述：“树上的新鲜香蕉”
}
]

如何合并要展平的数据及其所有引用？如何使其足够通用，以处理深度嵌套，从而使其变平并拾取引用？我试过这个，但我只是循环太多，它看起来不理智了

我希望得到这样的结果：

const结果=[
{
id:'W1'，
颜色：红色，
姓名：'彼得'，
食物：“香蕉”
描述：“树上的新鲜香蕉”
},
{
id:'W7'，
颜色：黄色，
姓名：'彼得'，
食物：“意大利面”
描述：“来自石炉的新鲜意大利面食”
},
]

---

然后，

结果

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

您考虑过字典吗

const数据=
{
'W1'：{颜色：“红色”，拟人：“P77'}
，'W7'：{color:'yellow'，人名：'P21'}，
}
康斯特人=
{
'P77'：{姓名：'Peter'，FavoriteFooded:'FF4'}，
'P21'：{name:'John'，favoriteFoodId:'FF9'}
}
常数favoriteFoods=
{
'FF9'：{食物：'意大利面'，描述：'来自石炉的新鲜意大利面'}
，'FF4'：{食物：'香蕉'，描述：'树上的新鲜香蕉'}
}
函数getFavFood（pId，字段）{
返回favoriteFoods[persons[data[pId].personId].favoriteFoodId][field]
}
//不确定要使用的模板库
//但现在普通的老js。。。。
table=“”
对于（数据中的d）{
表+=``
+`${persons[data[d].personId].name}`
+`${getFavFood（d，“food”）}`
+`${getFavFood（d，“description”）}`
+`` 
}
表+=“”
document.body.insertAdjacentHTML（“beforeend”，table）

向我们展示您所做的尝试，以便我们能够帮助您了解可能出现的错误。我只拥有真实数据，如果您愿意，我可以分享其中的一个片段，但其中的数据要深入得多。因此，我的思考过程就像将编写一个接受4个参数的函数，函数的作用类似于一次arr1，arr2，arr1Key，arr2Key。所以我们将合并这个数组。因为我们需要递归地执行，所以我们不能每次都显式地传递键来执行函数，所以我们可以构造一个对象，该对象将具有键，比如当数据和人员进入函数时，它应该采用personId和id，现在当函数执行时，它将给出组合数据。因此，我们将再次将输出作为arr1传递，并获取下一个数组。因此，有点像这样，如果我们尝试遵循此方法，请从您的问题角度让我知道是否存在h情况approach@DILEEPTHOMAS这确实是我在尝试的，但我没能成功。你能用一个例子来回答这个问题吗？那么从

人的角度来看，这是如何工作的呢？执行
console.log（favoriteFoods['FF9'].food）
是有道理的，但我如何从person中查找它？修改示例后，它确实会随着您的深入而变得复杂，但您始终可以将复杂性抽象为get方法。。。