Angular中响应对象数组重复项格式化处理方案

针对你需要的数组转换需求，这里可以通过reduce函数结合组标识判断来实现，核心逻辑是跟踪当前对象所属的分组，仅保留每组首个对象的完整属性，后续同组对象清空name和age：

代码实现 #

const originalData = [
  { name: 'ramesh', age: 12, city: 'mumbai' },
  { name: 'ramesh', age: 12, city: 'mumbai' },
  { name: 'amit', age: 13, city: 'mumbai' },
  { name: 'amit', age: 13, city: 'mumbai' },
  { name: 'ganesh', age: 14, city: 'mumbai' },
  { name: 'ganesh', age: 14, city: 'mumbai' },
  { name: 'ganesh', age: 14, city: 'mumbai' },
  { name: 'ganesh', age: 14, city: 'mumbai' },
];

const processedData = originalData.reduce((acc, current) => {
  // 用name+age拼接成组标识，判断是否属于同一组
  const groupKey = `${current.name}-${current.age}`;
  
  if (acc.lastGroupKey !== groupKey) {
    // 新组第一个对象，保留完整属性
    acc.result.push({ ...current });
    acc.lastGroupKey = groupKey;
  } else {
    // 同组后续对象，清空name、age，保留city
    acc.result.push({ name: '', age: '', city: current.city });
  }
  
  return acc;
}, { result: [], lastGroupKey: '' }).result;

逻辑说明 #

1. 累加器acc包含两个状态：result存储处理后的数组，lastGroupKey记录上一个对象的分组标识
2. 遍历每个对象时，生成当前对象的分组标识（由name和age拼接，确保同组对象的标识唯一）
3. 若当前分组标识与上一个不同，说明是新组的第一个对象，直接复制原对象到结果数组，并更新分组标识
4. 若分组标识相同，说明是同组的后续对象，创建新对象并清空name和age，保留city后加入结果数组
5. 最终从累加器中取出result即为目标数组

这个方案适配你提供的连续同组数据场景，若后续遇到非连续的同组数据，可调整为用Set记录已出现的分组标识，再判断是否为该组首个对象。

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