首頁 >web前端 >js教程 >如何使用普通方法在 JavaScript 中有效地對物件陣列進行分組?

如何使用普通方法在 JavaScript 中有效地對物件陣列進行分組?

Susan Sarandon
Susan Sarandon原創
2024-12-30 12:31:13341瀏覽

How Can I Efficiently Group an Array of Objects in JavaScript Using a Vanilla Approach?

物件陣列的高效 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');

按一下」將物件分組:

{
  "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" },
    ...
  ]
}

groupedByPhase將包含:

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

進一步分組「步驟」:

[
  {
    "Phase": "Phase 1",
    "Step": "Step 1",
    "Value": 15
  },
  ...
]
groupedByPhaseStep 將包含:

以上是如何使用普通方法在 JavaScript 中有效地對物件陣列進行分組?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn