发现一个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', },
]
}
*/
原文地址:https://blog.csdn.net/qq_45569925/article/details/140668311
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!