Gộp object trong mảng theo khóa tương tự trong JavaScript

Giả sử chúng ta có mảng object sau:

const arr = [
  {id: 1, h1: 'Daily tests'},
  {id: 2, h1: 'Details'},
  {id: 1, h2: 'Daily classes'},
  {id: 3, h2: 'Results'},
  {id: 2, h3: 'Admissions'},
  {id: 1, h4: 'Students'},
  {id: 2, h5: 'Alumni'},
  {id: 3, h3: 'Appreciations'},
  {id: 1, h5: 'Tiny Tots'},
  {id: 1, h6: 'Extras'},
];

Cần viết hàm chuyển mảng này thành mảng mới nơi tất cả các tiêu đề (h1, h2, h3...) có cùng id được gom vào cùng một object.

Ví dụ

const arr = [
  {id: 1, h1: 'Daily tests'},
  {id: 2, h1: 'Details'},
  {id: 1, h2: 'Daily classes'},
  {id: 3, h2: 'Results'},
  {id: 2, h3: 'Admissions'},
  {id: 1, h4: 'Students'},
  {id: 2, h5: 'Alumni'},
  {id: 3, h3: 'Appreciations'},
  {id: 1, h5: 'Tiny Tots'},
  {id: 1, h6: 'Extras'},
];

const clubArray = (arr) => {
  return arr.reduce((acc, val, ind) => {
    const index = acc.findIndex(el => el.id === val.id);
    if (index !== -1) {
      const key = Object.keys(val)[1];
      acc[index][key] = val[key];
    } else {
      acc.push(val);
    }
    return acc;
  }, []);
};

console.log(clubArray(arr));

Kết quả

Đầu ra trong console sẽ là:

[
  {
    id: 1,
    h1: 'Daily tests',
    h2: 'Daily classes',
    h4: 'Students',
    h5: 'Tiny Tots',
    h6: 'Extras'
  },
  { id: 2, h1: 'Details', h3: 'Admissions', h5: 'Alumni' },
  { id: 3, h2: 'Results', h3: 'Appreciations' }
]