javascript - javascript - 使用Filter和Reduce构建所需的对象数组

我有以下示例数据,它们是三个对象数组,换句话说:

 

let dets = [


 {


" id" : 1,


" name" :" tom" ,


" country" :" USA" ,


" phone" :" 1234" 


 },


 {


" id" : 2,


" name" :" sarah" ,


" country" :" ITALY" ,


" phone" :" 8899" 


 },


 {


" id" : 3,


" name" :" harry" ,


" country" :" GERMANY" ,


" phone" :" 3434" 


 } 


];



let foods = [


 {


" id" : 1,


" food" :" pizza" 


 },


 {


" id" : 1,


" name" :" pasta" 


 },


 {


" id" : 1,


" name" :" oranges" 


 }, 


 {


" id" : 2,


" name" :" donuts" 


 }, 


 {


" id" : 2,


" name" :" pizza" 


 },


 {


" id" : 2,


" name" :" apples" 


 },


 {


" id" : 3,


" name" :" apples" 


 },


 {


" id" : 3,


" name" :" strawberries" 


 }


];



let musics = [


 {


" id" : 1,


" music" :" jazz" 


 },


 {


" id" : 1,


" music" :" funk" 


 },


 {


" id" : 1,


" music" :" country" 


 }, 


 {


" id" : 2,


" music" :" jazz" 


 }, 


 {


" id" : 2,


" music" :" rock" 


 },


 {


" id" : 2,


" music" :" heavy metal" 


 },


 {


" id" : 3,


" music" :" orchestral" 


 },


 {


" id" : 3,


" music" :" jazz" 


 },


 {


" id" : 3,


" music" :" percussion" 


 } 


];



我想要实现的最终结果是基于上述数据的以下结果对象数组,其中食物和音乐都是对象内的数组。

我知道,我可以使用简单的阵列迭代来实现下面的结果,但是,我想看看这是否可以使用JavaScript过滤器。

dets数组是父数组,使用"id值,在 foodsmusics中检索子数组值。

 

let result = [


 {


" id" : 1,


" name" :" tom" ,


" country" :" USA" ,


" phone" :" 1234" ,


" foods" : [" pizza" ," pasta" ," oranges" ],


" musics" : [" jazz" ," funk" ," country" ]


 },


 {


" id" : 2,


" name" :" sarah" ,


" country" :" ITALY" ,


" phone" :" 8899" ,


" foods" : [" donuts" ," pizza" ," apples" ],


" musics" : [" jazz" ," rock" ," heavy metal" ]


 },


 {


" id" : 3,


" name" :" harry" ,


" country" :" GERMANY" ,


" phone" :" 3434" ,


" foods" : [" apples" ," strawberries" ],


" musics" : [" orchestral" ," jazz" ," percussion" ] 


 }


];



任何帮助/指导都是伟大的。

时间:

你可以使用map循环通过dets数组,你可以用reduce来获取与id对应的音乐和食物,(你可以使用 filter,但是,需要另外一个循环才能获得name/music属性)。

你可以使用操作符shallow复制原始对象。

 

let dets = [{" id" :1," name" :" tom" ," country" :" USA" ," phone" :" 1234" },{" id" :2," name" :" sarah" ," country" :" ITALY" ," phone" :" 8899" },{" id" :3," name" :" harry" ," country" :" GERMANY" ," phone" :" 3434" }];


let foods = [{" id" :1," name" :" pizza" },{" id" :1," name" :" pasta" },{" id" :1," name" :" oranges" },{" id" :2," name" :" donuts" },{" id" :2," name" :" pizza" },{" id" :2," name" :" apples" },{" id" :3," name" :" apples" },{" id" :3," name" :" strawberries" }];


let musics = [{" id" :1," music" :" jazz" },{" id" :1," music" :" funk" },{" id" :1," music" :" country" },{" id" :2," music" :" jazz" },{" id" :2," music" :" rock" },{" id" :2," music" :" heavy metal" },{" id" :3," music" :" orchestral" },{" id" :3," music" :" jazz" },{" id" :3," music" :" percussion" }];



let result = dets.map(o => {


 return {


 . ..o,


 foods: foods.reduce((c, v) => v.id === o.id? c.concat(v.name) : c, []),


 musics: musics.reduce((c, v) => v.id === o.id? c.concat(v.music) : c, []),


 }


});



console.log(result);

另一种选择是让食物和音乐地图,这是为了减少循环。

 

let dets = [{" id" :1," name" :" tom" ," country" :" USA" ," phone" :" 1234" },{" id" :2," name" :" sarah" ," country" :" ITALY" ," phone" :" 8899" },{" id" :3," name" :" harry" ," country" :" GERMANY" ," phone" :" 3434" }];


let foods = [{" id" :1," name" :" pizza" },{" id" :1," name" :" pasta" },{" id" :1," name" :" oranges" },{" id" :2," name" :" donuts" },{" id" :2," name" :" pizza" },{" id" :2," name" :" apples" },{" id" :3," name" :" apples" },{" id" :3," name" :" strawberries" }];


let musics = [{" id" :1," music" :" jazz" },{" id" :1," music" :" funk" },{" id" :1," music" :" country" },{" id" :2," music" :" jazz" },{" id" :2," music" :" rock" },{" id" :2," music" :" heavy metal" },{" id" :3," music" :" orchestral" },{" id" :3," music" :" jazz" },{" id" :3," music" :" percussion" }];



//Summarize the foods and music first


let foodsMap = foods.reduce((c, v) => (c[v.id] = (c[v.id] || []).concat(v.name), c), {});


let musicsMap = musics.reduce((c, v) => (c[v.id] = (c[v.id] || []).concat(v.music), c), {});



let result = dets.map(o => {


 return {


 . ..o,


 foods: foodsMap[o.id] || [],


 musics: musicsMap[o.id] || [],


 }


});



console.log(result);

可以使用标识来映射映射,并且将它填充到所有值:

 

 const idMap = new Map();


 const get = id => idMap.get(id) || (obj => (idMap.set(id, obj), obj))({});



 for(const info of dets)


 Object.assign(get(info.id), info);



 for(const { food, id } of foods) {


 const user = get(id);


 (user.foods || (user.foods = []).push(food);


 }



 //...



 const result = [...idMap.values()];



你可以为食物和音乐建立map,用他们的食物和音乐mapdets ,如果音乐和食物的结构相同的话,那就更容易了。

 

const map = key => (m, o) => m.set(o.id, [...(m.get(o.id) || []), o[key]]);



var dets = [{ id: 1, name:" tom" , country:" USA" , phone:" 1234" }, { id: 2, name:" sarah" , country:" ITALY" , phone:" 8899" }, { id: 3, name:" harry" , country:" GERMANY" , phone:" 3434" }],


 foods = [{ id: 1, name:" pizza" }, { id: 1, name:" pasta" }, { id: 1, name:" oranges" }, { id: 2, name:" donuts" }, { id: 2, name:" pizza" }, { id: 2, name:" apples" }, { id: 3, name:" apples" }, { id: 3, name:" strawberries" }],


 musics = [{ id: 1, music:" jazz" }, { id: 1, music:" funk" }, { id: 1, music:" country" }, { id: 2, music:" jazz" }, { id: 2, music:" rock" }, { id: 2, music:" heavy metal" }, { id: 3, music:" orchestral" }, { id: 3, music:" jazz" }, { id: 3, music:" percussion" }],


 foodsMap = foods.reduce(map('name'), new Map),


 musicMap = musics.reduce(map('music'), new Map),


 result = dets.map(o => Object.assign(


 {},


 o,


 foodsMap.has(o.id) && { foods: foodsMap.get(o.id) },


 musicMap.has(o.id) && { music: musicMap.get(o.id) }


 ));



console.log(result);
.as-console-wrapper { max-height: 100%!important; top: 0; }
 

let output = dets.map((det)=>{


 det.foods = foods.filter((food)=>{


 return det.id === food.id;


 });


 det.musics = musics.filter((music)=>{


 return music.id === det.id;


 })


 return det;


});


console.log(output);



...