ES2024新特性：object.groupBy()让分组更简单
2024年初，JavaScript（也称为Ecma Script）推出了一项全新的内置函数——object.groupBy()。这一创新功能将彻底改变我们对数据进行分组和组织的方式！
什么是object.groupBy()？
复杂定义：
object.groupBy()是一个静态方法，允许你基于提供的回调函数对可迭代对象（如数组）中的元素进行分组。最终会生成一个新的对象，该对象的每个属性都是一个组，每个组中包含属于该组的元素数组。
简单定义：
它是一个可以按任何你希望的方式对数组进行分类和排序的函数，就像是你数据的私人整理员，确保一切都被整齐地分类和轻松访问。
值得一提的是，如果你需要使用任意值（不仅仅是字符串）来进行分组，Map.groupBy()函数也能帮你搞定。
语法和参数
在深入了解object.groupBy()之前，让我们先熟悉一下它的语法和参数：
Object.groupBy(items, callbackFn)
- items：一个可迭代对象（如数组），包含你想要分组的元素。
- callbackFn：一个回调函数，对每个元素执行。这个函数应该返回一个可以转换为属性键（字符串或符号）的值，指示当前元素所属的组。
回调函数callbackFn的参数包括：
- element：当前正在处理的元素。
- index：当前正在处理的元素的索引。
返回值
object.groupBy()函数返回一个无原型的对象，该对象的每个属性都是一个组，每个组分配给包含相关组元素的数组。就像一个精心组织的文件柜，为你的数据提供完美的分类和管理。
示例
示例1：按类别分组库存
假设你在经营一家杂货店，需要根据食物类别来组织库存。有了object.groupBy()，这个任务变得轻而易举：
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 }
]
}
*/
在这个示例中，我们定义了一个包含不同食物项目的数组inventory。通过调用Object.groupBy(inventory, ({ type }) => type)，我们根据食物的type属性对元素进行分组，并得到一个按类别（蔬菜、水果、肉类）组织的对象，每个类别都包含一个对应项目的数组。
示例2：基于多个条件分组
如果你需要根据多个条件对数据进行分组，object.groupBy()同样能满足需求：
const students = [
{ name: "Alice", grade: 9, subject: "Math" },
{ name: "Bob", grade: 10, subject: "Science" },
{ name: "Charlie", grade: 9, subject: "English" },
{ name: "David", grade: 10, subject: "Math" },
{ name: "Eve", grade: 9, subject: "Science" },
];
const result = Object.groupBy(students, ({ grade, subject }) => `${grade}-${subject}`);
/* 结果如下：
{
"9-Math": [
{ name: "Alice", grade: 9, subject: "Math" }
],
"10-Science": [
{ name: "Bob", grade: 10, subject: "Science" }
],
"9-English": [
{ name: "Charlie", grade: 9, subject: "English" }
],
"10-Math": [
{ name: "David", grade: 10, subject: "Math" }
],
"9-Science": [
{ name: "Eve", grade: 9, subject: "Science" }
]
}
*/
在这个示例中，我们有一个学生对象数组，每个学生都有姓名、年级和科目。通过使用回调函数({ grade, subject }) => {subject}``，我们根据年级和科目的组合对学生进行分组，结果是一个表示每个唯一组合的对象，每个组合包含相应学生的数组。
示例3：基于自定义条件分组
object.groupBy()的真正威力在于它能够基于自定义条件对数据进行分组。假设你经营一个电商网站，想根据产品的可用性来分组：
const products = [
{ name: "Product A", price: 10, inStock: true },
{ name: "Product B", price: 20, inStock: false },
{ name: "Product C", price: 15, inStock: true },
{ name: "Product D", price: 25, inStock: false },
{ name: "Product E", price: 18, inStock: true },
];
function myCallback({ inStock }) {
return inStock ? "available" : "outOfStock";
}
const result = Object.groupBy(products, myCallback);
/* 结果如下：
{
available: [
{ name: "Product A", price: 10, inStock: true },
{ name: "Product C", price: 15, inStock: true },
{ name: "Product E", price: 18, inStock: true }
],
outOfStock: [
{ name: "Product B", price: 20, inStock: false },
{ name: "Product D", price: 25, inStock: false }
]
}
*/
在这个示例中，我们定义了一个包含产品对象的数组，每个产品都有名称、价格和库存状态。然后，我们创建了一个自定义回调函数myCallback，根据inStock属性返回“available”或“outOfStock”。通过传递这个回调函数给Object.groupBy(products, myCallback)，我们将产品分为两个类别：“available”和“outOfStock”，结果是一个包含两个属性的对象，每个属性包含相应产品的数组。
结束
如你所见，object.groupBy()函数非常强大！无论你是在处理简单还是复杂的数据结构，这个函数都可以根据你能想到的几乎任何条件对数据进行分组。
这些例子仅仅是冰山一角。通过一些创造力和巧妙的回调函数，你可以实现更多功能。想象一下，基于复杂计算、正则表达式甚至外部数据源对数据进行分组——可能性是无穷无尽的！
腾讯云开发者
