如何按嵌套值将嵌套对象数组分组为多个数组

我明白你遇到的困扰——用groupBy按id分组后，在转换为目标数组格式时，嵌套的qty数据莫名其妙丢失了。这大概率是因为分组或后续映射过程中没有完整保留原始项的信息，我给你一步步拆解解决方案：

先明确场景（假设你的输入/期望输出是这样） #

比如你的原始数组是：

const input = [
  { id: 1, product: "Apple", qty: 2 },
  { id: 2, product: "Banana", qty: 5 },
  { id: 1, product: "Apple", qty: 3 },
  { id: 2, product: "Banana", qty: 1 },
  { id: 3, product: "Orange", qty: 4 }
];

你期望的输出是按id排序，同时保留每个id对应的所有qty数据：

const expected = [
  { id: 1, quantities: [2, 3] },
  { id: 2, quantities: [5, 1] },
  { id: 3, quantities: [4] }
];

问题出在哪？ #

通常的错误操作是：

1. 分组时只把部分字段存入分组集合（比如只存id，没存qty）；
2. 映射为目标数组时，没有从分组后的原始项中提取qty，直接跳过了这一步。

解决方案（分两种情况） #

情况1：使用Lodash的groupBy

如果你用Lodash工具库，只要确保分组后完整保留原始项，再在映射时提取qty即可：

const _ = require('lodash');

// 1. 按id分组，完整保留每个原始项
const grouped = _.groupBy(input, 'id');

// 2. 将分组对象转换为目标数组，提取qty并排序
const result = Object.entries(grouped)
  .map(([idStr, items]) => ({
    id: Number(idStr), // 把字符串id转成数字类型
    quantities: items.map(item => item.qty) // 从每个原始项中提取qty
  }))
  .sort((a, b) => a.id - b.id); // 按id排序

情况2：自己实现groupBy（不依赖第三方库）

如果不想用Lodash，自己写个简单的groupBy函数，核心是把完整的原始项推入分组数组：

// 自定义groupBy函数
function groupBy(arr, key) {
  return arr.reduce((acc, currentItem) => {
    const groupKey = currentItem[key];
    // 如果该分组不存在，初始化一个空数组
    if (!acc[groupKey]) {
      acc[groupKey] = [];
    }
    // 把完整的当前项推入分组，而不是只存部分字段！
    acc[groupKey].push(currentItem);
    return acc;
  }, {});
}

// 后续步骤和上面一致
const grouped = groupBy(input, 'id');
const result = Object.entries(grouped)
  .map(([idStr, items]) => ({
    id: Number(idStr),
    quantities: items.map(item => item.qty)
  }))
  .sort((a, b) => a.id - b.id);

关键注意点 #

• 分组时必须保留完整的原始对象，不能只提取id，否则后续根本拿不到qty数据；
• 映射阶段要显式遍历分组内的每个项，提取你需要的qty（如果需要保留更多字段，比如product，也可以在这里一并处理）；
• 最后记得按id排序，确保输出是有序的数组。

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