ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript でオブジェクトの配列を効率的にグループ化するにはどうすればよいですか?
オブジェクトの配列を操作する場合、多くの場合、分析のためにそれらを効率的にグループ化する必要があります。これを達成するための最も効果的なアプローチについて説明します。
外部ライブラリの使用:
Underscore.js には、特定のキー値によるグループ化を簡素化する便利な groupBy 関数が用意されています。 。ただし、グループを分割するのではなく結合する必要性に完全には対応していない可能性があります。
カスタム GroupBy 関数の実装:
グループ化と集計を正確に制御するには、カスタム関数の実装を検討してください。これはバニラの JavaScript 実装です:
var groupBy = function(xs, key) { return xs.reduce(function(rv, x) { (rv[x[key]] = rv[x[key]] || []).push(x); return rv; }, {}); };
例:
このカスタムの groupBy 関数を例に適用してみましょうarray:
var data = [ { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" }, { Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" }, { Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "15" }, { Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" }, { Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "25" }, { Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "30" }, { Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "35" }, { Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "40" } ]; var groupedByPhase = groupBy(data, "Phase"); var groupedByPhaseAndStep = groupBy(data, "Phase", "Step"); console.log(groupedByPhase); console.log(groupedByPhaseAndStep);
Output:
{ "Phase 1": [ { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" }, { Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" }, { Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "15" }, { Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" } ], "Phase 2": [ { Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "25" }, { Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "30" }, { Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "35" }, { Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "40" } ] } { "Phase 1": { "Step 1": [ { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" }, { Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" } ], "Step 2": [ { Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "15" }, { Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" } ] }, "Phase 2": { "Step 1": [ { Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "25" }, { Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "30" } ], "Step 2": [ { Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "35" }, { Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "40" } ] } }
ご覧のとおり、結果は予期された形式と一致しており、指定されたキーに基づいてオブジェクトをグループ化しています。
結論として、この groupBy のカスタム実装は、配列に効率的なグループ化機能を提供します。オブジェクトの数を増やし、必要な集約機能を実現します。
以上がJavaScript でオブジェクトの配列を効率的にグループ化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。