[英]How to expand an object in an array in JavaScirpt
我正在嘗試擴展 JavaScript 中的數組。object ↓
const tests = [
{
id: 1,
name: 'taro',
designs: [
{
designId: 1,
designName: "design1"
},
{
designId: 2,
designName: "design2"
}
]
},
{
id: 2,
name: 'John',
designs: [
{
designId: 3,
designName: "design3"
},
{
designId: 4,
designName: "design4"
}
]
},
{
id: 3,
name: 'Lisa',
designs: []
},
];
[
{ id: 1, name: 'taro', designId: 1, designName: 'design1' },
{ id: 1, name: 'taro', designId: 2, designName: 'design2' },
{ id: 2, name: 'John', designId: 3, designName: 'design3' },
{ id: 2, name: 'John', designId: 4, designName: 'design4' },
{ id: 3, name: 'Lisa', designId: null, designName: null },
]
使用 double for 很容易做到這一點,但我想將它與高階函數一起使用。
我寫的代碼
for (let i = 0; i < tests.length; i++) {
for (let j = 0; j < tests[i].designs.length; j++) {
const id = tests[i].id
const name = tests[i].name
result.push({
id,
name,
designId: tests[i].designs[j].designId,
designName: tests[i].designs[j].designName
})
}
}
另外,如果您能額外解釋一下double for和高階函數之間的性能差異,我們將不勝感激。
您可以在測試數組上使用.flatMap()
,在每個designs
數組上使用內部.map()
。 designs 數組中的內部 map 將從當前迭代設計 object 獲取屬性並將其與父 object 的屬性合並。然后可以使用外部.flatMap()
將所有返回的映射連接到一個數組中:
const tests = [ { id: 1, name: 'taro', designs: [ { designId: 1, designName: "design1" }, { designId: 2, designName: "design2" } ] }, { id: 2, name: 'John', designs: [ { designId: 3, designName: "design3" }, { designId: 4, designName: "design4" } ] }, ]; const res = tests.flatMap(({designs, ...rest}) => designs.map(design => ({...rest, ...design }))); console.log(res);
編輯:如果您需要null
值來顯示您的設計對象,如果您的設計數組為空,您可以將鍵顯式添加到新的 object 中,當設計數組為空時您可以返回它:
const tests = [ { id: 1, name: 'taro', designs: [] }, { id: 2, name: 'John', designs: [] }, ]; const res = tests.flatMap(({designs, ...rest}) => designs.length? designs.map(design => ({...rest, ...design })): {...rest, designId: null, designName: null} ); console.log(res);
您可以使用Array.reduce
function 和Array.map
來生成數組:
const results = tests.reduce((acc, { designs, ...rest }) => [
...acc,
...designs.map(e => ({ ...rest, ...e }))
], []);
const tests = [ { id: 1, name: 'taro', designs: [ { designId: 1, designName: "design1" }, { designId: 2, designName: "design2" } ] }, { id: 2, name: 'John', designs: [ { designId: 3, designName: "design3" }, { designId: 4, designName: "design4" } ] }, ]; const results = tests.reduce((acc, { designs, ...rest }) => [...acc, ...designs.map(e => ({...rest, ...e })) ], []); console.log(results);
您可以使用高階 function Array.prototype.reduce()和Array.prototype.map()
const newArr = tests.reduce((prev, {designs, ...current}) => [
...prev, ...designs.map(design => ({...design,...current}));
]
, []);
您的方法和這種高階方法的性能是相同的,因為Array.prototype.reduce
貫穿整個數組並且只是為我們簡化了initialValue
方法。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.