如何合并含重复title的对象数组？Section List分页数据合并方案

嘿，这个场景我太熟悉了——用Section List做分页加载时，很容易碰到新旧数据里有重复日期分组的情况。核心就是把相同title对应的data数组合并，同时保留唯一的分组项。我给你两个实用的解决方案：

首先先定义好我们的源数据，方便测试：

// 首次获取的数据
const firstData = [
  { title: '28/01/2020', data: [{location: 'madrid', city: 'madrid'}, {location: 'barcelona', city: 'barcelona'}] },
  { title: '29/01/2020', data: [{location: 'rabat', city: 'rabat'}, {location: 'alger', city: 'alger'}] }
];

// 第二次获取的数据
const secondData = [
  { title: '29/01/2020', data: [{location: 'london', city: 'london'}, {location: 'rio', city: 'rio'}] },
  { title: '30/01/2020', data: [{location: 'new york', city: 'new york'}, {location: 'roma', city: 'roma'}] }
];

这种方式逻辑清晰，适合新手理解，用title作为唯一键来快速判断分组是否已存在：

// 创建一个临时映射对象，用title作为键存储分组数据
const mergedMap = {};

// 处理首次加载的数据
firstData.forEach(item => {
  if (mergedMap[item.title]) {
    // 如果该分组已存在，合并data数组（用扩展运算符避免修改原数据）
    mergedMap[item.title].data = [...mergedMap[item.title].data, ...item.data];
  } else {
    // 如果分组不存在，直接存入映射对象（复制对象避免引用问题）
    mergedMap[item.title] = {...item};
  }
});

// 处理第二次加载的数据，逻辑和上面一致
secondData.forEach(item => {
  if (mergedMap[item.title]) {
    mergedMap[item.title].data = [...mergedMap[item.title].data, ...item.data];
  } else {
    mergedMap[item.title] = {...item};
  }
});

// 把映射对象的值转换成数组，就是最终的合并结果
const finalData = Object.values(mergedMap);

console.log(finalData);

如果想让代码更简洁，可以把两个数组合并后，用reduce一步完成合并逻辑：

// 合并两个数据源，然后用reduce遍历处理
const finalData = [...firstData, ...secondData].reduce((acc, currentItem) => {
  // 在累加器中查找是否已有相同title的分组
  const existingGroup = acc.find(group => group.title === currentItem.title);
  
  if (existingGroup) {
    // 存在则合并data数组
    existingGroup.data = [...existingGroup.data, ...currentItem.data];
  } else {
    // 不存在则新增分组（复制对象避免引用问题）
    acc.push({...currentItem});
  }
  
  return acc;
}, []);

console.log(finalData);

注意事项 #

• 我在代码里用了{...item}和[...arr]这种扩展运算符，目的是创建新的对象/数组，避免修改原数据导致的意外副作用。如果你的业务场景允许修改原数据，也可以直接操作，但一般推荐保持原数据的纯净性。
• 这两种方法都能保证最终数组里的title是唯一的，且相同title下的data会被完整合并。

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