如何用JavaScript动态重构数组，按category分组聚合商品与销售信息

现有数组格式 #

存在多个类似的category，此处仅提供一个示例

[
   {
      "itemId":"123",
      "itemName":"name 1",
      "category":"electric",
      "salePersonName":"person name 1"
   },
   {
      "itemId":"234",
      "itemName":"name 2",
      "category":"electric",
      "salePersonName":"person name 2"
   },
   {
      "itemId":"345",
      "itemName":"name 3",
      "category":"electric",
      "salePersonName":"person name 3"
   }
]

期望输出格式 #

注：原期望输出里的temId为笔误，已修正为正确的itemId

[
   {
      "category":"electric",
      "items":[
         {
            "itemId":"123",
            "itemName":"name 1"
         },
         {
            "itemId":"234",
            "itemName":"name 2"
         },
         {
            "itemId":"345",
            "itemName":"name 3"
         }
      ],
      "salePersons":[
         {
            "salePersonName":"person name 1"
         },
         {
            "salePersonName":"person name 2"
         },
         {
            "salePersonName":"person name 3"
         }
      ]
   }
]

原有尝试代码问题 #

以下是我之前尝试过的代码，但是无法得到预期输出

const array = [{
    "itemId": "123",
    "itemName": "name 1",
    "category": "electric",
    "salePersonName": "person name 1"
  },
  {
    "itemId": "234",
    "itemName": "name 2",
    "category": "electric",
    "salePersonName": "person name 2"
  }, {
    "itemId": "345",
    "itemName": "name 3",
    "category": "electric",
    "salePersonName": "person name 3"
  },
  {
    "itemId": "34111",
    "itemName": "name 4",
    "category": "newCategory",
    "salePersonName": "person name 5"
  }
];
let result = {};
array.forEach(function(o) {
  result[o.category] = result[o.category] || {};
  result[o.category]['items'] = [{
    "itemId": result[o.itemId],
    "itemName": result[o.itemName]
  }];
  result[o.category]['salePersons'] = [{
    "salePersonName": result[o.salePersonName]
  }];
});

console.log("result", result)

原有代码的核心问题：

1. 每次遍历直接覆盖items和salePersons数组，导致每个分类下只保留最后一条数据
2. 取值逻辑错误，错误从result对象取属性，应该从当前遍历的元素对象取对应字段
3. 没有预先初始化items和salePersons为空数组，无法正确追加元素

修复后的实现代码 #

const array = [{
    "itemId": "123",
    "itemName": "name 1",
    "category": "electric",
    "salePersonName": "person name 1"
  },
  {
    "itemId": "234",
    "itemName": "name 2",
    "category": "electric",
    "salePersonName": "person name 2"
  }, 
  {
    "itemId": "345",
    "itemName": "name 3",
    "category": "electric",
    "salePersonName": "person name 3"
  },
  {
    "itemId": "34111",
    "itemName": "name 4",
    "category": "newCategory",
    "salePersonName": "person name 5"
  }
];

// 先用对象做分组映射，方便按category快速查找
const groupMap = {};
array.forEach(item => {
  const category = item.category;
  // 分类不存在时初始化分组结构
  if (!groupMap[category]) {
    groupMap[category] = {
      category: category,
      items: [],
      salePersons: []
    }
  }
  // 追加商品信息
  groupMap[category].items.push({
    itemId: item.itemId,
    itemName: item.itemName
  });
  // 追加销售人员信息
  groupMap[category].salePersons.push({
    salePersonName: item.salePersonName
  });
});
// 把对象的值转成数组，就是最终结果
const result = Object.values(groupMap);
console.log(result);

运行后即可输出符合要求的结构，支持自动处理多个不同category的分组。

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