如何按多个字段对JavaScript数组进行分组？

问题背景 #

现有如下JavaScript数组：

[ {
  id_base: 2,
  nombre_base: 'Hayama',
  nombre_flota: 'Browseblab',
  matricula: '#b65e9e',
  id_vehiculo: 3
},  {
  id_base: 2,
  nombre_base: 'Hayama',
  nombre_flota: 'Browseblab',
  matricula: '#b65e9e',
  id_vehiculo: 3
},  {
  id_base: 2,
  nombre_base: 'Hayama',
  nombre_flota: 'Browseblab',
  matricula: '#a606f8',
  id_vehiculo: 4
},  {
  id_base: 1,
  nombre_base: 'Cabitan',
  nombre_flota: 'Browseblab',
  matricula: '#8f72c2',
  id_vehiculo: 1
},  {
  id_base: 1,
  nombre_base: 'Cabitan',
  nombre_flota: 'Browseblab',
  matricula: '#8f72c2',
  id_vehiculo: 1
}]

期望将其分组为以下结构（按id_base、nombre_base、nombre_flota分组，将matricula和id_vehiculo作为子数组）：

[{
  id_base: 2,
  nombre_base: 'Hayama',
  nombre_flota: 'Browseblab',
  vehiculos: [{
    matricula: '#b65e9e',
    id_vehiculo: 3
  }, {
    matricula: '#a606f8',
    id_vehiculo: 4
  }]
}, {
  id_base: 1,
  nombre_base: 'Cabitan',
  nombre_flota: 'Browseblab',
  vehiculos: [{
    matricula: '#8f72c2',
    id_vehiculo: 1
  }, {
    matricula: '#8f72c2',
    id_vehiculo: 1
  }]
}]

注：原期望结构存在语法错误（对象不能直接嵌套无键名的数组），这里补充子数组键名为vehiculos，确保结构符合JavaScript语法规范

之前尝试的代码：

let agrupadoBases = result.reduce((group, linea) => {
  const { id_base } = linea
  group[id_base] = group[id_base] ?? [] 
  delete linea.id_base 
  group[id_base].push(linea) 
  return group
}, {})

得到的结果仅按id_base分组，未保留基础信息并嵌套子数组：

{   
  '1': [     
    RowDataPacket {       
      nombre_base: 'Cabitan',       
      nombre_flota: 'Browseblab',       
      matricula: '#8f72c2',       
      id_vehiculo: 1     
    },   
  ],   
  '2': [     
    RowDataPacket {       
      nombre_base: 'Hayama',       
      nombre_flota: 'Browseblab',       
      matricula: '#b65e9e',       
      id_vehiculo: 3     
    },     
    RowDataPacket {       
      nombre_base: 'Hayama',       
      nombre_flota: 'Browseblab',       
      matricula: '#a606f8',       
      id_vehiculo: 4     
    }   
  ] 
}

修改后的解决方案 #

通过reduce按id_base作为分组键，同时为每个分组创建包含基础信息和子数组的对象，具体代码如下：

let agrupadoBases = Object.values(result.reduce((group, linea) => {
  // 提取所有字段
  const { id_base, nombre_base, nombre_flota, matricula, id_vehiculo } = linea;
  
  // 初始化分组对象（首次遇到该id_base时）
  if (!group[id_base]) {
    group[id_base] = {
      id_base,
      nombre_base,
      nombre_flota,
      vehiculos: []
    };
  }
  
  // 将车辆信息添加到对应分组的子数组
  group[id_base].vehiculos.push({
    matricula,
    id_vehiculo
  });
  
  return group;
}, {}));

代码说明 #

• 以id_base作为分组唯一标识，确保同一基础的条目归为一组
• 首次处理某个id_base时，创建包含基础信息的对象，并初始化vehiculos子数组
• 遍历每个条目时，提取车辆相关字段，添加到对应分组的子数组中
• 最后用Object.values()将分组对象转换为数组，得到目标结构

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