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()函数非常强大！无论你是在处理简单还是复杂的数据结构，这个函数都可以根据你能想到的几乎任何条件对数据进行分组。

这些例子仅仅是冰山一角。通过一些创造力和巧妙的回调函数，你可以实现更多功能。想象一下，基于复杂计算、正则表达式甚至外部数据源对数据进行分组——可能性是无穷无尽的！