如何按物件陣列分組并連接成單個陣列？[復制]

我想根據鍵對物件陣列進行分組，并將所有分組的物件連接到一個陣列中。基于id的GroupBy

例子，

有效載荷

[
  {
    id: 1,
    name: 'a'
  },
  {
    id: 1,
    name: 'b'
  },
  {
    id: 1,
    name: 'c'
  },
  {
    id: 2,
    name: 'b'
  },
  {
    id: 2,
    name: 'c'
  }
]

預期反應

[
  [
    {
      id: 1,
      name: 'a'
    },
    {
      id: 1,
      name: 'b'
    },
    {
      id: 1,
      name: 'c'
    }
  ],
  [
    {
      id: 2,
      name: 'b'
    },
    {
      id: 2,
      name: 'c'
    }
  ]
]

所有匹配的元素都在同一個陣列中，所有陣列都應該在一個陣列中。

uj5u.com熱心網友回復：

Array.redue 會有所幫助

const input = [
  { id: 1, name: 'a' },
  { id: 1, name: 'b' },
  { id: 1, name: 'c' },
  { id: 2, name: 'b' },
  { id: 2, name: 'c' }
];
const output = input.reduce((acc, curr) => {
  const node = acc.find(item => item.find(x => x.id === curr.id));
  node ? node.push(curr) : acc.push([curr]);
  return acc;
}, []);
console.log(output)

uj5u.com熱心網友回復：

提取idsusingSet以便您擁有一組唯一的它們，然后遍歷它們ids并基于它過濾原始陣列。

let objects = [
  {
    id: 1,
    name: 'a'
  },
  {
    id: 1,
    name: 'b'
  },
  {
    id: 1,
    name: 'c'
  },
  {
    id: 2,
    name: 'b'
  },
  {
    id: 2,
    name: 'c'
  }
]

let ids = [...new Set(objects.map(i => i.id))]
let result = ids.map(id => objects.filter(n =>  id === n.id))

console.log(result)

uj5u.com熱心網友回復：

您可以使用Array.reduce方法創建一個帶有 ids 陣列的物件，并通過Object.values獲取物件值

var s = [{
    id: 1,
    name: 'a'
  },
  {
    id: 1,
    name: 'b'
  },
  {
    id: 1,
    name: 'c'
  },
  {
    id: 2,
    name: 'b'
  },
  {
    id: 2,
    name: 'c'
  }
];

//go through the input array and create a object with id's, group the values to gather
var ids = s.reduce((a, c) => {

  //check object has the `id` property, if not create a property and assign empty array
  if (!a[c.id])
    a[c.id] = [];

  //push the value into desidred object property
  a[c.id].push(c)

  //return the accumulator
  return a;

}, {});

//get the grouped array as values
var outPut = Object.values(ids);
console.log(outPut);

uj5u.com熱心網友回復：

1）您可以輕松地使用Map和forEach輕松實作結果

const arr = [
  {
    id: 1,
    name: "a",
  },
  {
    id: 1,
    name: "b",
  },
  {
    id: 1,
    name: "c",
  },
  {
    id: 2,
    name: "b",
  },
  {
    id: 2,
    name: "c",
  },
];

const map = new Map();
arr.forEach((o) => !map.has(o.id) ? map.set(o.id, [o]) : map.get(o.id).push(o));

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

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

2）您也可以使用reduce

const arr = [
  {
    id: 1,
    name: "a",
  },
  {
    id: 1,
    name: "b",
  },
  {
    id: 1,
    name: "c",
  },
  {
    id: 2,
    name: "b",
  },
  {
    id: 2,
    name: "c",
  },
];

const result = [...arr.reduce((map, curr) => {
  !map.has(curr.id) ? map.set(curr.id, [curr]) : map.get(curr.id).push(curr);
  return map;
}, new Map()).values()];
console.log(result);

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

標籤：javascript 数组

上一篇：映射和顯示Fontawesome圖示

下一篇：使用值創建N長度的陣列