Question

我有以下示例数据，它们是对象的三个数组，即：

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 filter 和 reduce 。

dets数组是父数组，并使用“ id”值，在foods和musics内检索子数组值。

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"]    
  }
];

Answer 1

您可以使用map遍历dets数组。您可以使用reduce来获取与ID对应的音乐和食物。（您可以使用filter，但这需要另一个循环才能获得name / music属性）。

您可以使用传播运算符浅复制原始对象。

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);

Answer 2

    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 output = dets.map((det)=>{
        det.foods = foods.filter((food)=>{
            return det.id === food.id;
        }).map((food)=>{
        return food.name;
        });
        det.musics = musics.filter((music)=>{
            return music.id === det.id;
        }).map((music)=>{
        return music.music;
        });
        return det;
    });
    console.log(output);

Answer 3

您可以使用id来反对Map并用所有值填充它：

<div id='demo'>demo</div>

使用“筛选和缩小”

3 个答案: