如何按title条件合并JavaScript对象数组中相同title的data数组

原生JavaScript实现 #

无需引入第三方依赖，通过Map做中间缓存完成合并：

const originalArr = [
  {data: Array(22), title: '1111'},
  {data: Array(12), title: '2222'},
  {data: Array(6), title: '1111'},
  {data: Array(22), title: '3333'},
  {data: Array(0), title: '4444'}
];

const tempMap = new Map();
originalArr.forEach(item => {
  // 已存在同title数据则拼接data，不存在则初始化
  const currentData = tempMap.get(item.title) || [];
  tempMap.set(item.title, [...currentData, ...item.data]);
});

// 转换为目标结构数组
const result = Array.from(tempMap, ([title, data]) => ({ title, data }));

Lodash实现 #

如果项目已经引入lodash，可以通过分组+合并的链式调用实现：

const _ = require('lodash');

const result = _.chain(originalArr)
  .groupBy('title') // 按title字段分组
  .map((groupItems, title) => ({
    title,
    data: _.flatMap(groupItems, 'data') // 合并同组所有data数组
  }))
  .value();

两种实现都保留title在原数组中首次出现的顺序，data数组的拼接顺序和原数组中同title对象的出现顺序一致。如果需要对data数组内的元素去重，可在拼接完成后追加去重逻辑即可。

内容的提问来源于stack exchange，提问作者CraZyDroiD