如何在JavaScript中对数组数据进行筛选并分组？附示例需求

嘿，我来帮你搞定JavaScript里的数组筛选和分组问题！这里我用一个常见的员工数据场景来演示，你可以直接套用到自己的业务逻辑里～

假设我们有这样的原始数组 #

比如一组包含员工信息的数组，我们需要先筛选出活跃状态的员工，再按部门进行分组：

const employees = [
  { id: 1, name: 'Alice', department: 'Engineering', age: 28, isActive: true },
  { id: 2, name: 'Bob', department: 'Marketing', age: 32, isActive: false },
  { id: 3, name: 'Charlie', department: 'Engineering', age: 25, isActive: true },
  { id: 4, name: 'Diana', department: 'HR', age: 35, isActive: true },
  { id: 5, name: 'Eve', department: 'Marketing', age: 29, isActive: true },
  { id: 6, name: 'Frank', department: 'Engineering', age: 30, isActive: false }
];

目标结果格式 #

我们希望最终得到按部门分组的活跃员工对象：

{
  "Engineering": [
    { id: 1, name: 'Alice', department: 'Engineering', age: 28, isActive: true },
    { id: 3, name: 'Charlie', department: 'Engineering', age: 25, isActive: true }
  ],
  "HR": [
    { id: 4, name: 'Diana', department: 'HR', age: 35, isActive: true }
  ],
  "Marketing": [
    { id: 5, name: 'Eve', department: 'Marketing', age: 29, isActive: true }
  ]
}

实现步骤 #

1. 先筛选符合条件的数据

用Array.filter()方法快速过滤出活跃员工：

// 筛选isActive为true的员工
const activeEmployees = employees.filter(emp => emp.isActive);

2. 再用reduce进行分组

Array.reduce()是分组的核心工具，它可以帮我们逐步构建分组后的对象：

const groupedByDepartment = activeEmployees.reduce((acc, emp) => {
  // 如果当前部门还没在累加器里，初始化一个空数组
  if (!acc[emp.department]) {
    acc[emp.department] = [];
  }
  // 将当前员工推入对应部门的数组
  acc[emp.department].push(emp);
  return acc;
}, {}); // 初始值是空对象

合并成一行简化写法

如果喜欢更简洁的代码，可以把筛选和分组合并：

const result = employees
  .filter(emp => emp.isActive)
  .reduce((acc, emp) => {
    // 用扩展运算符简化数组初始化和元素添加
    acc[emp.department] = [...(acc[emp.department] || []), emp];
    return acc;
  }, {});

灵活调整分组规则 #

如果需要按其他维度分组（比如年龄区间），只需要修改分组的key逻辑即可：

const groupedByAgeRange = employees
  .filter(emp => emp.isActive)
  .reduce((acc, emp) => {
    // 定义年龄区间的分组key
    let ageRange;
    if (emp.age >= 20 && emp.age < 30) {
      ageRange = '20-29';
    } else if (emp.age >= 30 && emp.age < 40) {
      ageRange = '30-39';
    } else {
      ageRange = 'Other';
    }
    
    acc[ageRange] = [...(acc[ageRange] || []), emp];
    return acc;
  }, {});

关键要点总结 #

• 先筛选再分组的逻辑更清晰，也可以根据需求调整顺序（比如先分组再筛选每组内的元素）
• reduce()是JavaScript中处理分组需求最灵活的方法，几乎能应对所有分组场景
• ES6+的扩展运算符可以让数组的初始化和合并代码更简洁

内容的提问来源于stack exchange，提问作者prabhat katoch