如何在 JavaScript 中有效地將物件數組分組？-js教程-PHP中文網

如何在 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);

登入後複製

輸出:

{
  "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中文網其他相關文章！