Lodash 的又一方法被替代了，探索 JS 新特性 Object.groupBy

点击上方 前端Q，关注公众号

回复加群，加入前端Q技术交流群

ES 2024增加了很多 JS 的新特性

其中 Object.groupBy 是最受大家关注的新方法之一：

Object.groupBy() 静态方法根据提供的回调函数返回的字符串值对给定可迭代对象中的元素进行分组。返回的对象具有每个组的单独属性，其中包含组中的元素的数组。

它的具体语法如下所示：

Object.groupBy(items, callbackFn)
// array：需要分组的数组。
// callback：对数组中的每个元素执行的回调函数。回调函数返回一个值，用作分组的键。

而这样方法在 Lodash 中也有过类似的实现，作用也与 Object.groupBy 类似（如果我们关注最近几年的 ES 新增特性，会发现很多的新增特性都在社区库中提前进行过实现）：

那么接下来就让我们通过 5 个场景，深入看一下 Object.groupBy 这个方法，对我们以后的开发会有什么帮助！

01：按单一条件分组

按照年龄为数据进行分组

const users = [
  { name: '张三', age: 21 },
  { name: '李四', age: 25 },
  { name: '王五', age: 21 },
  { name: '赵六', age: 28 }
 ]

 const groupedByAge = Object.groupBy(users, (user) => user.age)
 console.log(groupedByAge)
 /*
  {
    "21": [
        {
            "name": "张三", 
            "age": 21
        }, 
        {
            "name": "王五", 
            "age": 21
        }
    ], 
    "25": [
        {
            "name": "李四", 
            "age": 25
        }
    ], 
    "28": [
        {
            "name": "赵六", 
            "age": 28
        }
    ]
}
  */

02：按多个条件分组

const users = [
  { name: '张三', age: 21, gender: '男' },
  { name: '李四', age: 25, gender: '女' },
  { name: '王五', age: 21, gender: '女' },
  { name: '赵六', age: 25, gender: '女' },
  { name: '孙七', age: 30, gender: '女' },
  { name: '周八', age: 21, gender: '男' }
]

const groupedByAgeAndGender = Object.groupBy(users, (user) => {
  const ageGroup = user.age < 25 ? '25岁以下' : '25岁以上'
  return `${ageGroup}-${user.gender}`
})
console.log(groupedByAgeAndGender)
/*
{
"25岁以下-男": [
  {
    "name": "张三",
    "age": 21,
    "gender": "男"
  },
  {
    "name": "周八",
    "age": 21,
    "gender": "男"
  }
],
"25岁以上-女": [
  {
    "name": "李四",
    "age": 25,
    "gender": "女"
  },
  {
    "name": "赵六",
    "age": 25,
    "gender": "女"
  },
  {
    "name": "孙七",
    "age": 30,
    "gender": "女"
  }
],
"25岁以下-女": [
  {
    "name": "王五",
    "age": 21,
    "gender": "女"
  }
]
}
  */

03：按复杂计算分组

根据指定的结果对数据进行分组处理

const students = [
  { name: '张三', score: 85 },
  { name: '李四', score: 92 },
  { name: '王五', score: 70 },
  { name: '赵六', score: 78 },
  { name: '孙七', score: 88 }
]

const groupedByGrade = Object.groupBy(students, (student) => {
  if (student.score >= 90) return 'A'
  if (student.score >= 80) return 'B'
  if (student.score >= 70) return 'C'
  return 'D'
})
console.log(groupedByGrade)
/*
{
"B": [
  {
    "name": "张三",
    "score": 85
  },
  {
    "name": "孙七",
    "score": 88
  }
],
"A": [
  {
    "name": "李四",
    "score": 92
  }
],
"C": [
  {
    "name": "王五",
    "score": 70
  },
  {
    "name": "赵六",
    "score": 78
  }
]
}
  */

04：依赖另外的数据进行分组

假设我们有一个用户数据数组，并且想要按用户居住的城市对其进行分组，其中城市数据是从外部 API 获取的。

const users = [
  { name: '张三', cityId: 1 },
  { name: '李四', cityId: 2 },
  { name: '王五', cityId: 1 },
  { name: '赵六', cityId: 3 },
  { name: '孙七', cityId: 2 }
]

// Simulate fetching city data from an external API
const cityData = {
  1: '北京',
  2: '上海',
  3: '深圳'
}
const groupedByCity = Object.groupBy(users, (user) => cityData[user.cityId])
console.log(groupedByCity)
/*
{
"北京": [
  {
    "name": "张三",
    "cityId": 1
  },
  {
    "name": "王五",
    "cityId": 1
  }
],
"上海": [
  {
    "name": "李四",
    "cityId": 2
  },
  {
    "name": "孙七",
    "cityId": 2
  }
],
"深圳": [
  {
    "name": "赵六",
    "cityId": 3
  }
]
}
*/

05：按日期分组

根据日期进行数据划分

const logs = [
  { message: '时间1', date: '2024-01-01T10:00:00Z' },
  { message: '时间2', date: '2024-01-01T12:00:00Z' },
  { message: '时间3', date: '2024-01-02T10:00:00Z' },
  { message: '时间4', date: '2024-01-02T14:00:00Z' },
  { message: '时间5', date: '2024-01-03T10:00:00Z' }
]

const groupedByDate = Object.groupBy(
  logs,
  (log) => new Date(log.date).toISOString().split('T')[0]
)
console.log(groupedByDate)
/*
{
"2024-01-01": [
  {
    "message": "时间1",
    "date": "2024-01-01T10:00:00Z"
  },
  {
    "message": "时间2",
    "date": "2024-01-01T12:00:00Z"
  }
],
"2024-01-02": [
  {
    "message": "时间3",
    "date": "2024-01-02T10:00:00Z"
  },
  {
    "message": "时间4",
    "date": "2024-01-02T14:00:00Z"
  }
],
"2024-01-03": [
  {
    "message": "时间5",
    "date": "2024-01-03T10:00:00Z"
  }
]
}
*/

总结

结合以上的 5 个场景，我们可以看出 Object.groupBy 主要用来处理 分组 相关的操作。预期对应的还有 Map.groupBy() 这个方法，他们的使用场景相差不大，这里就不去细说了。

所以，有了 Object.groupBy 之后，一旦遇到 分组 相关的场景，那就是用它吧~

往期推荐

什么？原来前端错误上报这么简单！！

7种JavaScript 中位运算符的神奇用法

threejs做特效：实现物体的发光效果-EffectComposer详解！

最后

• 欢迎加我微信，拉你进技术群，长期交流学习...
  

• 欢迎关注「前端Q」,认真学前端，做个专业的技术人...

点个在看支持我吧