如何在JavaScript中汇总对象和数组

Question

我正在尝试组合一个对象，其中涵盖了其中的一些信息。

const tests = [
    {
        id: 1,
        name: 'taro',
        designId: 1,
        designName: 'design1'
    },
    {
        id: 1,
        name: 'taro',
        designId: 2,
        designName: 'design2'
    },
    {
        id: 2,
        name: 'Bob',
        designId: 3,
        designName: 'design3'
    },
    {
        id: 2,
        name: 'Bob',
        designId: 4,
        designName: 'design4'
    },
];

我想设定以下期望。

result = [
  {
    id: 1,
    name: 'taro',
    designs: [
        { designId: 1, designName: 'design1' },
        { designId: 2, designName: 'design2' }
    ]
  },
  {
    id: 2,
    name: 'Bob',
    designs: [
        { designId: 3, designName: 'design3' },
        { designId: 4, designName: 'design4' }
    ]
  }
]

我试过使用lodash groupby作为我已经尝试过的东西，但我正在努力，因为我无法摆脱额外的属性。

const result = _.chain(tests)
    .groupBy('id')
    .map((value, key) => ({ id: key, designs: value }))
    .value();

Answer 1

使用reduce和findIndex

​

const tests = [
  {
    id: 1,
    name: 'taro',
    designId: 1,
    designName: 'design1'
  },
  {
    id: 1,
    name: 'taro',
    designId: 2,
    designName: 'design2'
  },
  {
    id: 2,
    name: 'Bob',
    designId: 3,
    designName: 'design3'
  },
  {
    id: 2,
    name: 'Bob',
    designId: 4,
    designName: 'design4'
  }
]

const arr = tests.reduce((acc, curr) => {
  const findIdx = acc.findIndex(x => x.name === curr.name)
  const design = { designId: curr.designId, designName: curr.designName }

  if (findIdx === -1) {
    acc.push({ id: curr.id, name: curr.name, designs: [design] })
  } else {
    acc[findIdx].designs.push(design)
  }

  return acc
}, [])

console.log(arr)

​

Answer 2

您可以将Array.prototype.reduce()与Object.values()结合使用

​

const tests = [{id: 1,name: 'taro',designId: 1,designName: 'design1',},{id: 1,name: 'taro',designId: 2,designName: 'design2',},{id: 2,name: 'Bob',designId: 3,designName: 'design3',},{id: 2,name: 'Bob',designId: 4,designName: 'design4'}]

const result = Object.values(tests.reduce((a, { id, name, ...rest }) => {
  a[id] = a[id] || { id, name, designs: [] }
  a[id].designs.push({ ...rest })
  return a
}, {}))

console.log(result)

​

Answer 3

您可以使用Map轻松高效地实现此结果

​

const tests = [
  {
    id: 1,
    name: "taro",
    designId: 1,
    designName: "design1",
  },
  {
    id: 1,
    name: "taro",
    designId: 2,
    designName: "design2",
  },
  {
    id: 2,
    name: "Bob",
    designId: 3,
    designName: "design3",
  },
  {
    id: 2,
    name: "Bob",
    designId: 4,
    designName: "design4",
  },
];

const map = new Map();
tests.forEach(({ id, name, ...rest }) =>
  map.has(id)
    ? map.get(id).designs.push(rest)
    : map.set(id, { id, name, designs: [rest] })
);

const result = [...map.values()];

console.log(result);

/* This is not a part of answer. It is just to give the output fill height. So IGNORE IT */
.as-console-wrapper { max-height: 100% !important; top: 0; }

​