如何在 JavaScript 中扩展数组中的对象

Question

我正在尝试扩展 JavaScript 中的数组。对象↓

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和高阶函数之间的性能差异，我们将不胜感激。

Answer 1

您可以使用 Array.reduce 函数和 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);

Answer 2

您可以在测试数组上使用 .flatMap()，在每个 designs 数组上使用内部 .map()。 designs 数组上的内部映射将从当前迭代的设计对象中获取属性并将其与父对象的属性合并。然后可以使用外部 .flatMap() 将所有 returned 映射连接到一个数组中：

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 值来显示你的设计对象，如果你的设计数组是空的，你可以显式地将键添加到一个新对象，你可以 return 当设计数组为空时：

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

Answer 3

可以使用高阶函数Array.prototype.reduce() with Array.prototype.map()

const newArr = tests.reduce((prev, {designs, ...current}) => [
   ...prev, ...designs.map(design => ({...design,...current}));
]      
, []);

你的方法和这个高阶方法的性能是相同的，因为 Array.prototype.reduce 贯穿整个数组，只是为我们提供了 initialValue 方法。

如何在 JavaScript 中扩展数组中的对象

How to expand an object in an array in JavaScirpt

javascript

arrays

object

higher-order-functions