使用 Object.groupBy() 来对数据进行分组,而不用任何循环
在 JavaScript 中分组数据曾经是个痛苦的过程,我们不得不遍历对象并将它们放入单独的数组中,但现在,多亏了新的 Object.groupBy() 方法,分组数据变得轻而易举。
Object.groupBy() 是一种静态方法,按属性对数组数据进行分组。只需传入两个参数:数组和回调函数。对数组中的每个元素执行回调函数以确定其所属的组。
假设下面的数组是我们的数据
const studentsArray = [
{
name: "John Doe",
age: 18,
grade: 12,
major: "Computer Science",
gpa: 3.8,
},
{
name: "Jane Doe",
age: 17,
grade: 11,
major: "English",
gpa: 3.6,
},
{
name: "Michael Smith",
age: 16,
grade: 10,
major: "Mathematics",
gpa: 4.0,
},
{
name: "Susan Jones",
age: 15,
grade: 9,
major: "History",
gpa: 3.2,
},
{
name: "David Williams",
age: 14,
grade: 8,
major: "Computer Science",
gpa: 3.4,
},
{
name: "Mary Brown",
age: 13,
grade: 7,
major: "Mathematics",
gpa: 3.1,
},
{
name: "Charles Miller",
age: 12,
grade: 6,
major: "History",
gpa: 3.0,
},
{
name: "Patricia Davis",
age: 11,
grade: 5,
major: "Physical Education",
gpa: 3.5,
},
{
name: "James Garcia",
age: 10,
grade: 4,
major: "Foreign Language",
gpa: 3.3,
},
{
name: "Jennifer Johnson",
age: 9,
grade: 3,
major: "Physical Education",
gpa: 3.7,
},
];
如果我们想根据它们的 major 分组,那么我们会使用如下方法
Object.groupBy(studentsArray, ({ major }) => major);
这将给我们以下输出
图片
现在假设我们想根据年龄大于 10 来分组
Object.groupBy(studentsArray, ({ age }) => age > 10);
图片
那么小于 10 的元素将是 false ,大于 10 的元素将是 true 。我们可以用更多的方式来完成我们的工作。
图片