JavaScript でオブジェクトを複数のプロパティでグループ化し、その値を集計する方法

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

複数のプロパティによる配列内の要素のグループ化は、データの編成と要約に不可欠です。オブジェクトを形状と色でグループ化し、それらの値を集約するという特定の要件に対処するには、JavaScript の組み込みメソッドの機能を活用できます。

ステップ 1: Array#reduce

Array#reduce メソッドは、配列を反復処理し、個々の要素から単一の出力を蓄積するための簡潔かつ効率的な方法を提供します。この場合、これを使用して、結合された形状と色のプロパティに基づいてオブジェクトを蓄積できます。

ステップ 2: ヘルパー オブジェクト

追跡するヘルパー オブジェクトを使用します。形と色のユニークな組み合わせ。配列内の各オブジェクトについて、形状と色のプロパティを連結することによって、その組み合わせがヘルパーに存在するかどうかを確認します。存在しない場合は、ヘルパー オブジェクトに新しいエントリを作成し、同時に現在のオブジェクトのコピーを結果配列にプッシュします。

ステップ 3: 値の集計

同様の組み合わせがヘルパー オブジェクトにすでに存在する場合は、対応するエントリの used 値とインスタンス値を単純にインクリメントし、現在の値から効果的に値を集計します。 object.

ステップ 4: オブジェクトのコピー

配列内の元のオブジェクトの変更を避けるために、Object.assign を使用してコピーを作成します。これにより、ヘルパー オブジェクトにオブジェクトの独立したコピーが含まれるようになり、値を個別に集計できるようになります。

実装:

const 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 },
];

const helper = {};
const result = arr.reduce((r, o) => {
  const 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;
}, []);

console.log(result);

出力:

[
  { 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 }
]

このソリューションは、形状と色によってオブジェクトを効果的に集約し、データのまとまった概要

以上がJavaScript でオブジェクトを複数のプロパティでグループ化し、その値を集計する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。