Объедините два объекта в массиве в один объект, если свойства объекта совпадают, и преобразуйте уникальные свойства в массив

Question

Вход -

[
  {color:'red', shape:'circle', size:'medium'},
  {color:'red', shape:'circle', size:'small'}
]

Выход -

[
  {color:'red', shape:'circle', size:['medium','small']}
]

Как этого достичь в Javascript?

Answer 1

Если вы просто хотите группировать на основе color и shape, вы можете использовать reduce. Создайте объект-аккумулятор с каждой уникальной комбинацией этих двух свойств, разделенных | в качестве ключа. И объект, который вы хотите в выводе, как их значение. Затем используйте Object.values(), чтобы получить эти объекты в виде массива.

const input = [
  {color:'red', shape:'circle', size :'medium'},
  {color:'red', shape:'circle', size:'small'},
  {color:'blue', shape:'square', size:'small'}
];

const merged = input.reduce((acc, { color, shape, size }) => {
  const key = color + "|" + shape;
  acc[key] = acc[key] || { color, shape, size: [] };
  acc[key].size.push(size);
  return acc
}, {})

console.log(Object.values(merged))

Вот как выглядит объединенный аккумулятор:

{
  "red|circle": {
    "color": "red",
    "shape": "circle",
    "size": [
      "medium",
      "small"
    ]
  },
  "blue|square": {
    "color": "blue",
    "shape": "square",
    "size": [
      "small"
    ]
  }
}

Вы можете сделать его динамичным, создав массив ключей, которые вы хотите сгруппировать по:

const input = [
      { color: 'red', shape: 'circle', size: 'medium' },
      { color: 'red', shape: 'circle', size: 'small' },
      { color: 'blue', shape: 'square', size: 'small' }
   ];
const groupKeys = ['color', 'shape'];

const merged = input.reduce((acc, o) => {
  const key = groupKeys.map(k => o[k]).join("|");
  
  if (!acc[key]) {
    acc[key] = groupKeys.reduce((r, k) => ({ ...r, [k]: o[k] }), {});
    acc[key].size = []
  }
  
  acc[key].size.push(o.size)
  return acc
}, {})

console.log(Object.values(merged))

Answer 2

Вот простая groupBy функция, которая принимает массив объектов и массив props для группировки по:

let data = [
  {color:'red', shape:'circle', size:'medium'},
  {color:'red', shape:'circle', size:'small'}
]

let groupBy = (arr, props) => Object.values(arr.reduce((r,c) => {
  let key = props.reduce((a,k) => `${a}${c[k]}`, '')
  let otherKeys = Object.keys(c).filter(k => !props.includes(k))
  r[key] = r[key] || {...c, ...otherKeys.reduce((a,k) => (a[k] = [], a),{})}
  otherKeys.forEach(k => r[key][k].push(c[k]))
  return r
}, {}))

console.log(groupBy(data, ['color','shape']))

Идея состоит в том, чтобы использовать Array.reduce и, в основном, создать строковый ключ переданного в реквизите. Для других полей создайте массив и продолжайте вводить значения туда на каждой итерации.

Answer 3

Вы можете создать общую функцию, которая принимает массив объектов и массив ключей для сопоставления в качестве своих параметров.

Вы можете сделать это в следующих шагах:

• Сначала используйте reduce() для массива объектов и установите аккумулятор в пустой массив []
• Получите другие реквизиты (уникальные реквизиты), используя filter() на Object.keys()
• Затем в каждой итерации найдите элемент массива аккумуляторов, у которого все заданные свойства совпадают с текущим объектом.
• Если элемент найден, используйте forEach() другие ключи и отправьте значения в соответствующий массив.
• Если элемент не найден, тогда установите каждый ключ в пустой массив.
• Наконец, верните результат reduce()

const arr = [
  {color:'red', shape:'circle', size:'medium'},
  {color:'red', shape:'circle', size:'small'}
]

function groupByProps(arr,props){
  const res = arr.reduce((ac,a) => {
    let ind = ac.findIndex(b => props.every(k => a[k] === b[k]));
    let others = Object.keys(a).filter(x => !props.includes(x));
    if(ind === -1){
      ac.push({...a});
      others.forEach(x => ac[ac.length - 1][x] = []);
      ind = ac.length - 1
    }
    others.forEach(x => ac[ind][x].push(a[x]));
    return ac;
  },[])
  return res;
}

const res = groupByProps(arr,['color','shape'])
console.log(res)