如何按颜色与尺寸筛选数据并汇总对应数量

你现在的代码只提取了颜色列表，要实现按颜色和尺寸分别汇总数量的需求，我们可以利用数组的flatMap和reduce方法来完成，下面是具体的实现方案：

步骤1：提取所有属性项 #

首先我们需要把所有产品的属性项从嵌套结构中提取出来，得到一个平铺的属性数组：

const data = [
  {
    id: 1,
    name: "Product A",
    attributes: [
      { color: "Red", size: "Small", qty: 200 },
      { color: "Red", size: "Medium", qty: 100 },
      { color: "Red", size: "Large", qty: 300 },
      { color: "Yellow", size: "Small", qty: 200 },
      { color: "Yellow", size: "Medium", qty: 100 },
      { color: "Yellow", size: "Large", qty: 300 },
    ],
  },
];

// 提取所有平铺的属性项
const allAttributes = data.flatMap(product => product.attributes);

步骤2：按颜色汇总数量 #

我们用reduce方法遍历属性数组，以颜色为键累加数量，最后把结果对象的数值提取成数组：

// 按颜色汇总
const colorTotalMap = allAttributes.reduce((acc, item) => {
  // 如果当前颜色还没在累加对象里，初始化为0
  if (!acc[item.color]) {
    acc[item.color] = 0;
  }
  // 累加数量
  acc[item.color] += item.qty;
  return acc;
}, {});

// 转换为你需要的数组格式 [600, 600]
const colorTotalArray = Object.values(colorTotalMap);
console.log("按颜色汇总结果：", colorTotalArray); // 输出 [600, 600]

步骤3：按尺寸汇总数量 #

逻辑和按颜色汇总完全一致，只是把键从color换成size。这里要注意：如果需要严格按照小号、中号、大号的顺序返回结果，最好手动指定顺序提取值（避免Object.values的顺序不确定性）：

// 按尺寸汇总
const sizeTotalMap = allAttributes.reduce((acc, item) => {
  if (!acc[item.size]) {
    acc[item.size] = 0;
  }
  acc[item.size] += item.qty;
  return acc;
}, {});

// 按指定顺序转换为数组格式 [400, 200, 600]
const sizeTotalArray = ["Small", "Medium", "Large"].map(size => sizeTotalMap[size]);
console.log("按尺寸汇总结果：", sizeTotalArray); // 输出 [400, 200, 600]

把这些代码整合在一起，就能得到你期望的两个汇总数组啦～

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