发现一个ES新特性Object.groupBy() ，对数组对象进行分组

Object.groupBy() 介绍

Object.groupBy()是一个JavaScript方法，用于将数组中的对象按照指定的属性进行分组。这个方法提供了一个直观的数组分组手段，不仅简化了开发者编写代码的过程，而且使代码具有更好的可读性。使用Object.groupBy()，你可以非常方便地按照指定的属性对数组中的对象进行分组。

值得注意的是，使用Object.groupBy()方法返回的对象是一个“纯净”的对象——即没有继承任何原型链上的属性或方法。这一点非常关键因为它意味着常见的Object.prototype方法，如hasOwnProperty或toString，不会在这个对象上直接可用。

语法

// array: 需要分组的数组
// callback: 对数组中的每个元素执行的回调函数，回调函数返回一个值，用作分组的键【属性名】
Object.group(array, callback)

使用场景

1、按照单一条件分组

const animals = [
  { name: '柯基', species: "dog" },
  { name: '英短', species: "cat" },
  { name: '泰迪', species: "dog" },
  { name: '长毛兔', species: "rabbit" }
 ]
// 按照物种进行分类
 const groupedBySpecies = Object.groupBy(animals, (animal) => animal.species)
 console.log(groupedBySpecies)
 /* 
  "cat":[
    {name:"英短",species:"cat"}
  ]
  "dog":[
    {name:"柯基",species:"dog"},
    {name:"泰迪",species:"dog"}
  ]
  "rabbit":[
    {name:"长毛兔",species:"rabbit"}
  ]
  */

2、按照多个条件分组

const users = [
  { name: '小朱', age: 18, gender: '男' },
  { name: '小红', age: 16, gender: '女' },
  { name: '小花', age: 21, gender: '女' },
  { name: '小明', age: 14, gender: '女' },
  { name: '李华', age: 30, gender: '女' },
  { name: '小亮', age: 21, gender: '男' }
]

// 按照年龄和性别进行分组
const groupedByAgeAndGender = Object.groupBy(users, (user) => {
  const ageGroup = user.age < 18 ? '18岁以下' : '18岁及以上'
  return `${ageGroup}-${user.gender}`
})
console.log(groupedByAgeAndGender);

/* 
  {
    '18岁以下-女': [
      { name: '小红', age: 16, gender: '女' },
      { name: '小明', age: 14, gender: '女' }
    ],
    '18岁及以上-女': [
      { name: '小花', age: 21, gender: '女' },
      { name: '李华', age: 30, gender: '女' },
    ],
    '18岁及以上-男': [
      { name: '小朱', age: 18, gender: '男' },
      { name: '小亮', age: 21, gender: '男' },
    ],
  }
*/

3、按照复杂计算分组

const students = [
  { name: '小朱', score: 85, },
  { name: '小红', score: 90, },
  { name: '小花', score: 99, },
  { name: '小明', score: 77, },
  { name: '李华', score: 88, },
  { name: '小亮', score: 21, }
]

// 按照分数进行等级分组
const groupedByScore = 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(groupedByScore);

/* 
  {
    A:[
      { name: '小红', score: 90},
      { name: '小花', score: 99},
    ],
    B:[
      { name: '小朱', score: 85},
      { name: '李华', score: 88},
    ],
    C:[
      { name: '小明', score: 77},
    ],
    D:[
      { name: '小亮', score: 21},    
    ]
  }
*/

4、依赖另外的数据进行分组

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

const users = [
  { name: '小朱', cId: 1, },
  { name: '小红', cId: 2, },
  { name: '小花', cId: 3, },
  { name: '小明', cId: 1, },
  { name: '小吴', cId: 2, },
  { name: '小亮', cId: 4, }
]
const city = { 1: "济南", 2: "青岛", 3: '聊城', 4: "菏泽" }
// 按照城市进行分组
const groupedByCity = Object.groupBy(users, (user) => city[user.cId])
console.log(groupedByCity);

/* 
  {
    "济南":[
      { name: '小朱', cId: 1},
      { name: '小明', cId: 1},
    ],
    "聊城":[
      { name: '小花', cId: 3},
    ],
    "菏泽":[
      { name: '小亮', cId: 4},
    ],
    "青岛":[
      { name: '小红', cId: 2},    
      { name: '小吴', cId: 2},    
    ]
  }
*/

5、按照时间日期进行分组

const messages = [
  { msgText: '这是第1条消息', createTime: '2024-07-25T10:00:00Z', },
  { msgText: '这是第2条消息', createTime: '2024-07-24T12:00:00Z', },
  { msgText: '这是第3条消息', createTime: '2024-07-25T10:00:00Z', },
  { msgText: '这是第4条消息', createTime: '2024-06-02T14:00:00Z', },
  { msgText: '这是第5条消息', createTime: '2024-05-03T10:00:00Z', },
  { msgText: '这是第6条消息', createTime: '2024-05-03T10:00:00Z', }
]
// 按照城市进行分组
const groupedByTime = Object.groupBy(messages, (message) => new Date(message.createTime).toISOString().split('T')[0])
console.log(groupedByTime);

/* 
  {
    "2024-05-03":[
      { msgText: '这是第5条消息', createTime: '2024-05-03T10:00:00Z',},
      { msgText: '这是第6条消息', createTime: '2024-05-03T10:00:00Z'},
    ],
    "2024-06-02":[
      {  msgText: '这是第4条消息', createTime: '2024-06-02T14:00:00Z',},
    ],
    "2024-07-24":[
      { msgText: '这是第2条消息', createTime: '2024-07-24T12:00:00Z',},
    ],
    "2024-07-25":[
      { msgText: '这是第1条消息', createTime: '2024-07-25T10:00:00Z',},    
      { msgText: '这是第3条消息', createTime: '2024-07-25T10:00:00Z', },    
    ]
  }
*/