如何在 JavaScript 中有效地对对象数组进行分组？-js教程-PHP中文网

如何在 JavaScript 中有效地对对象数组进行分组？

Linda Hamilton

发布： 2024-12-21 14:44:10

原创

155 人浏览过

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中文网其他相关文章！