JavaScript：将订单对象数组重组为按companyId分组的数组

嘿，作为JavaScript新手，遇到这种数组重组的问题完全不用慌！这其实是很常见的分组需求，用JS里的reduce方法就能轻松搞定，我给你一步步拆解～

先明确需求示例 #

假设你的startArray长这样（包含唯一orderId和可能重复的companyId）：

const startArray = [
  { orderId: 1, companyId: 'COMP001', orderDate: '2024-01-01' },
  { orderId: 2, companyId: 'COMP002', orderDate: '2024-01-02' },
  { orderId: 3, companyId: 'COMP001', orderDate: '2024-01-03' },
  { orderId: 4, companyId: 'COMP003', orderDate: '2024-01-04' },
  { orderId: 5, companyId: 'COMP002', orderDate: '2024-01-05' }
];

我们要实现的目标是：把同一个companyId的订单归到一起，最终可以得到两种常见的格式，你可以根据需求选择。

方案1：得到以CompanyId为键的对象（最直接） #

用Array.reduce()来做分组，这是处理这类问题的标准工具：

const groupedByCompany = startArray.reduce((acc, currentOrder) => {
  // 取出当前订单的companyId
  const companyId = currentOrder.companyId;
  
  // 如果累加器里还没有这个公司的条目，就初始化一个空数组
  if (!acc[companyId]) {
    acc[companyId] = [];
  }
  
  // 把当前订单添加到对应公司的数组里
  acc[companyId].push(currentOrder);
  
  // 返回累加器，继续下一次迭代
  return acc;
}, {}); // 初始值是一个空对象

运行后，groupedByCompany的结果是：

{
  "COMP001": [
    { orderId: 1, companyId: 'COMP001', orderDate: '2024-01-01' },
    { orderId: 3, companyId: 'COMP001', orderDate: '2024-01-03' }
  ],
  "COMP002": [
    { orderId: 2, companyId: 'COMP002', orderDate: '2024-01-02' },
    { orderId: 5, companyId: 'COMP002', orderDate: '2024-01-05' }
  ],
  "COMP003": [
    { orderId: 4, companyId: 'COMP003', orderDate: '2024-01-04' }
  ]
}

方案2：得到数组形式的endArray（每个元素是公司+订单数组） #

如果你的endArray需要是数组结构（每个元素包含companyId和对应的orders数组），可以在方案1的基础上再处理一步：

// 先按方案1得到分组对象
const groupedByCompany = startArray.reduce((acc, currentOrder) => {
  const companyId = currentOrder.companyId;
  if (!acc[companyId]) acc[companyId] = [];
  acc[companyId].push(currentOrder);
  return acc;
}, {});

// 把分组对象转成目标数组
const endArray = Object.entries(groupedByCompany).map(([companyId, orders]) => {
  return { companyId, orders };
});

最终的endArray就是：

[
  {
    companyId: "COMP001",
    orders: [
      { orderId: 1, companyId: 'COMP001', orderDate: '2024-01-01' },
      { orderId: 3, companyId: 'COMP001', orderDate: '2024-01-03' }
    ]
  },
  {
    companyId: "COMP002",
    orders: [
      { orderId: 2, companyId: 'COMP002', orderDate: '2024-01-02' },
      { orderId: 5, companyId: 'COMP002', orderDate: '2024-01-05' }
    ]
  },
  {
    companyId: "COMP003",
    orders: [
      { orderId: 4, companyId: 'COMP003', orderDate: '2024-01-04' }
    ]
  }
]

新手友好的小提示 #

• reduce的核心是累加器（acc）：它会在每次迭代中保存我们的分组结果，从初始的空对象开始，逐步填充内容。
• 如果担心companyId可能为空或者undefined，可以加个判断过滤掉无效数据，比如在reduce里先检查companyId是否存在：

  if (!currentOrder.companyId) return acc; // 跳过无效订单
  

• 如果你熟悉ES6语法，还可以用解构赋值简化代码，比如把currentOrder的字段拆出来写，让代码更简洁。

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