JavaScript将对象数组映射到新对象数组的最短方法？

Question

我有一个person 对象数组，其中每个person 都有一个profiles 对象数组，其中包含名称和图像url，以及一个包含lat 和@987654325 的地址对象列表@属性，如下：

var listOfPersons = [{
    addresses : [{lat:11, long:11}, {lat:22, long:22}],
    profile: [{image:"some_url1", name: "peter parker"}]
},
{
    addresses : [{lat:33, long:33}, {lat:44, long:44}],
    profile: [{image:"some_url2", name: "bruce wayne"}]
}];

我需要创建一个新的对象数组，其中每个新对象都有一个image、long、lat 属性，对于每个 组lat long，如下：

var expectedResult = [
{
    image:"some_url1",
  lat:11,
  long:11
},
{
    image:"some_url1",
  lat:22,
  long:22
},
{
    image:"some_url1",
  lat:33,
  long:33
},
{
    image:"some_url1",
  lat:44,
  long:44
}
];

将map\ reduce 第一个数组转换为第二个数组的最短方法是什么（就编写代码而言）？

Answer 1

您可以使用嵌套的Array.flatMap() 和Array.map() 来迭代数组/地址/配置文件，并将image 和lat、long 属性组合成一个对象：

const listOfPersons = [{"addresses":[{"lat":11,"long":11},{"lat":22,"long":22}],"profile":[{"image":"some_url1","name":"peter parker"}]},{"addresses":[{"lat":33,"long":33},{"lat":44,"long":44}],"profile":[{"image":"some_url2","name":"bruce wayne"}]}];

const result = listOfPersons.flatMap(o =>
  o.addresses.flatMap(({ lat, long }) => 
    o.profile.map(({ image }) => ({
      image,
      lat,
      long
    }))
  )
);

console.log(result);

如果您始终只使用第一个配置文件，您可以删除一级Array.flatMap()：

const listOfPersons = [{"addresses":[{"lat":11,"long":11},{"lat":22,"long":22}],"profile":[{"image":"some_url1","name":"peter parker"}]},{"addresses":[{"lat":33,"long":33},{"lat":44,"long":44}],"profile":[{"image":"some_url2","name":"bruce wayne"}]}];

const result = listOfPersons.flatMap(o =>
  o.addresses.map(({ lat, long }) =>  ({
    image: o.profile[0].image,
    lat,
    long
  }))
);

console.log(result);

Answer 2

您可以将Array.prototype.reduce() 与Array.prototype.forEach() 结合使用。

reduce() 的文档状态：

reduce() 方法对数组的每个元素执行（您提供的）reducer 函数，从而产生单个输出值。

我认为以下内容对你有用：

const listOfPersons = [{
    addresses : [{lat:11, long:11}, {lat:22, long:22}],
    profile: [{image:"some_url1", name: "peter parker"}]
},
{
    addresses : [{lat:33, long:33}, {lat:44, long:44}],
    profile: [{image:"some_url2", name: "bruce wayne"}]
}];

const result = listOfPersons.reduce((acc, cur) => {
  cur.addresses.forEach(e => acc.push({ ...e, image: cur.profile[0].image }));   
  return acc;
}, []);

console.log(result);

希望对你有帮助！

Answer 3

既然你要求写代码最短：

var listOfPersons = [{addresses: [{lat:11, long:11}, {lat:22, long:22}],profile: [{image:"some_url1", name: "peter parker"}]},{addresses:lat:33, long:33}, {lat:44, long:44}],profile: [{image:"some_url2", name: "bruce wayne"}]}];

const res = listOfPersons.reduce((r,{addresses:a,profile:[{image}]})=> [...r,...a.map(o=>({image,...o}))],[]);

console.log(res);

这里有格式和更好的变量名：

var listOfPersons = [{
  addresses : [{lat:11, long:11}, {lat:22, long:22}],
  profile: [{image:"some_url1", name: "peter parker"}]
},
{
  addresses : [{lat:33, long:33}, {lat:44, long:44}],
  profile: [{image:"some_url2", name: "bruce wayne"}]
}];


const res = listOfPersons.reduce((acc, { addresses: adr, profile: [{image}] }) =>
  [...acc, ...adr.map(a => ({image, ...a}) )],
[]);


console.log(res);

Answer 4

var listOfPersons = [
  {
    addresses: [{ lat: 11, long: 11 }, { lat: 22, long: 22 }],
    profile: [{ image: "some_url1", name: "peter parker" }]
  },
  {
    addresses: [{ lat: 33, long: 33 }, { lat: 44, long: 44 }],
    profile: [{ image: "some_url2", name: "bruce wayne" }]
  }
];

var expectedResult = listOfPersons.reduce(
  (acc, person) => ([
    ...acc,
    ...person.addresses.map(
      address => ({ ...address, image: person.profile[0].image })
    )
  ]),
  []
)

假设你总是想要.profile的第一个结果，这会给你想要的东西

Answer 5

var listOfPersons = [{
    addresses : [{lat:11, long:11}, {lat:22, long:22}],
    profile: [{image:"some_url1", name: "peter parker"}]
},
{
    addresses : [{lat:33, long:33}, {lat:44, long:44}],
    profile: [{image:"some_url2", name: "bruce wayne"}]
}];


var expectedResult = [];
expectedResult.forEach(person => {
    person.addresses.forEach(address => expectedResult.push({image: person.profile[0].image, ...address}))
});