![](/img/trans.png)
[英]Javascript reformat or map an array of objects to a new array of new objects? like reformating it and giving new keys (names) for values
[英]JavaScript shortest way to map an array of objects to a new array of new objects?
我有一個person
對象數組,其中每個person
都有一個由 name 和 image url 組成的profiles
對象數組,以及一個由lat
和long
屬性組成的addresses 對象列表,如下所示:
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"}]
}];
我需要創建一個新的對象數組,其中每個新對象對於每組lat
long
都有一個image
、 long
、 lat
屬性,如下所示:
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
第一陣列進入第二?
您可以使用嵌套的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);
您可以將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);
我希望這有幫助!
由於您要求編寫代碼最短:
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);
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
的第一個結果,這將為您提供所需的內容
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}))
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.