在 JavaScript 中对一组对象进行分组
本文将演示在 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;
});
相关文章
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 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间:2024/03/24 浏览次数:180 分类:JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。