Javascript 基于两个单独的数组构造一个数组

我正在尝试基于两个单独的数组构建一个数组，例如以下示例：

const breakfast = [
   { dishId: 23, name: 'Pasta'}
]

const ingredients = [
   // ...
   { ingrId: 13, name: 'Tomato' },
   { ingrId: 29, name: 'Beef' }
]

// connecting table
const breakfastDishIngredients = [
   { id: 1, dishId: 23, ingrId: 13 },
   { id: 1, dishId: 23, ingrId: 29 }
]

新数组应该是早餐数组，每个元素都有一个额外的配料键。像这样：

const newBreakfast = [
   { dishId: 23, name: 'Pasta', ingredients: [
                { ingrId: 13, name: 'Tomato' },
                { ingrId: 29, name: 'Beef' }
              ]}
] 

我正在尝试以下操作，但不起作用：

let newBreakfast = []

for(let i in breakfastDishIngredients) {
    _breakfast = breakfast.map(item => {
        return { ...item, ingredients: ingredients.filter(el => item.id === breakfastDishIngredients[i][0].dish_id && el.id === breakfastDishIngredients[i][0].ingredient_id) }
    })
}

非常感谢您的帮助。

试试这个：

const早餐=[
{dishId:23，名字：'意大利面'}
]
常量成分=[
// ...
{ingrId:13，名字：'番茄'}，
{ingrId:29，名字：'牛肉'}
]
//连接表
康斯特早餐食材=[
{id:1，dishId:23，ingrId:13}，
{id:1，dishId:23，ingrId:29}
]
const result=breaken.map（br=>{
const IngreditsFiltered=早餐食材
.filter（brDiIngr=>brDiIngr.dishId==br.dishId）
.map（el=>Components.find（ingr=>ingr.ingrId==el.ingrId））；
返回{…br，成分：IngCreditsFiltered}；
});
控制台日志（结果）
const早餐=[
{dishId:23，名字：'意大利面'}
];
常量成分=[
// ...
{ingrId:13，名字：'番茄'}，
{ingrId:29，名字：'牛肉'}
];
康斯特早餐食材=[
{id:1，dishId:23，ingrId:13}，
{id:1，dishId:23，ingrId:29}
];
let newBreakfast=早餐.map(
菜肴=>(
{
dishId:dish.dishId，名称：dish.name，成分：
早餐滤器(
配料=>配料.dishId==dish.dishId
).地图(
过滤=>(
成分过滤器(
配料=>Component.ingrId==filtered.ingrId
)
)
).flat（）
}
)
)
控制台日志（newBreakfast）您可以这样做


const早餐=[{dishId:23，名字：'意大利面'}]；
常量成分=[
// ...
{ingrId:13，名字：'番茄'}，
{ingrId:29，名字：'牛肉'}
];
//连接表
const BreakfastDishComponents=[{id:1，dishId:23，ingrId:13}，{id:1，dishId:23，ingrId:29}]；
常数newBreakfast=[
{
迪希德：23，
名称：“意大利面”，
配料：[{ingrId:13，名字：'番茄'}，{ingrId:29，名字：'牛肉'}]
}
];
让结果=早餐.map（（项目）=>（{…项目，配料：配料}））；
控制台日志（结果）带有Reducer和一些UTIL的解决方案，以提高可重用性

const breakfast = [
   { dishId: 23, name: 'Pasta'}
]

const ingredients = [
   // ...
   { ingrId: 13, name: 'Tomato' },
   { ingrId: 29, name: 'Beef' }
]

// connecting table
const breakfastDishIngredients = [
   { id: 1, dishId: 23, ingrId: 13 },
   { id: 1, dishId: 23, ingrId: 29 },
   { id: 1, dishId: 24, ingrId: 29 }
]

//utils
const lookUp = idString => arr => targetId => arr.filter(el => el[idString] == targetId)

// FP specialization
const lookUpIngrId = lookUp("ingrId")(ingredients);
const lookUpDishId = lookUp("dishId")(breakfast);

const getFirstOneOrNull = arr => Array.isArray(arr) && arr.length === 1 ? arr[0] : null;

//reducer
const reducerBreakFast = (acc, currentValue) => {
  const id = getFirstOneOrNull(lookUpDishId(currentValue.dishId))
  if(!id){
    return acc;
  }
  const ingrValue = getFirstOneOrNull(lookUpIngrId(currentValue.ingrId))
  acc.has(id) ? acc.set(id, [...acc.get(id), ingrValue]) : acc.set(id, [ingrValue])
  return acc;
}

const mapNewBreakfast = breakfastDishIngredients.reduce(reducerBreakFast, new Map())

const mapToArray = dataMap => Array.from(dataMap.keys()).map(key => ({
  ...key,
  ingredients: dataMap.get(key)
}))

const newBreakfast = mapToArray(mapNewBreakfast);

输出：

{
  dishId: 23,
  name: 'Pasta',
  ingredients: [ { ingrId: 13, name: 'Tomato' }, { ingrId: 29, name: 'Beef' } ]
}

对不起，我更新了问题，最后一个数组应该是：const newBreakfast=[{dishId:23，名称：'意大利面'，配料：[{ingrId:13，名称：'番茄'}，{ingrId:29，名称：'牛肉'}]}]好的。更新的答案。你对我的实际意思是正确的，但是这是以数组的形式返回配料：/这很接近，我们需要将配料作为一个对象数组。配料与菜相连接-如果/当有其他菜和更多配料时，你的解决方案将列出每道菜的所有配料。