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

Hello，大家好，我是 Sunday。2DA28资讯网——每日最新资讯28at.com

ES 2024增加了很多 JS 的新特性， 在这篇文章中 我们也提到过几个可能会大火的新方法。2DA28资讯网——每日最新资讯28at.com

其中 Object.groupBy 是最受大家关注的新方法之一：2DA28资讯网——每日最新资讯28at.com

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

它的具体语法如下所示：2DA28资讯网——每日最新资讯28at.com

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

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

图片2DA28资讯网——每日最新资讯28at.com

那么接下来就让我们通过 5 个场景，深入看一下 Object.groupBy 这个方法，对我们以后的开发会有什么帮助！2DA28资讯网——每日最新资讯28at.com

01：按单一条件分组

按照年龄为数据进行分组。2DA28资讯网——每日最新资讯28at.com

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：按复杂计算分组

根据指定的结果对数据进行分组处理。2DA28资讯网——每日最新资讯28at.com

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 获取的。2DA28资讯网——每日最新资讯28at.com

const users = [  { name: '张三', cityId: 1 },  { name: '李四', cityId: 2 },  { name: '王五', cityId: 1 },  { name: '赵六', cityId: 3 },  { name: '孙七', cityId: 2 }]// Simulate fetching city data from an external APIconst 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：按日期分组

根据日期进行数据划分。2DA28资讯网——每日最新资讯28at.com

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() 这个方法，他们的使用场景相差不大，这里就不去细说了。2DA28资讯网——每日最新资讯28at.com

所以，有了 Object.groupBy 之后，一旦遇到 分组 相关的场景，那就是用它吧~2DA28资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-103164-0.htmlLodash 的又一方法被替代了，探索 JS 新特性 Object.groupBy

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： 面试官：网页太慢了怎么排查？

下一篇： 聊一聊 CSS 的十个技巧和窍门