JavaScript中如何合并数组内具有共同属性的对象属性并按ID分组

问题原因 #

• 字段大小写不匹配：原数据的主键是大写ID，你调用函数时传的是小写id，导致无法正确读取分组键值
• 未过滤字段：原有逻辑直接把完整的原始对象塞入分组，没有提取你需要的MARKS、GRADE、RESULT三个字段
• 返回格式不符：原有逻辑返回的是键为ID的对象，而你需要的是包含ID和INFO字段的数组结构
• 优化建议：你给出的预期结果里INFO存在单个对象/数组两种格式，统一用数组存储会更便于后续数据遍历处理，以下实现默认统一用数组格式，如果你确实需要单条数据时返回对象可以自行加判断调整

实现代码 #

// 原始数据
const data = [ 
  { ID: '21',NAME: 'JACK',MARKS: 75,GRADE: 'A',RESULT: 'PASS ' },
  { ID: '21',NAME: 'JACK',MARKS: 32,GRADE: 'F',RESULT: 'FAIL' },
  { ID: '87',NAME: 'SAM',MARKS: 91,GRADE: 'A+',RESULT: 'PASS' },
  {ID: '7',NAME: 'TOM',MARKS: 100,GRADE: 'A+',RESULT: 'PASS' },
  { ID: '21',NAME: 'JACK',MARKS: 61,GRADE: 'B',RESULT: 'PASS' },
  { ID: '87',NAME: 'SAM',MARKS: 72,GRADE: 'B',RESULT: 'PASS ' }
]

function groupByField(data, field) {
  // 先按指定字段分组得到临时对象
  const groupObj = data.reduce((acc, cur) => {
    const key = cur[field]
    // 仅提取需要的三个字段生成INFO子项
    const infoItem = {
      MARKS: cur.MARKS,
      GRADE: cur.GRADE,
      RESULT: cur.RESULT
    }
    // 分组不存在则初始化空数组
    if(!acc[key]) {
      acc[key] = []
    }
    acc[key].push(infoItem)
    return acc
  }, {})
  // 将分组对象转换为目标数组结构
  return Object.keys(groupObj).map(id => ({
    ID: id,
    INFO: groupObj[id]
    // 如果需要单条数据时INFO为对象，把上面一行替换为下面这行即可
    // INFO: groupObj[id].length === 1 ? groupObj[id][0] : groupObj[id]
  }))
}

// 注意这里传的是大写的ID，和原数据字段保持一致
console.log(groupByField(data,'ID'))

输出结果 #

[
  {
    ID: '21',
    INFO: [
      { MARKS: 75, GRADE: 'A', RESULT: 'PASS ' },
      { MARKS: 32, GRADE: 'F', RESULT: 'FAIL' },
      { MARKS: 61, GRADE: 'B', RESULT: 'PASS' }
    ]
  },
  {
    ID: '87',
    INFO: [
      { MARKS: 91, GRADE: 'A+', RESULT: 'PASS' },
      { MARKS: 72, GRADE: 'B', RESULT: 'PASS ' }
    ]
  },
  {
    ID: '7',
    INFO: [
      { MARKS: 100, GRADE: 'A+', RESULT: 'PASS' }
    ]
  }
]

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