js 如何使用groupBy对对象数组进行分组-js教程-PHP中文网

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

煙雲

发布： 2025-08-18 08:22:01

原创

581人浏览过

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

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

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

groupBy

登录后复制

方法（尽管新提案正在路上）。不过，这并不妨碍我们通过一些常见的编程模式来优雅地实现这个功能，最常用且灵活的方式就是结合

Array.prototype.reduce()

登录后复制

方法。

解决方案

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

reduce

登录后复制

迭代器。这个方法允许你遍历数组，并根据一个累加器（通常是一个空对象或Map）来构建最终的分组结果。

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

登录后复制

作为键（key），检查

acc

登录后复制

中是否已存在这个键。如果不存在，就为它创建一个空数组；然后，将当前的

person

登录后复制

对象推入到这个数组中。最终，

reduce

登录后复制

返回的就是一个以城市名为键，值为对应人物数组的对象。

为什么JavaScript原生没有

groupBy

登录后复制

方法？

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

groupBy

登录后复制

是个非常常见的操作。JavaScript作为一门历史悠久的语言，其核心库的设计哲学在早期可能更侧重于提供基础的、通用的构建块，而不是过于高层的、特定场景的功能。像

reduce

登录后复制

、

map

登录后复制

、

filter

登录后复制

这些数组方法，它们提供了极大的灵活性，开发者可以通过组合它们来解决各种复杂问题，包括分组。

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

groupBy

登录后复制

方法。实际上，现在ECMAScript提案中已经有了

Object.groupBy

登录后复制

和

Map.groupBy

登录后复制

，它们目前处于Stage 3阶段，这意味着它们很有可能被纳入未来的JavaScript标准。这表明了语言也在不断演进，吸纳社区的实际需求。不过在那之前，我们还是得依赖像

reduce

登录后复制

这样的“老兵”来完成任务。我个人觉得，虽然多写几行代码，但用

reduce

登录后复制

实现的分组逻辑，其透明度和可控性还是挺不错的。

北极象沉浸式AI翻译

免费的北极象沉浸式AI翻译 - 带您走进沉浸式AI的双语对照体验

查看详情

使用

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的