ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript で複数のプロパティでオブジェクトをグループ化し、値を集計する方法

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

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-11-09 06:07:021039ブラウズ

How to Group Objects by Multiple Properties and Aggregate Values in JavaScript?

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

複数のプロパティによる配列内のオブジェクトをグループ化するタスクでは、一般的な要件は次のとおりです。これらのプロパティごとにグループ化するだけでなく、特定のオブジェクト プロパティの値を合計することもできます。ただし、すべての重複を 2 次元配列に単純にネストするだけの解決策では不十分です。

問題ステートメント

形状ごとにグループ化する必要があるオブジェクトの配列を考えてみましょう。色。この配列内のオブジェクトは、形状と色の両方が同じである場合にのみ重複とみなされます。重複したオブジェクトの場合は、使用済みの値とインスタンスの値を合計して重複を削除する必要があります。その結果、固有の形状と色のオブジェクトの簡潔なリストが得られます。

解決策

この問題を効果的に解決するには、Array#reduce メソッドを、遭遇した形状と色の組み合わせを追跡するヘルパー オブジェクトと組み合わせて利用できます:

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]) {
    // If it's a unique combination, add to the helper and result array
    helper[key] = Object.assign({}, o);
    r.push(helper[key]);
  } else {
    // If it's a duplicate, update the values in the helper
    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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。