我们可以使用 reduce 和 Object.entries 来实现这个功能。以下是一个使用 ES6 语法的示例代码：

const data = [
  { id: 1, name: 'John', age: 21 },
  { id: 2, name: 'Jane', age: 25 },
  { id: 3, name: 'Steve', age: 24 },
  { id: 4, name: 'Mary', age: 27 },
  { id: 1, chat: 'Hello' },
  { id: 2, chat: 'Hi' },
  { id: 4, chat: 'Bye' },
  { id: 2, message: 'How are you?' },
];

const merged = data.reduce((acc, [key, value]) => {
  if (!acc[key]) {
    acc[key] = { [key]: value, others: [] };
  } else {
    acc[key].others.push(value);
  }
  return acc;
}, {});

const result = Object.values(merged).map((item) => ({
  ...item[key],
  ...Object.assign({}, ...item.others),
}));

console.log(result);
// 输出结果：
// [
//   { id: 1, name: 'John', age: 21, chat: 'Hello' },
//   { id: 2, name: 'Jane', age: 25, chat: 'Hi', message: 'How are you?' },
//   { id: 3, name: 'Steve', age: 24 },
//   { id: 4, name: 'Mary', age: 27, chat: 'Bye' }
// ]

在上面的示例代码中，我们首先通过 reduce 函数创建一个对象，将数据按照 id 进行分组，并将其他属性拼接成一个数组。然后使用 Object.values() 将结果转换为数组，并使用 Object.assign() 合并对象中的属性。最终输出合并后的结果。