如何基于product字段分组JavaScript对象并重组结构？

实现思路 #

通过Array.reduce先构建以product名称为键的分组对象，再遍历metrics补充分组内容，最后将分组对象转为数组得到目标结构。

完整代码 #

const a = {
  products: {
    keyResults: [
      { leader: "Aaron", product: "Product 1" },
      { leader: "Addie", product: "Product 1" },
      { leader: "Mindy", product: "Product 1" },
      { leader: "Wiley", product: "Product 2" },
    ],
    metrics: [
      { leader: "Aaron", product: "Product 1" },
      { leader: "Wiley", product: "Product 2" }
    ]
  }
};

// 第一步：基于keyResults构建初始分组
const groupedProducts = a.products.keyResults.reduce((result, item) => {
  const productKey = item.product;
  // 初始化分组结构
  if (!result[productKey]) {
    result[productKey] = {
      product: productKey,
      keyResults: [],
      metrics: []
    };
  }
  // 加入当前keyResult项
  result[productKey].keyResults.push(item);
  return result;
}, {});

// 第二步：补充分组的metrics内容
a.products.metrics.forEach(item => {
  const productKey = item.product;
  if (groupedProducts[productKey]) {
    groupedProducts[productKey].metrics.push(item);
  }
});

// 转换为目标数组结构
const b = {
  products: Object.values(groupedProducts)
};

console.log(b);

步骤说明 #

1. 初始化分组：用reduce遍历keyResults，每个product对应一个分组对象，包含product名称、空的keyResults和metrics数组，同时将当前keyResult项加入对应分组。
2. 补全metrics：遍历metrics数组，根据product名称找到对应分组，将metrics项推入分组的metrics数组。
3. 转换结构：用Object.values()将分组对象转为数组，得到最终的products数组结构。

关于Lodash sortBy的说明 #

sortBy仅用于对数组元素排序，无法实现按字段聚合分组的需求，因此不适用当前场景。

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