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

使用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

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

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

groupBy

方法。实际上,现在ecmascript提案中已经有了

Object.groupBy

Map.groupBy

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

reduce

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

reduce

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

使用

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

实现也完全可行。选择哪种方式,很多时候取决于项目的具体上下文和团队的偏好。

© 版权声明
THE END
喜欢就支持一下吧
点赞9 分享