如何按对象属性重新分组对象数组并返回数组类型结果

我知道可以用reduce方法实现数组对象按属性分组，但希望返回数组而非对象格式的结果。以下是具体示例：

输入示例 #

[
  {
    "name": "ABC Equity",
    "category": "Equity"
  },
  {
    "name": "EBC Bonds",
    "category": "Bond"
  },
  {
    "name": "Corporate Bonds",
    "category": "Bond"
  },
  {
    "name": "Private Equity",
    "category": "Equity"
  },
  {
    "name": "Fixed abc",
    "category": "Fixed"
  }
]

期望输出 #

[
  {
    label: 'Equity',
    options: [
      { value: 'ABC Equity', label: 'ABC Equity'},
      { value: 'Private Equity', label: 'Private Equity'},
    ],
  },
  {
    label: 'Bond',
    options: [
      { value: 'EBC Bonds', label: 'EBC Bonds'},
      { value: 'Corporate Bonds', label: 'Corporate Bonds' },
    ],
  },
   {
    label: 'Fixed',
    options: [
      { value: 'Fixed abc', label: 'Fixed abc'}
    ],
  },
]

解决方案代码 #

const input = [
  { "name": "ABC Equity", "category": "Equity" },
  { "name": "EBC Bonds", "category": "Bond" },
  { "name": "Corporate Bonds", "category": "Bond" },
  { "name": "Private Equity", "category": "Equity" },
  { "name": "Fixed abc", "category": "Fixed" }
];

const groupedResult = Object.values(input.reduce((acc, item) => {
  // 初始化当前category的分组结构
  if (!acc[item.category]) {
    acc[item.category] = {
      label: item.category,
      options: []
    };
  }
  // 添加转换后的选项对象
  acc[item.category].options.push({
    value: item.name,
    label: item.name
  });
  return acc;
}, {}));

console.log(groupedResult);

代码逻辑说明 #

1. 先用reduce遍历输入数组，构建一个临时分组对象：键为category的值，值为包含label和options的结构。
2. 遍历每个元素时，若当前category未在临时对象中，就初始化对应的分组结构；若已存在，直接往options数组中添加转换后的{value, label}对象。
3. 最后通过Object.values()将临时对象的所有值提取为数组，得到符合要求的结果。

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