使用reduce方法可高效实现JS数据分组，通过遍历数组并以指定键累积分组结果，支持处理嵌套属性、复合键、键值缺失及类型不一致等复杂场景，结合Map或分批处理可进一步优化性能。
JavaScript中实现分组功能，核心思想其实就是遍历你手头的数据集合，然后根据你预设的一个“规则”或者说“键”，把那些符合相同规则的数据项归拢到一起。说白了，就是把散落在各处的数据，按某种共同点整理成一个个小堆。最常用、也最灵活的实现方式，我个人觉得是利用
Array.prototype.reduce()
方法。
解决方案
要用JS实现分组，最直接且高效的方式是利用数组的
reduce
方法。它允许你遍历数组，并累积一个结果。
假设我们有一组用户数据，想根据他们的城市进行分组：
const users = [ { 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' },];// 使用 reduce 实现分组const groupedByCity = users.reduce((accumulator, currentUser) => { const city = currentUser.city; // 获取分组的键 if (!accumulator[city]) { accumulator[city] = []; // 如果这个城市还没有对应的数组，就创建一个 } accumulator[city].push(currentUser); // 把当前用户添加到对应的城市数组中 return accumulator; // 返回累积器，供下一次迭代使用}, {}); // 初始值是一个空对象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' } ]}*/
这个过程有点像在整理文件：你拿到一份文件（
currentUser
），看一眼它的分类标签（
currentUser.city
），然后找到对应的文件夹（
accumulator[city]
）。如果文件夹不存在，就先创建一个新的（
!accumulator[city]
），再把文件放进去。这个
accumulator
就是你最终的分组结果。
如何处理复杂或多层级的数据分组需求？
实际开发中，数据结构往往比简单的扁平对象要复杂得多。你可能需要根据嵌套属性分组，或者同时依据多个条件来分组。
对于多层级的数据，例如
user.address.country
，你只需要调整获取键的逻辑：
const usersWithAddress = [ { id: 1, name: 'Alice', address: { city: 'New York', country: 'USA' } }, { id: 2, name: 'Bob', address: { city: 'London', country: 'UK' } }, { id: 3, name: 'Charlie', address: { city: 'Boston', country: 'USA' } }, { id: 4, name: 'David', address: { city: 'Paris', country: 'France' } },];const groupedByCountry = usersWithAddress.reduce((acc, user) => { const country = user.address?.country; // 使用可选链操作符，防止 address 不存在 if (country) { // 确保国家存在才进行分组 if (!acc[country]) { acc[country] = []; } acc[country].push(user); } return acc;}, {});console.log(groupedByCountry);
这里我加入了
?.
可选链操作符和
if (country)
判断，这是个好习惯，能避免在数据结构不完全一致时报错。
而当需要根据多个条件组合分组时，你可以拼接一个复合键。比如，要同时根据城市和国家分组：
const groupedByCityAndCountry = usersWithAddress.reduce((acc, user) => { const city = user.address?.city; const country = user.address?.country; if (city && country) { const compositeKey = `${city}-${country}`; // 创建复合键 if (!acc[compositeKey]) { acc[compositeKey] = []; } acc[compositeKey].push(user); } return acc;}, {});console.log(groupedByCityAndCountry);/*输出示例：{ "New York-USA": [ { ...Alice... } ], "London-UK": [ { ...Bob... } ], "Boston-USA": [ { ...Charlie... } ], "Paris-France": [ { ...David... } ]}*/
这种复合键的方式非常灵活，你可以根据任意多的属性来生成唯一的键，实现更细粒度的分组。
在分组过程中，如何处理键值缺失或数据类型不一致的情况？
这是个很现实的问题，数据往往不那么“干净”。如果分组的键值可能缺失（
null
,
undefined
）或者数据类型不一致（比如有时是数字ID，有时是字符串ID），你需要增加一些健壮性判断。
处理键值缺失：当某个数据项用于分组的键可能不存在时，如果不做处理，
accumulator[undefined]
或
accumulator[null]
可能会出现，这通常不是你想要的结果。
const products = [ { id: 1, name: 'Laptop', category: 'Electronics' }, { id: 2, name: 'Mouse', category: 'Electronics' }, { id: 3, name: 'Keyboard' }, // 缺少 category { id: 4, name: 'Monitor', category: null }, // category 为 null { id: 5, name: 'Headphones', category: 'Electronics' }];const groupedBySafeCategory = products.reduce((acc, product) => { // 优先使用实际的 category，如果缺失或为 null/undefined，则使用 'Other' const category = product.category || 'Other'; if (!acc[category]) { acc[category] = []; } acc[category].push(product); return acc;}, {});console.log(groupedBySafeCategory);/*输出示例：{ "Electronics": [ { ...Laptop... }, { ...Mouse... }, { ...Headphones... } ], "Other": [ { ...Keyboard... }, { ...Monitor... } ]}*/
这里我用了
product.category || 'Other'
，这是一个常见的短路求值技巧，当
product.category
是 falsy 值（
undefined
,
null
,
''
,
0
,
false
）时，它会回退到
'Other'
。这样，所有没有明确分类的产品都会被归到“Other”组。
处理数据类型不一致：如果你的分组键可能出现类型不一致，比如数字
1
和字符串
"1"
，它们在作为对象键时会被视为不同的键。为了确保它们被归为一类，你需要进行类型转换：
const items = [ { id: 1, type: 100 }, { id: 2, type: '100' }, // 注意这里是字符串 { id: 3, type: 200 }];const groupedByTypeConsistent = items.reduce((acc, item) => { // 将 type 统一转换为字符串，确保键的唯一性 const typeKey = String(item.type); if (!acc[typeKey]) { acc[typeKey] = []; } acc[typeKey].push(item); return acc;}, {});console.log(groupedByTypeConsistent);/*输出示例：{ "100": [ { id: 1, type: 100 }, { id: 2, type: '100' } ], "200": [ { id: 3, type: 200 } ]}*/
通过
String(item.type)
，无论是数字还是字符串，都会被统一转换为字符串作为对象的键，从而避免了因类型不同而导致的重复分组。
对于大量数据，JS分组操作的性能考量与优化策略有哪些？
在处理大量数据时，性能总是值得关注的话题。对于JavaScript中的分组操作，特别是使用
reduce
这种单次遍历的方式，它的时间复杂度通常是 O(n)，其中 n 是数组的长度。这意味着处理的数据量越大，所需时间就越长，但它是线性增长的，效率相对较高。
内存消耗：分组操作会创建一个新的对象来存储分组后的数据。这个新对象的大小取决于原始数据的数量和分组的粒度。如果分组后的键非常多，或者每个组内的数据项非常多，那么这个结果对象可能会占用大量内存。在浏览器环境中，过大的内存占用可能导致页面卡顿甚至崩溃。
优化策略：
避免不必要的计算： 在
reduce
的回调函数内部，确保只进行必要的计算。比如，如果分组键可以提前计算好，就不要在每次迭代中重复计算。不过，通常情况下，获取一个属性值并不会造成显著的性能瓶颈。
合理选择数据结构：
普通对象 (
{}
)： 最常用，键只能是字符串或Symbol。对于大多数情况已经足够。
Map
对象： 如果你的分组键是非字符串类型（例如，希望用对象或数字作为键而不进行类型转换），或者你预期会有非常多的分组键，
Map
可能会比普通对象有轻微的性能优势，因为它在内部管理键值对的方式更优化。
// 使用 Map 进行分组，键可以是任意类型const dataWithMixedKeys = [ { id: 1, groupKey: { a: 1 } }, { id: 2, groupKey: { a: 1 } }, // 注意：这里是不同的对象实例，Map 会视为不同的键 { id: 3, groupKey: 100 }, { id: 4, groupKey: '100' }];const groupedByMap = dataWithMixedKeys.reduce((map, item) => { const key = item.groupKey; if (!map.has(key)) { map.set(key, []); } map.get(key).push(item); return map;}, new Map());console.log(groupedByMap);// 注意：由于 {a:1} 是两个不同的对象实例，它们会被视为两个不同的键// Map(4) {// { a: 1 } => [ { id: 1, groupKey: { a: 1 } } ],// { a: 1 } => [ { id: 2, groupKey: { a: 1 } } ],// 100 => [ { id: 3, groupKey: 100 } ],// '100' => [ { id: 4, groupKey: '100' } ]// }
对于对象作为键的情况，
Map
会比较引用地址，所以两个内容相同的对象如果不是同一个引用，也会被视为不同的键。这需要你根据实际需求来判断是否适用。
分批处理 (Batch Processing)： 如果数据量极其庞大，导致一次性处理会阻塞主线程（在浏览器中表现为页面卡顿），可以考虑将数据分批处理。例如，使用
setTimeout
或
requestAnimationFrame
将处理任务分解成多个小块，在不同的事件循环周期中执行。但这会增加代码复杂度，通常只在极端情况下考虑。
服务器端处理： 对于百万级别甚至千万级别的数据，前端JS进行分组操作通常是不现实的，也并非其设计初衷。这种情况下，数据处理应该在服务器端完成，由数据库或后端服务提供聚合好的数据。
总的来说，对于前端JS能处理的数据量（几万到几十万条），
Array.prototype.reduce()
的效率通常是足够的。主要的性能瓶颈往往不在于
reduce
本身，而在于数据量过大导致的内存占用，或者你在
reduce
回调中执行了非常复杂的、耗时的操作。在优化之前，先进行性能分析，找出真正的瓶颈所在。
以上就是JS如何实现分组功能的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1516028.html
微信扫一扫 
支付宝扫一扫 
