迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

在 JavaScript 中对一组对象进行分组

作者:迹忆客 最近更新:2024/03/16 浏览次数:

本文将演示在 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;
});

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

Do you understand JavaScript closures?

发布时间:2025/02/21 浏览次数:108 分类:JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.

Do you know about the hidden traps in variables in JavaScript?

发布时间:2025/02/21 浏览次数:178 分类:JavaScript

Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av

How much do you know about the Prototype Chain?

发布时间:2025/02/21 浏览次数:150 分类:JavaScript

The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start

用 jQuery 检查复选框是否被选中

发布时间:2024/03/24 浏览次数:102 分类:JavaScript

在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便