バニラのアプローチを使用して JavaScript でオブジェクトの配列を効率的にグループ化するにはどうすればよいですか?

オブジェクトの配列に対する効率的な GroupBy メソッド

共通のプロパティに基づいてオブジェクトをグループ化することは、データ処理における一般的なタスクです。このスニペットは、標準的な JavaScript アプローチを使用して、配列内のオブジェクトをグループ化するための効率的なソリューションを提供します。

Underscore.js を避ける理由

Underscore.js は groupBy 関数を提供しますが、その実装はサポートされていない可能性があります。個別のグループではなく「マージされた」結果が必要な場合に適しています。

カスタム Vanilla JS GroupBy

次のスクリプトは、オブジェクトの配列を操作する groupBy 関数を定義します:

var groupBy = function(xs, key) {
  return xs.reduce(function(rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
};

使用例

オブジェクトを「フェーズ」でグループ化するには:

const data = [
  { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" },
  ...
];
const groupedByPhase = groupBy(data, 'Phase');

groupedByPhase は含まれる:

{
  "Phase 1": [
    { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" },
    ...
  ],
  "Phase 2": [
    { Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "25" },
    ...
  ]
}

「ステップ」でさらにグループ化するには:

const groupedByPhaseStep = _(groupedByPhase).values().map(phase => {
  return groupBy(phase, 'Step');
}).value();

groupedByPhaseStep には次のものが含まれます:

[
  {
    "Phase": "Phase 1",
    "Step": "Step 1",
    "Value": 15
  },
  ...
]

以上がバニラのアプローチを使用して JavaScript でオブジェクトの配列を効率的にグループ化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。