轻松掌握 JS 数组分组技巧，实现数据分类整理！

2023-12-18 23:39:23

JavaScript 数组分组：轻松管理和处理数据

在日常编程中，我们经常遇到需要处理大量数据的场景，这些数据通常具有特定的类别或分组。为了有效地管理和处理这些数据，将它们进行分组至关重要。JavaScript 提供了多种数组分组方法，可以帮助我们轻松完成此任务，实现数据的分类和组织。

数组分组方法

JavaScript 中提供了三种主要的方法用于数组分组：

1. 使用 Array.prototype.groupBy() 方法

Array.prototype.groupBy() 方法是 JavaScript 中专门用于数组分组的内置方法。它接受一个分组函数作为参数，该函数用于对数组中的每个元素进行分组。分组函数的返回值将作为分组的键，而数组中的元素将作为分组的值。

代码示例：

const array = [
  { name: 'John', age: 25 },
  { name: 'Jane', age: 28 },
  { name: 'Bob', age: 30 },
  { name: 'Alice', age: 22 }
];

const groupedArray = array.groupBy(item => item.age);

console.log(groupedArray);
// {
//   25: [{ name: 'John', age: 25 }],
//   28: [{ name: 'Jane', age: 28 }],
//   30: [{ name: 'Bob', age: 30 }],
//   22: [{ name: 'Alice', age: 22 }]
// }

在这个示例中，我们将数组 array 根据 age 属性进行分组，得到一个包含年龄分组的对象 groupedArray。

2. 使用 _.groupBy() 方法（Lodash）

如果您使用的是 Lodash 库，可以使用 _.groupBy() 方法进行数组分组。它的用法与 Array.prototype.groupBy() 方法类似，也接受一个分组函数作为参数，并返回一个包含分组结果的对象。

代码示例：

const array = [
  { name: 'John', age: 25 },
  { name: 'Jane', age: 28 },
  { name: 'Bob', age: 30 },
  { name: 'Alice', age: 22 }
];

const groupedArray = _.groupBy(array, item => item.age);

console.log(groupedArray);
// {
//   25: [{ name: 'John', age: 25 }],
//   28: [{ name: 'Jane', age: 28 }],
//   30: [{ name: 'Bob', age: 30 }],
//   22: [{ name: 'Alice', age: 22 }]
// }

3. 使用自定义分组函数

如果需要对数组进行更复杂的分组，可以使用自定义分组函数。自定义分组函数可以根据您的具体需求对数组中的元素进行分组。

代码示例：

const array = [
  { name: 'John', age: 25, gender: 'male' },
  { name: 'Jane', age: 28, gender: 'female' },
  { name: 'Bob', age: 30, gender: 'male' },
  { name: 'Alice', age: 22, gender: 'female' }
];

const groupedArray = array.groupBy(item => item.age + '-' + item.gender);

console.log(groupedArray);
// {
//   '25-male': [{ name: 'John', age: 25, gender: 'male' }],
//   '28-female': [{ name: 'Jane', age: 28, gender: 'female' }],
//   '30-male': [{ name: 'Bob', age: 30, gender: 'male' }],
//   '22-female': [{ name: 'Alice', age: 22, gender: 'female' }]
// }