JavaScript オブジェクトを複数のプロパティごとにグループ化し、それらの値を合計するにはどうすればよいでしょうか?

複数のプロパティによるオブジェクトのグループ化とその値の合計

JavaScript では、オブジェクトの配列を操作するのが一般的です。場合によっては、特定のプロパティを合計するなど、値の計算を実行する際に、これらのオブジェクトを複数のプロパティでグループ化する必要があります。

問題の概要

オブジェクトの配列が与えられた場合、2 つのプロパティ (形状と色) に基づいてグループ化することを目的としています。ただし、オブジェクトの形状と色が一致する場合にのみ、オブジェクトを複製として扱いたいと考えています。目標は、各グループ内のオブジェクトの使用プロパティとインスタンス プロパティを合計し、重複を削除することです。

期待される結果

次のサンプル配列を使用します:

arr = [
    {shape: 'square', color: 'red', used: 1, instances: 1},
    {shape: 'square', color: 'red', used: 2, instances: 1},
    {shape: 'circle', color: 'blue', used: 0, instances: 0},
    {shape: 'square', color: 'blue', used: 4, instances: 4},
    {shape: 'circle', color: 'red', used: 1, instances: 1},
    {shape: 'circle', color: 'red', used: 1, instances: 0},
    {shape: 'square', color: 'blue', used: 4, instances: 5},
    {shape: 'square', color: 'red', used: 2, instances: 1}
];

4 つの配列を取得することを期待しています。 groups:

[{shape: "square", color: "red", used: 5, instances: 3},
{shape: "circle", color: "red", used: 2, instances: 1},
{shape: "square", color: "blue", used: 11, instances: 9},
{shape: "circle", color: "blue", used: 0, instances: 0}]

Array#reduce と Object#assign を使用した解決策

これを実現するには、JavaScript の Array#reduce メソッドを利用して、次の配列を反復処理します。オブジェクト。オブジェクトごとに、形状と色のプロパティを連結して一意のキーを構築します。次に、補助オブジェクトであるヘルパーを使用して、グループ化されたオブジェクトを追跡します。

var helper = {};
var result = arr.reduce(function(r, o) {
  var key = o.shape + '-' + o.color;

  if(!helper[key]) {
    helper[key] = Object.assign({}, o); // create a copy of o
    r.push(helper[key]);
  } else {
    helper[key].used += o.used;
    helper[key].instances += o.instances;
  }

  return r;
}, []);

キーがヘルパー オブジェクトに存在しない場合は、Object.assign() を使用して新しいエントリを追加します。現在のオブジェクトの新しいコピー。次に、この新しいオブジェクトを結果配列にプッシュします。

キーがヘルパーにすでに存在する場合、それは重複が見つかったことを意味します。この場合、ヘルパー内の対応するオブジェクトの used プロパティとインスタンス プロパティをインクリメントするだけです。

最後に、結果の配列を返します。これにより、オブジェクトの値を合計しながら、形状と色で効果的にオブジェクトがグループ化されます。

以上がJavaScript オブジェクトを複数のプロパティごとにグループ化し、それらの値を合計するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。