[英]How to expand an object in an array in JavaScirpt
I'm trying to expand array in JavaScript. The object ↓我正在尝试扩展 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 },
]
It is easy to do this using double for, but I want to use it with higher-order functions.使用 double for 很容易做到这一点,但我想将它与高阶函数一起使用。
The code I wrote我写的代码
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
})
}
}
In addition, it would be appreciated if you could additionally explain the difference in performance between double for and higher-order functions.另外,如果您能额外解释一下double for和高阶函数之间的性能差异,我们将不胜感激。
You can use .flatMap()
on your tests array with an inner .map()
on each designs
array.您可以在测试数组上使用
.flatMap()
,在每个designs
数组上使用内部.map()
。 The inner map on the designs array will take the properties from the currently iterated design object and merge it with the properties from the parent object. The outer .flatMap()
can then be used to concatenate all returned maps into the one array: 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);
Edit: If you need null
values to appear for your design objects if your designs array is empty, you can add the keys explicitly to a new object that you can return when the designs array is empty:编辑:如果您需要
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);
You can use an Array.reduce
function with Array.map
to generate the array:您可以使用
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);
You can use the higher-order function Array.prototype.reduce() with Array.prototype.map()您可以使用高阶 function Array.prototype.reduce()和Array.prototype.map()
const newArr = tests.reduce((prev, {designs, ...current}) => [
...prev, ...designs.map(design => ({...design,...current}));
]
, []);
The performance in your approach and this higher-order approach is the same because Array.prototype.reduce
runs through the whole array and just facilitates the initialValue
approach for us.您的方法和这种高阶方法的性能是相同的,因为
Array.prototype.reduce
贯穿整个数组并且只是为我们简化了initialValue
方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.