使用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
迭代器。这个方法允许你遍历数组，并根据一个累加器（通常是一个空对象或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
方法？
这确实是个有意思的问题，尤其是在其他一些语言或库中，
groupBy
是个非常常见的操作。JavaScript作为一门历史悠久的语言，其核心库的设计哲学在早期可能更侧重于提供基础的、通用的构建块，而不是过于高层的、特定场景的功能。像
reduce
、
map
、
filter
这些数组方法，它们提供了极大的灵活性，开发者可以通过组合它们来解决各种复杂问题，包括分组。
当然，社区也一直有声音呼吁添加更直接的
groupBy
方法。实际上，现在ECMAScript提案中已经有了
Object.groupBy
和
Map.groupBy
，它们目前处于Stage 3阶段，这意味着它们很有可能被纳入未来的JavaScript标准。这表明了语言也在不断演进，吸纳社区的实际需求。不过在那之前，我们还是得依赖像
reduce
这样的“老兵”来完成任务。我个人觉得，虽然多写几行代码，但用
reduce
实现的分组逻辑，其透明度和可控性还是挺不错的。
使用
map
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
实现也完全可行。选择哪种方式，很多时候取决于项目的具体上下文和团队的偏好。
以上就是js 如何使用groupBy对对象数组进行分组的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1515889.html
微信扫一扫 
支付宝扫一扫 
