如何用JavaScript实现多分类JSON对象克隆并按分类分组？

刚好碰到过类似的需求，我来给你捋捋怎么实现——你要的是把那些属于多个分类的对象克隆一份，分别放到对应的分组里，对吧？

首先先补全你给出的示例数据（方便测试）：

var products = [
  {"Name": "Product 1", "Details": "Lorum Ipsum lorum ipsum 1", "Cost": 100, "Function": "Engineering", "Type": "Laptop, Tablet", "ID":0 },
  {"Name":"Product 2", "Details": "Lorum Ipsum lorum ipsum 2", "Cost": 120, "Function": "Healthcare", "Type": "Tablet, Phone", "ID":1 },
  {"Name":"Product 3", "Details": "Lorum Ipsum lorum ipsum 3", "Cost": 80, "Function": "Education", "Type": "Laptop", "ID":2 }
];

接下来是实现代码，核心思路分两步：先展开多分类对象（克隆+拆分），再进行常规分组：

function groupByMultiCategory(arr, groupKey) {
  // 第一步：把多分类的对象拆分成多个克隆对象，每个对象对应一个分类
  const expandedItems = arr.flatMap(item => {
    // 拆分分类字符串，去除每个分类前后的空格
    const categories = item[groupKey].split(',').map(cat => cat.trim());
    // 为每个分类生成克隆对象，替换groupKey为当前单个分类
    return categories.map(category => ({
      ...item, // 浅克隆原对象的所有属性
      [groupKey]: category // 覆盖分组key为单个分类值
    }));
  });

  // 第二步：对展开后的数组按指定key分组
  return expandedItems.reduce((resultGroups, currentItem) => {
    const category = currentItem[groupKey];
    // 如果当前分组不存在，就初始化一个空数组
    resultGroups[category] = resultGroups[category] || [];
    // 把当前对象加入对应分组
    resultGroups[category].push(currentItem);
    return resultGroups;
  }, {});
}

// 调用示例：按Type字段分组
const groupedProducts = groupByMultiCategory(products, 'Type');
console.log(groupedProducts);

代码细节说明 #

• flatMap的作用：遍历每个产品时，把多分类的产品拆成多个克隆对象，同时自动合并成一维数组，避免出现嵌套结构。
• 对象克隆：用...item进行浅克隆，保证原对象不会被修改；如果你的对象是深层嵌套的复杂结构，可以换成JSON.parse(JSON.stringify(item))或者Lodash的cloneDeep来实现深克隆。
• 灵活分组：这个函数是通用的，不管你要按Type还是其他字段（比如Function）分组，只要传入对应的key就行。

输出结果示例 #

运行后你会得到这样的分组结构：

{
  Laptop: [
    { Name: 'Product 1', Details: 'Lorum Ipsum lorum ipsum 1', Cost: 100, Function: 'Engineering', Type: 'Laptop', ID: 0 },
    { Name: 'Product 3', Details: 'Lorum Ipsum lorum ipsum 3', Cost: 80, Function: 'Education', Type: 'Laptop', ID: 2 }
  ],
  Tablet: [
    { Name: 'Product 1', Details: 'Lorum Ipsum lorum ipsum 1', Cost: 100, Function: 'Engineering', Type: 'Tablet', ID: 0 },
    { Name: 'Product 2', Details: 'Lorum Ipsum lorum ipsum 2', Cost: 120, Function: 'Healthcare', Type: 'Tablet', ID: 1 }
  ],
  Phone: [
    { Name: 'Product 2', Details: 'Lorum Ipsum lorum ipsum 2', Cost: 120, Function: 'Healthcare', Type: 'Phone', ID: 1 }
  ]
}

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