本文详解如何将形如 {year: 2023, language: 'react'} 的对象数组，按 year 字段聚合成以年份为键、语言数组为值的对象集合，提供多种健壮实现方式及关键注意事项。
本文详解如何将形如 `{year: 2023, language: 'react'}` 的对象数组，按 `year` 字段聚合成以年份为键、语言数组为值的对象集合，提供多种健壮实现方式及关键注意事项。
在前端开发与数据处理中，常需将扁平的对象数组转换为结构化键值集合（即“分组映射”），例如按时间、类别或ID归类数据。上述需求本质是按 year 键对数组进行分组，并将同组的 language 值收集为数组。以下是几种推荐实现方式：
✅ 方法一：forEach + 手动初始化（清晰易懂，兼容性最佳）
const arr = [
{ year: 2023, language: 'react' },
{ year: 2023, language: 'node' },
{ year: 2022, language: 'mongodb' },
{ year: 2022, language: 'javascript' },
{ year: 2021, language: 'jquery' }
];
const obj = {};
arr.forEach(item => {
const key = String(item.year); // 强制转为字符串键（避免隐式类型问题）
if (obj[key]) {
obj[key].push(item.language);
} else {
obj[key] = [item.language];
}
});
console.log(obj);
// → { '2023': ['react', 'node'], '2022': ['mongodb', 'javascript'], '2021': ['jquery'] }
✅ 方法二：reduce（函数式风格，一行可读性强）
const obj = arr.reduce((acc, item) => {
const key = String(item.year);
acc[key] = acc[key] || [];
acc[key].push(item.language);
return acc;
}, {});
✅ 方法三：使用 Object.groupBy()（现代标准，但需注意浏览器兼容性）
⚠️ 注意：Object.groupBy() 是 ECMAScript 2024 提案，目前仅 Chrome 117+ / Edge 117+ 原生支持，生产环境建议配合 polyfill 或降级处理。
// 若环境支持（或已引入 polyfill） const grouped = Object.groupBy(arr, item => String(item.year)); const obj = Object.fromEntries( Object.entries(grouped).map(([year, items]) => [ year, items.map(i => i.language) ]) );
? 关键注意事项
- 键类型一致性：obj[2023] 和 obj['2023'] 在 JavaScript 中等价（对象键自动转字符串），但显式使用 String(item.year) 更安全，避免 undefined 或 null 导致意外键名；
- 空值防护：若原始数据中 year 可能为 undefined/null，应在分组前过滤或提供默认值，例如 item.year ?? 'unknown'；
- 性能考量：对于超大数据集（>10k 项），reduce 与 forEach 性能接近，均优于多次 filter + map 组合；
- 不可变性需求：如需保持原数组不变且返回新对象（推荐函数式场景），优先用 reduce；若需复用中间状态，forEach 更灵活。
掌握这种分组映射模式，不仅能解决年份归类问题，还可轻松扩展至按用户 ID、状态码、分类标签等任意字段聚合，是数据预处理的核心技能之一。
