01. 核心思路：按键分组并收集值的基本做法
01.01. 分组目标与数据结构
在前端开发中，将数组对象按指定键分组并收集对应值是一种常见的数据处理模式，目标是把同一分组的项聚到一起，并把需要的字段以数组形式收集起来，便于后续渲染或统计。合理的数据结构通常是一个对象，其键是分组键的取值，值是一个数组，包含该分组的所有目标值。
为了实现高效的渲染，分组结果通常包含两类信息：分组键与<收集的值。在设计初期就应明确这两者的类型与长度，避免在后续阶段进行频繁的类型转换。
01.02. 一个简单示例数据
设有一个用于前端展示的对象数组，每个对象包含一个分组字段和一个需要收集的字段，常见分组字段如 category，需要收集的字段如 name。以下示例数据用于演示分组目标：
示例数据可帮助理解：
const items = [{ id: 1, category: 'fruit', name: 'Apple' },{ id: 2, category: 'vegetable', name: 'Tomato' },{ id: 3, category: 'fruit', name: 'Banana' },{ id: 4, category: 'vegetable', name: 'Cucumber' }
];
01.03. 期望的输出结构
经过分组并收集后，输出结构应为对象，键为分组字段的取值，值为一个数组，包含该分组的所有 name 字段。这个结构在渲染时非常直观，可以直接用于遍历渲染。
02. 使用 reduce 的简单实现与注意点
02.01. reduce 的核心流程
使用 Array.prototype.reduce 的核心在于累加器的构建，以及为每个分组创建一个数组容器并将值推入其中。关键点包括：为新键初始化数组、将取出的值追加到对应分组、以及确保初始值为一个合适的对象。
02.02. 基本实现示例
下面的实现展示了如何对任意数组进行分组，并按指定键收集指定字段的值。若未指定 valueKey，则默认收集整个对象本身。
function groupByKey(arr, key, valueKey) {return arr.reduce((acc, item) => {const k = item[key];const v = valueKey ? item[valueKey] : item;if (!acc[k]) acc[k] = [];acc[k].push(v);return acc;}, Object.create(null)); // 使用空对象避免原型污染
}// 示例：按 category 收集 name
const result = groupByKey(items, 'category', 'name');
console.log(result);
// 输出：{ fruit: ['Apple','Banana'], vegetable: ['Tomato','Cucumber'] }
02.03. 注意事项与常见误区
在大量数据场景下，reduce 的性能与对象键的处理有关，建议尽量使用原始对象作为累加器，并在必要时将结果转换为其他结构（如 Map）。此外，键值类型通常会被转换为字符串，需在后续处理中保持一致性。
03. 使用 Map 提高性能的分组方案
03.01. Map 的优势
如果数据规模较大，使用 Map 来存储分组比直接操作普通对象更具性能优势，尤其是在多次更新同一键时。Map 的键类型更加灵活，查找成本稳定，且在迭代时更具直观性。
03.02. 基本实现示例
下面给出使用 Map 的分组实现，最后如果需要，可以方便地把 Map 转换为普通对象以保持兼容性。
function groupByUsingMap(arr, key, valueKey) {const map = new Map();for (const item of arr) {const k = item[key];const v = valueKey ? item[valueKey] : item;if (!map.has(k)) map.set(k, []);map.get(k).push(v);}// 转换为普通对象以便直接渲染或序列化return Object.fromEntries(map);
}// 示例
const mapResult = groupByUsingMap(items, 'category', 'name');
console.log(mapResult);
// 输出：{ fruit: ['Apple','Banana'], vegetable: ['Tomato','Cucumber'] }
03.03. 何时使用 Map 转换回对象
在前端渲染或与某些 API 交互时，普通对象更易于序列化，因此在最终阶段可使用 Object.fromEntries 将 Map 转换为对象；如果需要保留键的顺序，Map 也可直接遍历输出。
04. 灵活的值提取策略：valueExtractor
04.01. 自定义值提取逻辑
有时需要对每个分组收集更复杂的值，例如组合字段、筛选条件或返回对象的自定义形态。此时可以引入一个 valueExtractor，它接收当前项并返回要收集的值。
04.02. 实践性实现示例
下面的实现允许传入一个提取器，在分组时用提取器决定要收集的值；默认为收集整个对象本身。
function groupByWithExtractor(arr, key, extractor) {const map = new Map();for (const item of arr) {const k = item[key];const v = extractor ? extractor(item) : item;if (!map.has(k)) map.set(k, []);map.get(k).push(v);}return Object.fromEntries(map);
}// 示例提取器：仅提取对象的 id 与 name 组成的新对象
const extractor = it => ({ id: it.id, name: it.name });const extracted = groupByWithExtractor(items, 'category', extractor);
console.log(extracted);
// 输出：{ fruit: [ { id:1, name:'Apple' }, { id:3, name:'Banana' } ],
// vegetable: [ { id:2, name:'Tomato' }, { id:4, name:'Cucumber' } ] }
05. 结合实例：按分类聚集名称列表
05.01. 实际数据与目标
在一个需要按分类快速呈现名称列表的场景中，常见数据形态是每条记录包含 category 和 name。目标是得到一个以分类为键、名称数组为值的结构，以便直接渲染成分组列表。
05.02. 直接使用 reduce 的简明实现
以下演示了一个简洁的实现，适合在普通页面或组件渲染前进行数据处理。
const items = [{ category: '水果', name: '苹果' },{ category: '水果', name: '香蕉' },{ category: '蔬菜', name: '番茄' },{ category: '水果', name: '橙子' },
];// 使用 reduce 按 category 分组并收集 name
const groupedNames = items.reduce((acc, it) => {const k = it.category;acc[k] = acc[k] || [];acc[k].push(it.name);return acc;
}, {});console.log(groupedNames);
// 输出：{ 水果: ['苹果','香蕉','橙子'], 蔬菜: ['番茄'] }
05.03. 将分组结果用于后续渲染的常见步骤
为了便于渲染，常将分组结果转换为数组形式，例如将对象转换为“键-值对”数组，entries 的使用使得遍历更方便，且顺序可控。
const entries = Object.entries(groupedNames);
// 输出：[ ['水果', ['苹果','香蕉','橙子']], ['蔬菜', ['番茄']] ]
06. 在前端实际场景中的应用要点
06.01. 与框架的对接与性能优化
在实际的前端应用中，常需要将分组结果作为渲染数据，尽量保持不可变性，避免直接修改原始数据。对 React 等框架而言，使用 memoization 能有效减少重复计算，例如利用 useMemo 来缓存分组结果，只有原始数据变化时才重新计算。
// React 组合示例（简化）
import React, { useMemo } from 'react';function GroupedList({ data }) {const grouped = useMemo(() => groupByKey(data, 'type', 'name'), [data]);return ({Object.entries(grouped).map(([group, items]) => ({group}
{items.map((n, idx) => - {n}
)}
在类型安全的项目中，可以使用 TypeScript 提供的泛型来提升可维护性，例如用 Record
通过这些方法，将数组对象按指定键分组并收集对应值的技巧在前端开发中变得高效、可复用，并且易于与视图层集成。无论是简单场景还是复杂数据处理，这一模式都能帮助开发者快速构建清晰的渲染数据结构。对性能敏感的应用，优先考虑使用 Map，并在需要时将结果平滑转换为普通对象，以兼容现有渲染逻辑与 API 需求。
