让数组元素自动分类？分享 1 段优质 JS 代码片段！

本内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！

大家好，我是大澈！

本文约 900+  字，整篇阅读约需 1 分钟。

今天分享一段优质 JS 代码片段，可以轻松地按指定属性对数组对象进行分组。

老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！

const inventory = [
 { name: "asparagus", type: "vegetables", quantity: 5 },
 { name: "bananas", type: "fruit", quantity: 0 },
 { name: "goat", type: "meat", quantity: 23 },
 { name: "cherries", type: "fruit", quantity: 5 },
 { name: "fish", type: "meat", quantity: 22 },
];

const result = Object.groupBy(inventory, ({ type }) => type);

/* 结果如下：
{
 vegetables: [
 { name: "asparagus", type: "vegetables", quantity: 5 },
 ],
 fruit: [
 { name: "bananas", type: "fruit", quantity: 0 },
 { name: "cherries", type: "fruit", quantity: 5 }
 ],
 meat: [
 { name: "goat", type: "meat", quantity: 23 },
 { name: "fish", type: "meat", quantity: 22 }
 ]
}
*/

分享原因

这段代码展示了如何使用 Object.groupBy 方法对数组中的对象按特定属性进行分组。

它是一种简洁、高效的分组方式，特别适用于需要根据对象的某个属性来对数据进行分类的场景。

此方法增强了代码的可读性和可维护性，简化了数据处理过程，这在项目中是很有必要的。

代码解析

1. 定义 inventory 数组

inventory 是一个包含多个对象的数组。

每个对象表示一种商品，包括商品的名称 (name)、类型 (type) 和数量 (quantity)。

现在这个数组的数据很乱，我们要根据商品类型对数据进行有序处理一下。

2. Object.groupBy(inventory, ({ type }) => type);

Object.groupBy 方法对 inventory 数组进行分组。

分组的依据是对象的 type 属性，通过回调函数 ({ type }) => type 提取每个对象的 type 属性作为分组键。

结果将是一个对象，其中键是各个 type 值，值是相应类型的对象数组。

3. Object.groupBy 详解

设置object.groupBy()是一个静态方法，可以轻松地按指定属性对可迭代对象（如数组）中的元素进行分组，最终返回一个新的对象。

groupBy(items, callbackFn) 有两个参数：

items：一个可迭代对象（如数组），包含你想要分组的元素。

callbackFn：一个回调函数，对每个元素执行。这个函数应该返回一个可以转换为属性键（字符串或符号）的值，指示当前元素所属的组。

回调函数callbackFn的参数又包括：

element：当前正在处理的元素。

index：当前正在处理的元素的索引。