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

Hello，大家好，我是 Sunday。

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 之后，一旦遇到分组相关的场景，那就是用它吧~