如何在對另一個屬性求和時按某個屬性對物件進行分組

我嘗試了很多方法來解決這個問題。我可以洗掉重復值。但問題是更新 total_product 值。我怎樣才能做到這一點？給我一些提示。

這是我的主陣列：

 const colors = [
    { "name": "Black", "total_product": 1 },
    { "name": "Black", "total_product": 1 },
    { "name": "White", "total_product": 1 },
    { "name": "White", "total_product": 1 },
    { "name": "White", "total_product": 1 },
    { "name": "White", "total_product": 1 },    
]

我想要這樣：

 const colors = [
    { "name": "Black", "total_product": 2 },
    { "name": "White", "total_product": 4 }         
]

uj5u.com熱心網友回復：

reduce將陣列“歸結”為累加器值是一個很好的例子。在這里，reduce ( doc ) 可用于創建計算每個名稱出現次數的物件...

const colors = [
    { "name": "Black", "total_product": 1 },
    { "name": "Black", "total_product": 1 },
    { "name": "White", "total_product": 1 },
    { "name": "White", "total_product": 1 },
    { "name": "White", "total_product": 1 },
    { "name": "White", "total_product": 1 } 
];

const counts = colors.reduce((acc, obj) => {
  if (!acc[obj.name]) acc[obj.name] = { name: obj.name, total_product: 0 };
  acc[obj.name].total_product  ;
  return acc;
}, {});
const result = Object.values(counts);
console.log(result);

countsreduce產生的中間值是這樣的……

{
  "Black": {
    "name": "Black",
    "total_product": 2 // <- incremented each time we found a "Black"
  },
  "White": {
    "name": "White",
    "total_product": 4 // <- incremented each time we found a "White"
  }
}

Object.values()，顧名思義，創建一個值陣列。

uj5u.com熱心網友回復：

您可以使用new Map()或簡單物件來存盤相同物件的計數：

const colors = [
  { "name": "Black", "total_product": 1 },
  { "name": "Black", "total_product": 1 },
  { "name": "White", "total_product": 1 },
  { "name": "White", "total_product": 1 },
  { "name": "White", "total_product": 1 },
  { "name": "White", "total_product": 1 },    
];

const colorsMap = new Map();

colors.forEach(color => {
  
  if (colorsMap.has(color.name)) {
    colorsMap.set(color.name, colorsMap.get(color.name)   1);
    return;
  }
  
  colorsMap.set(color.name, 1);
});

const groupedColors = [];

colorsMap.forEach((value, key) => {
  groupedColors.push({
    name: key,
    total_product: value
  });
})

console.log(groupedColors);

uj5u.com熱心網友回復：

回傳一個陣列是沒有意義的，因為您已經將陣列壓縮為唯一名稱及其各自的值，只需簡化為 Object：

const colors = [
  {name:"Black", total_product:1},
  {name:"Black", total_product:1},
  {name:"White", total_product:1},
  {name:"White", total_product:1},
  {name:"White", total_product:1},
  {name:"White", total_product:1},    
];

const sumColors = colors.reduce((ob, item) => {
  ob[item.name] ??= 0
  ob[item.name]  = item.total_product;
  return ob;
}, {});

console.log(sumColors); // {"Black": 2, "White": 4}

uj5u.com熱心網友回復：

const colors = [
  { name: "Black", total_product: 1 },
  { name: "Black", total_product: 1 },
  { name: "White", total_product: 1 },
  { name: "White", total_product: 1 },
  { name: "White", total_product: 1 },
  { name: "White", total_product: 1 }
];

const uniqueColors = (colors) => {
  const unique = [];
  colors.map((color) => {
    const index = unique.findIndex((c) => c.name === color.name);
    if (index === -1) {
      unique.push(color);
    } else {
      unique[index].total_product  ;
    }
  });
  return unique;
};

console.log(uniqueColors(colors));

標籤：javascript 数组 目的

上一篇：在PHP中，如何在物件值中設定陣列

下一篇：如何從物件中獲取值作為陣列