JS按属性分组对象：如何按group字段分组并格式化输出？

需求说明 #

给定如下JS数组：

[
{groupId:4,group:"g4",name:"Luke",value:12},
{groupId:3,group:"g3",name:"Mike",value:21},
{groupId:3,group:"g3",name:"Greg",value:33},
{groupId:4,group:"g4",name:"Harry",value:42},
{groupId:4,group:"g4",name:"David",value:13},
{groupId:4,group:"g4",name:"John",value:14},
{groupId:3,group:"g3",name:"Joe",value:23},
{groupId:2,group:"g2",name:"Albert",value:32},
{groupId:2,group:"g2",name:"Marie",value:25}
]

需要按group字段分组，输出规则为：先显示每组的group:groupId，再依次输出组内每个元素的name:value，最终输出格式如下：

g4:4
Luke:12
Harry:42
David:13
John:14
g3:3
Mike:21
Greg:33
Joe:23
g2:2
Albert:32
Marie:25

实现方案 #

核心思路 #

1. 分组处理：用reduce方法将数组按group字段归类，同时保留每组的groupId和成员信息；
2. 排序组顺序：按照groupId从大到小排序分组，保证输出顺序和示例一致；
3. 拼接输出内容：遍历排序后的分组，拼接每组的标题和成员行，最终组合成目标格式的字符串。

代码实现 #

const data = [
  {groupId:4,group:"g4",name:"Luke",value:12},
  {groupId:3,group:"g3",name:"Mike",value:21},
  {groupId:3,group:"g3",name:"Greg",value:33},
  {groupId:4,group:"g4",name:"Harry",value:42},
  {groupId:4,group:"g4",name:"David",value:13},
  {groupId:4,group:"g4",name:"John",value:14},
  {groupId:3,group:"g3",name:"Joe",value:23},
  {groupId:2,group:"g2",name:"Albert",value:32},
  {groupId:2,group:"g2",name:"Marie",value:25}
];

// 1. 按group字段分组，存储groupId和成员列表
const grouped = data.reduce((acc, item) => {
  if (!acc[item.group]) {
    acc[item.group] = {
      groupId: item.groupId,
      members: []
    };
  }
  acc[item.group].members.push({ name: item.name, value: item.value });
  return acc;
}, {});

// 2. 按groupId从大到小排序分组的键
const sortedGroups = Object.keys(grouped).sort((a, b) => grouped[b].groupId - grouped[a].groupId);

// 3. 拼接成目标格式的字符串
const output = sortedGroups.map(groupKey => {
  const groupLine = `${groupKey}:${grouped[groupKey].groupId}`;
  const memberLines = grouped[groupKey].members.map(member => `${member.name}:${member.value}`);
  return [groupLine, ...memberLines].join('\n');
}).join('\n');

console.log(output);

代码解释 #

• reduce分组：遍历原始数组，每个元素根据group值存入对应分组，每个分组对象包含groupId和成员的name/value列表；
• 排序分组：通过Object.keys获取所有分组名称，利用groupId的数值差实现倒序排序，匹配示例的输出顺序；
• 拼接字符串：将每个分组的标题行和成员行合并，再把所有分组的内容用换行符连接，最终生成符合要求的输出文本。

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