小技巧 | 使用 Object.groupBy() 轻松分组JavaScript数组

2023年 11月 23日 51.3k 0

使用 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 。我们可以用更多的方式来完成我们的工作。

图片图片

相关文章

JavaScript2024新功能:Object.groupBy、正则表达式v标志
PHP trim 函数对多字节字符的使用和限制
新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
为React 19做准备:WordPress 6.6用户指南
如何删除WordPress中的所有评论

发布评论