js数组分组，javascript实现数组的按属性分组
在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'));
封装后，可以根据传入的方法名调用相应的分组方法，方便调用和切换不同的分组方法。