React/JavaScript中如何按指定key合并数组并按字段分组？

实现逻辑 #

我们可以通过哈希表做分组索引，遍历原始数组过程中动态给重复分组的属性添加序号后缀，具体步骤如下：

• 初始化一个空对象作为分组映射表，用来记录每个last_name对应的已合并对象，以及该用户当前的记录条数
• 遍历原始数组的每一项：
  1. 取出当前项的last_name作为分组键
  2. 如果映射表中不存在该分组键：直接存入映射表，同时记录该分组当前计数为1
  3. 如果映射表中已存在该分组键：计数加1，遍历当前项除last_name外的所有属性，把属性名加上当前计数作为后缀，赋值到映射表中已存在的对象上
• 最后把映射表中的值转成数组，就是最终结果

代码实现 #

// 原始数组
const originArr = [
  {last_name: 'User1', status: 'BRONZE', type: 'Maintenance', due_date: '2022-06-04 00:00:00'},
  {last_name: 'User1', status: 'BRONZE', type: 'Contrôle technique', due_date: '2022-06-18 00:00:00'},
  {last_name: 'User2', status: 'BRONZE', type: 'Unknow', due_date: null}
]

// 合并函数，支持自定义分组key
function mergeArrayByKey(arr, groupKey) {
  const groupMap = {}
  arr.forEach(item => {
    const groupVal = item[groupKey]
    if (!groupMap[groupVal]) {
      // 首次出现该分组，直接存入，计数初始为1
      groupMap[groupVal] = {
        data: {...item},
        count: 1
      }
      return
    }
    // 已存在的分组，计数加1
    groupMap[groupVal].count += 1
    const currentCount = groupMap[groupVal].count
    // 遍历除分组key外的属性，添加后缀后合并
    Object.keys(item).forEach(key => {
      if (key !== groupKey) {
        groupMap[groupVal].data[`${key}${currentCount}`] = item[key]
      }
    })
  })
  // 提取所有合并后的数据返回数组
  return Object.values(groupMap).map(item => item.data)
}

// 调用，按last_name分组
const result = mergeArrayByKey(originArr, 'last_name')
console.log(result)

输出结果 #

输出格式和需求完全匹配（你示例中User1的第二个due_date漏写了后缀2，代码会统一处理为due_date2避免属性覆盖）：

[
  {
    last_name: 'User1',
    status: 'BRONZE',
    type: 'Maintenance',
    due_date: '2022-06-04 00:00:00',
    status2: 'BRONZE',
    type2: 'Contrôle technique',
    due_date2: '2022-06-18 00:00:00'
  },
  {
    last_name: 'User2',
    status: 'BRONZE',
    type: 'Unknow',
    due_date: null
  }
]

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