• JavaScript全新内置函数object.groupBy()的用法
  • 发布于 1周前
  • 33 热度
    0 评论
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()函数非常强大!无论你是在处理简单还是复杂的数据结构,这个函数都可以根据你能想到的几乎任何条件对数据进行分组。这些例子仅仅是冰山一角。通过一些创造力和巧妙的回调函数,你可以实现更多功能。想象一下,基于复杂计算、正则表达式甚至外部数据源对数据进行分组——可能性是无穷无尽的!
用户评论