在JavaScript中,有多种方法可以对数组按属性进行分组。以下是至少6种常见的方法:
6种方法的使用场景和优缺点的简要描述:
-
使用reduce()方法:
- 使用场景:适用于需要对数组进行聚合操作的情况,可以自定义聚合逻辑。
- 优点:灵活性高,可以自定义聚合逻辑;可以同时对多个属性进行分组。
- 缺点:代码相对复杂,需要熟悉reduce()方法的使用。
-
使用forEach()方法:
- 使用场景:适用于简单的分组需求,不需要自定义聚合逻辑。
- 优点:简单易懂,代码量较少。
- 缺点:无法同时对多个属性进行分组;不支持链式操作。
-
使用map()方法和Object.create(null):
- 使用场景:适用于需要创建一个纯净的空对象作为分组结果的情况。
- 优点:可以创建一个没有原型链的空对象,避免可能的属性冲突。
- 缺点:相对于使用普通对象,性能稍差。
-
使用Map对象:
- 使用场景:适用于需要对分组结果进行进一步操作的情况,如遍历、删除、更新等。
- 优点:支持对分组结果进行灵活的操作;可以同时对多个属性进行分组。
- 缺点:相对于普通对象,Map对象的性能稍差。
-
使用lodash库的groupBy()方法:
- 使用场景:适用于使用lodash库的项目,或者需要使用其他lodash库的功能。
- 优点:简单易用,代码量少;lodash库提供了丰富的其他功能。
- 缺点:引入了额外的库,增加了项目的依赖。
-
使用ES6的Map和箭头函数:
- 使用场景:适用于需要使用ES6的特性,或者需要对分组结果进行进一步操作的情况。
- 优点:支持对分组结果进行灵活的操作;可以同时对多个属性进行分组;使用了ES6的特性。
- 缺点:相对于普通对象,Map对象的性能稍差。
根据具体的需求和项目环境,选择适合的方法可以提高代码的可读性和性能。对于简单的分组需求,可以选择forEach()方法或lodash库的groupBy()方法;对于复杂的分组需求,可以选择reduce()方法、Map对象或ES6的Map和箭头函数。
- 使用reduce()方法封装的方法:
这种方法使用reduce()方法来对数组进行迭代,并根据指定的属性值将元素分组。它使用一个空对象作为初始值,然后在迭代过程中,根据属性值将元素添加到相应的分组中。
首先创建一个空对象,用于存储分组结果。
使用for循环遍历数组中的每个元素。
在每次迭代中,使用if语句检查当前元素的属性值是否已经存在于分组对象中。
如果属性值不存在,就创建一个新的属性,并将当前元素添加到该属性对应的数组中。
如果属性值已经存在,就将当前元素添加到该属性对应的数组中。
最后返回分组对象。
使用示例:
const arr = [
{ name: 'Alice', age: 20, gender: 'female' },
{ name: 'Bob', age: 25, gender: 'male' },
{ name: 'Charlie', age: 20, gender: 'male' },
{ name: 'David', age: 30, gender: 'male' },
{ name: 'Eve', age: 25, gender: 'female' }
];
const result = groupByReduce(arr, 'age');
console.log(result);
输出结果:
{
'20': [
{ name: 'Alice', age: 20, gender: 'female' },
{ name: 'Charlie', age: 20, gender: 'male' }
],
'25': [
{ name: 'Bob', age: 25, gender: 'male' },
{ name: 'Eve', age: 25, gender: 'female' }
],
'30': [
{ name: 'David', age: 30, gender: 'male' }
]
}
- 使用forEach()方法封装的方法:
这种方法使用forEach()方法对数组进行迭代,并根据指定的属性值将元素分组。它使用一个空对象作为初始值,然后在迭代过程中,根据属性值将元素添加到相应的分组中。
使用reduce方法对数组进行迭代,并传入一个初始值为空对象。
在每次迭代中,使用初始值作为累加器,并根据当前元素的属性值,将元素添加到相应的属性数组中。
最后返回累加器,即分组结果。
使用示例:
const arr = [
{ name: 'Alice', age: 20, gender: 'female' },
{ name: 'Bob', age: 25, gender: 'male' },
{ name: 'Charlie', age: 20, gender: 'male' },
{ name: 'David', age: 30, gender: 'male' },
{ name: 'Eve', age: 25, gender: 'female' }
];
const result = groupByForEach(arr, 'gender');
console.log(result);
输出结果:
{
female: [
{ name: 'Alice', age: 20, gender: 'female' },
{ name: 'Eve', age: 25, gender: 'female' }
],
male: [
{ name: 'Bob', age: 25, gender: 'male' },
{ name: 'Charlie', age: 20, gender: 'male' },
{ name: 'David', age: 30, gender: 'male' }
]
}
- 使用map()方法和Object.create(null)封装的方法:
这种方法使用map()方法对数组进行迭代,并根据指定的属性值将元素分组。它使用Object.create(null)创建一个没有原型的空对象作为初始值,然后在迭代过程中,根据属性值将元素添加到相应的分组中。
创建一个空的Map对象,用于存储分组结果。
使用forEach方法对数组进行迭代。
在每次迭代中,根据当前元素的属性值,使用Map对象的get方法获取对应的属性数组。
如果属性数组不存在,就创建一个新的属性数组,并将当前元素添加到该数组中。
如果属性数组已经存在,就将当前元素添加到该数组中。
最后将分组结果转换为普通对象,并返回。
使用示例:
const arr = [
{ name: 'Alice', age: 20, gender: 'female' },
{ name: 'Bob', age: 25, gender: 'male' },
{ name: 'Charlie', age: 20, gender: 'male' },
{ name: 'David', age: 30, gender: 'male' },
{ name: 'Eve', age: 25, gender: 'female' }
];
const result = groupByMap(arr, 'age');
console.log(result);
输出结果:
{
'20': [
{ name: 'Alice', age: 20, gender: 'female' },
{ name: 'Charlie', age: 20, gender: 'male' }
],
'25': [
{ name: 'Bob', age: 25, gender: 'male' },
{ name: 'Eve', age: 25, gender: 'female' }
],
'30': [
{ name: 'David', age: 30, gender: 'male' }
]
}
- 使用Map对象封装的方法:
这种方法使用Map对象来存储分组结果。它使用forEach()方法对数组进行迭代,并根据指定的属性值将元素分组。在迭代过程中,根据属性值将元素添加到相应的分组中,并使用Map对象的set()方法来保存分组结果。
创建一个空的Map对象,用于存储分组结果。
使用forEach方法对数组进行迭代。
在每次迭代中,使用箭头函数来根据当前元素的属性值,将元素添加到相应的属性数组中。
最后将分组结果转换为普通对象,并返回。
使用示例:
const arr = [
{ name: 'Alice', age: 20, gender: 'female' },
{ name: 'Bob', age: 25, gender: 'male' },
{ name: 'Charlie', age: 20, gender: 'male' },
{ name: 'David', age: 30, gender: 'male' },
{ name: 'Eve', age: 25, gender: 'female' }
];
const result = groupByMapObj(arr, 'gender');
console.log(result);
输出结果:
{
female: [
{ name: 'Alice', age: 20, gender: 'female' },
{ name: 'Eve', age: 25, gender: 'female' }
],
male: [
{ name: 'Bob', age: 25, gender: 'male' },
{ name: 'Charlie', age: 20, gender: 'male' },
{ name: 'David', age: 30, gender: 'male' }
]
}
- 使用lodash库的groupBy()方法封装的方法:
这种方法使用lodash库的groupBy()方法来实现分组。它接受一个数组和一个属性名作为参数,并返回一个对象,其中键是属性值,值是具有相同属性值的元素数组。
使用lodash库的groupBy方法,传入数组和属性名作为参数。
groupBy方法会根据属性值将数组元素分组,并返回一个对象,其中键是属性值,值是具有相同属性值的元素数组。
返回分组结果
使用示例:
const arr = [
{ name: 'Alice', age: 20, gender: 'female' },
{ name: 'Bob', age: 25, gender: 'male' },
{ name: 'Charlie', age: 20, gender: 'male' },
{ name: 'David', age: 30, gender: 'male' },
{ name: 'Eve', age: 25, gender: 'female' }
];
const result = groupByLodash(arr, 'age');
console.log(result);
输出结果:
{
'20': [
{ name: 'Alice', age: 20, gender: 'female' },
{ name: 'Charlie', age: 20, gender: 'male' }
],
'25': [
{ name: 'Bob', age: 25, gender: 'male' },
{ name: 'Eve', age: 25, gender: 'female' }
],
'30': [
{ name: 'David', age: 30, gender: 'male' }
]
}
- 使用ES6的Map和箭头函数封装的方法:
这种方法使用ES6的Map对象来存储分组结果。它使用forEach()方法对数组进行迭代,并根据指定的属性值将元素分组。在迭代过程中,根据属性值将元素添加到相应的分组中,并使用Map对象的set()方法来保存分组结果。
创建一个空的Map对象,用于存储分组结果。
使用forEach方法对数组进行迭代。
在每次迭代中,使用箭头函数来根据当前元素的属性值,将元素添加到相应的属性数组中。
最后将分组结果转换为普通对象,并返回。
使用示例:
const arr = [
{ name: 'Alice', age: 20, gender: 'female' },
{ name: 'Bob', age: 25, gender: 'male' },
{ name: 'Charlie', age: 20, gender: 'male' },
{ name: 'David', age: 30, gender: 'male' },
{ name: 'Eve', age: 25, gender: 'female' }
];
const result = groupByMapArrow(arr, 'gender');
console.log(result);
输出结果:
{
female: [
{ name: 'Alice', age: 20, gender: 'female' },
{ name: 'Eve', age: 25, gender: 'female' }
],
male: [
{ name: 'Bob', age: 25, gender: 'male' },
{ name: 'Charlie', age: 20, gender: 'male' },
{ name: 'David', age: 30, gender: 'male' }
]
}
以上是六种不同的方法的详细说明和使用示例。根据需求和个人喜好,可以选择适合的方法来进行分组操作。
试着封装起来
以下是将这6种方法封装
function groupBy(arr, prop, method) {
switch (method) {
case 'reduce':
return arr.reduce((result, item) => {
const key = item[prop];
if (!result[key]) {
result[key] = [];
}
result[key].push(item);
return result;
}, {});
case 'forEach':
const grouped = {};
arr.forEach(item => {
const key = item[prop];
if (!grouped[key]) {
grouped[key] = [];
}
grouped[key].push(item);
});
return grouped;
case 'map':
const grouped = Object.create(null);
arr.map(item => {
const key = item[prop];
if (!grouped[key]) {
grouped[key] = [];
}
grouped[key].push(item);
});
return grouped;
case 'mapObj':
const grouped = new Map();
arr.forEach(item => {
const key = item[prop];
const group = grouped.get(key) || [];
group.push(item);
grouped.set(key, group);
});
return Object.fromEntries(grouped);
case 'lodash':
const _ = require('lodash');
return _.groupBy(arr, prop);
case 'mapArrow':
const grouped = new Map();
arr.forEach(item => {
const key = item[prop];
const group = grouped.get(key) || [];
group.push(item);
grouped.set(key, group);
});
return Object.fromEntries(grouped);
default:
return {};
}
}
使用示例:
const arr = [
{ name: 'Alice', age: 20, gender: 'female' },
{ name: 'Bob', age: 25, gender: 'male' },
{ name: 'Charlie', age: 20, gender: 'male' },
{ name: 'David', age: 30, gender: 'male' },
{ name: 'Eve', age: 25, gender: 'female' }
];
console.log(groupBy(arr, 'age', 'reduce'));
console.log(groupBy(arr, 'gender', 'forEach'));
console.log(groupBy(arr, 'age', 'map'));
console.log(groupBy(arr, 'gender', 'mapObj'));
console.log(groupBy(arr, 'age', 'lodash'));
console.log(groupBy(arr, 'gender', 'mapArrow'));
封装后,可以根据传入的方法名调用相应的分组方法,方便调用和切换不同的分组方法。