javascript数组按属性分组实现方法
2023-08-30 本文已影响0人
扶得一人醉如苏沐晨
背景
在开发过程中,前端有时需要对后端返回的数据进行一些处理,当后端返回给我们json对象数组时,我们可能会需要按照对象中的某一个属性来进行分组
一、forEach实现
let arr = [
{name: '张三', age: 18},
{name: '李四', age: 20},
{name: '王五', age: 18},
{name: '赵六', age: 20},
{name: '孙七', age: 21},
];
let obj = {};
arr.forEach(item => {
if (!obj[item.age]) {
obj[item.age] = [];
}
obj[item.age].push(item);
});
console.log(obj);
// {
// 18: [{name: '张三', age: 18}, {name: '王五', age: 18}],
// 20: [{name: '李四', age: 20}, {name: '赵六', age: 20}],
// 21: [{name: '孙七', age: 21}],
// }
二、reduce实现
const people = [
{ name: 'Alice', gender: 'female' },
{ name: 'Bob', gender: 'male' },
{ name: 'Charlie', gender: 'male' },
{ name: 'Diana', gender: 'female' },
];
const groups = people.reduce((groups, person) => {
const key = person.gender;
if (!groups[key]) {
groups[key] = [];
}
groups[key].push(person);
return groups;
}, {});
console.log(groups);
// Output:
// {
// female: [
// { name: 'Alice', gender: 'female' },
// { name: 'Diana', gender: 'female' },
// ],
// male: [
// { name: 'Bob', gender: 'male' },
// { name: 'Charlie', gender: 'male' },
// ],
// }
三、对没有属性名的数组进行分组