HOWTO · JavaScript

在 JavaScript 中對一組物件進行分組

本文介紹了在 JavaScript 中對物件陣列進行分組的最有效方法。

作者 Shiv Kumar Yadav發佈於 2022-05-10更新於 2023-10-12
本頁內容

本文將演示在 JavaScript 中對物件陣列進行分組的最有效方法。

在 JavaScript 中使用 reduce() 對物件陣列進行分組

在 JavaScript 中對物件陣列進行分組的最有效方法是使用 reduce() 函式。此方法執行每個陣列元素的（指定）reducer 函式並生成單個輸出值。

例子：

我們有一個包含名稱和類別這兩個屬性的產品列表。

const products = [
  {name: 'Mathematics', category: 'Subject'},
  {name: 'Cow', category: 'Animal'},
  {name: 'Science', category: 'Subject'},
];

在上面的示例中，products 是一個物件陣列。

接下來，我們需要執行一個簡單的操作。使用產品列表，我們將按類別對產品進行分組。

const groupByCategory = {
  Subjects: [
    {name: 'Mathematics', category: 'Subjects'},
    {name: 'Science', category: 'Subjects'},
  ],
  Animals: [{name: 'Cow', category: 'Animals'}],
};

從產品陣列中獲取類似陣列的 groupByCategory 的常用方法是使用適當的回撥函式呼叫 array.reduce() 方法。

const groupByCategory = products.reduce((group, product) => {
  const {category} = product;
  group[category] = group[category] ?? [];
  group[category].push(product);
  return group;
}, {});

輸出：

"{
    'Subject': [
        {
            'name': 'Mathematics',
            'category': 'Subject'
        },
        {
            'name': 'Science',
            'category': 'Subject'
        }
    ],
    'Animal': [
        {
            'name': 'Cow',
            'category': 'Animal'
        }
    ]
}"

見演示

products.reduce() 函式將陣列縮減為按類別分組的產品物件。

array.groupBy（回撥）接受使用三個引數呼叫的回撥函式：當前陣列元素、索引和陣列本身。回撥必須返回一個字串（你要向其新增功能的組名）。

const groupedObject = array.groupBy((item, index, array) => {
  ...return groupNameAsString;
});

關於作者

Shiv Yadav

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

查看作者個人檔案
LinkedIn