js 如何使用groupBy对对象数组进行分组

使用reduce是javascript中对对象数组分组最常用且灵活的方法；1. 通过reduce遍历数组，以目标属性值作为键，将对象归类到累加器（对象或map）中；2. 当累加器为普通对象时，适用于字符串键，若需支持任意类型键则应使用map；3. 社区已推动object.groupby和map.groupby进入stage 3提案，未来或将成为原生方法；4. 第三方库如lodash提供_.groupby等便捷函数，语法更简洁且经过优化，适合复杂项目使用；5. 具体选择取决于性能需求、键类型及是否允许引入外部依赖，目前reduce仍是兼容性和控制力最佳的方案。

在JavaScript中，如果你想对一个对象数组进行分组，目前原生语言并没有一个直接的

groupBy

Array.prototype.reduce()

解决方案

要使用JavaScript对对象数组进行分组，最直接和广泛接受的方法是利用

reduce

const people = [
  { id: 1, name: 'Alice', city: 'New York' },
  { id: 2, name: 'Bob', city: 'London' },
  { id: 3, name: 'Charlie', city: 'New York' },
  { id: 4, name: 'David', city: 'Paris' },
  { id: 5, name: 'Eve', city: 'London' },
];

// 根据 'city' 属性进行分组
const groupedByCity = people.reduce((acc, person) => {
  const key = person.city;
  if (!acc[key]) {
    acc[key] = []; // 如果这个城市还没有对应的数组，就创建一个
  }
  acc[key].push(person); // 将当前人添加到对应城市的数组中
  return acc;
}, {}); // 初始累加器是一个空对象

console.log(groupedByCity);
/*
输出大致结构：
{
  "New York": [
    { id: 1, name: 'Alice', city: 'New York' },
    { id: 3, name: 'Charlie', city: 'New York' }
  ],
  "London": [
    { id: 2, name: 'Bob', city: 'London' },
    { id: 5, name: 'Eve', city: 'London' }
  ],
  "Paris": [
    { id: 4, name: 'David', city: 'Paris' }
  ]
}
*/

这段代码的核心在于

reduce

acc

person

person.city

acc

person

reduce

为什么JavaScript原生没有

groupBy

方法？

这确实是个有意思的问题，尤其是在其他一些语言或库中，

groupBy

reduce

map

filter

当然，社区也一直有声音呼吁添加更直接的

groupBy

Object.groupBy

Map.groupBy

reduce

reduce

JTBC网站内容管理系统5.0.3.1

JTBC CMS(5.0) 是一款基于PHP和MySQL的内容管理系统原生全栈开发框架，开源协议为AGPLv3，没有任何附加条款。系统可以通过命令行一键安装，源码方面不基于任何第三方框架，不使用任何脚手架，仅依赖一些常见的第三方类库如图表组件等，您只需要了解最基本的前端知识就能很敏捷的进行二次开发，同时我们对于常见的前端功能做了Web Component方式的封装，即便是您仅了解HTML/CSS也

下载

使用

map

对象实现更灵活的分组

前面我们用的是一个普通JavaScript对象作为累加器，它的键默认会被转换为字符串。但在某些场景下，你可能需要用非字符串类型（比如一个对象实例或一个数字）作为分组的键。这时，使用

map

const products = [
  { id: 101, name: 'Laptop', category: { id: 'elec', name: 'Electronics' } },
  { id: 102, name: 'Mouse', category: { id: 'elec', name: 'Electronics' } },
  { id: 103, name: 'Shirt', category: { id: 'cloth', name: 'Apparel' } },
  { id: 104, name: 'Keyboard', category: { id: 'elec', name: 'Electronics' } },
];

// 根据 category 对象进行分组
const groupedByCategory = products.reduce((acc, product) => {
  // 这里我们将整个 category 对象作为键
  // 注意：如果 category 是不同的对象实例但内容相同，Map会视为不同的键
  // 实际应用中，你可能需要一个稳定的、可比较的键，比如 category.id
  const key = product.category.id; // 或者直接用 product.category 如果你确定是同一个引用

  if (!acc.has(key)) {
    acc.set(key, []);
  }
  acc.get(key).push(product);
  return acc;
}, new Map()); // 初始累加器是一个新的Map对象

console.log(groupedByCategory);
/*
输出大致结构（Map对象）：
Map(2) {
  'elec' => [
    { id: 101, name: 'Laptop', category: { id: 'elec', name: 'Electronics' } },
    { id: 102, name: 'Mouse', category: { id: 'elec', name: 'Electronics' } },
    { id: 104, name: 'Keyboard', category: { id: 'elec', name: 'Electronics' } }
  ],
  'cloth' => [
    { id: 103, name: 'Shirt', category: { id: 'cloth', name: 'Apparel' } }
  ]
}
*/

使用

map

map

借助Lodash等实用工具库

在许多实际的项目中，为了代码的简洁性、健壮性和性能，开发者经常会引入一些成熟的工具库。其中，Lodash就是非常受欢迎的一个，它提供了大量实用的功能函数，包括一个非常方便的

_.groupBy

// 假设你已经通过 npm/yarn 安装并导入了 lodash
// import _ from 'lodash';

const students = [
  { name: 'Alice', grade: 'A' },
  { name: 'Bob', grade: 'B' },
  { name: 'Charlie', grade: 'A' },
  { name: 'David', grade: 'C' },
];

// 使用 Lodash 的 groupBy
// 注意：这里需要引入 Lodash 库才能运行
// const groupedByGrade = _.groupBy(students, 'grade');

// 如果不使用外部库，这里只是一个概念性的展示
// 它的内部实现原理和我们用 reduce 写的类似，但更优化和通用
/*
理论上 Lodash 的输出会是这样：
{
  "A": [
    { name: 'Alice', grade: 'A' },
    { name: 'Charlie', grade: 'A' }
  ],
  "B": [
    { name: 'Bob', grade: 'B' }
  ],
  "C": [
    { name: 'David', grade: 'C' }
  ]
}
*/

Lodash的

groupBy

reduce