ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript でオブジェクトの配列を効率的にグループ化するにはどうすればよいですか?

JavaScript でオブジェクトの配列を効率的にグループ化するにはどうすればよいですか?

Linda Hamilton
リリース: 2024-12-21 14:44:10
オリジナル
153 人が閲覧しました

How Can I Efficiently Group Arrays of Objects in JavaScript?

配列オブジェクトの GroupBy 最適化

オブジェクトの配列を操作する場合、多くの場合、分析のためにそれらを効率的にグループ化する必要があります。これを達成するための最も効果的なアプローチについて説明します。

外部ライブラリの使用:

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート