ES2024 新增的数组方法groupBy

Array.prototype.groupBy 是 ES2024 新增的数组方法，‌根据指定条件对数组元素进行分组 ‌，返回一个对象，其中键为分组依据，值为符合该条件的元素数组。与 Lodash 的 _.groupBy 功能类似，但作为原生方法性能更优，且无需引入第三方库。

---

‌核心作用‌

1. ‌简化数据分组逻辑 ‌：替代 reduce 手动遍历和对象属性赋值。
2. ‌提升代码可读性‌：链式调用更直观，减少临时变量。
3. ‌兼容复杂分组条件‌：支持函数、属性名、动态计算值等分组方式。

---

‌鲜明示例‌

‌示例 1：按对象属性分组‌

‌场景 ‌：将用户数组按角色（role）分组。

javascriptCopy Code
const users = [  
  { id: 1, name: "Alice", role: "admin" },  
  { id: 2, name: "Bob", role: "user" },  
  { id: 3, name: "Charlie", role: "admin" },  
  { id: 4, name: "David", role: "guest" }  
];  

const groupedByRole = users.groupBy(user => user.role);  
console.log(groupedByRole);  
// 输出：  
// {  
//   admin: [{ id: 1, ... }, { id: 3, ... }],  
//   user: [{ id: 2, ... }],  
//   guest: [{ id: 4, ... }]  
// }  

---

‌示例 2：按动态计算值分组‌

‌场景 ‌：将数字数组按奇偶性分组，键名为 even 和 odd。

javascriptCopy Code
const numbers = [1, 2, 3, 4, 5, 6];  
const parityGroups = numbers.groupBy(n => n % 2 === 0 ? "even" : "odd");  
console.log(parityGroups);  
// 输出：  
// {  
//   odd: [1, 3, 5],  
//   even: [2, 4, 6]  
// }  

---

‌示例 3：处理复杂条件（嵌套对象） ‌

‌场景 ‌：按书籍的出版年份（year）分组，且年份大于 2000。

javascriptCopy Code
const books = [  
  { title: "Book A", meta: { year: 1999 } },  
  { title: "Book B", meta: { year: 2005 } },  
  { title: "Book C", meta: { year: 2005 } },  
  { title: "Book D", meta: { year: 2010 } }  
];  

const modernBooks = books.groupBy(book =>  
  book.meta.year > 2000 ? `post-2000` : `pre-2000`  
);  
console.log(modernBooks);  
// 输出：  
// {  
//   'pre-2000': [{ title: "Book A", ... }],  
//   'post-2000': [{ title: "Book B", ... }, { title: "Book C", ... }, { title: "Book D", ... }]  
// }  

---

‌示例 4：处理边缘情况（空值或无效键） ‌

‌场景 ‌：分组时处理可能的 null 或 undefined 值。

javascriptCopy Code
const data = [  
  { type: "fruit", name: "Apple" },  
  { type: null, name: "Unknown" },  
  { type: "vegetable", name: "Carrot" },  
  { type: undefined, name: "Mystery" }  
];  

const groupedData = data.groupBy(item => item.type ?? "unknown");  
console.log(groupedData);  
// 输出：  
// {  
//   fruit: [{ type: "fruit", ... }],  
//   vegetable: [{ type: "vegetable", ... }],  
//   unknown: [{ type: null, ... }, { type: undefined, ... }]  
// }  

---

‌示例 5：与 reduce 对比‌

‌传统实现 ‌（使用 reduce）：

javascriptCopy Code
const users = [...] // 同上用户数组  
const groupedByRole = users.reduce((acc, user) => {  
  const key = user.role;  
  acc[key] = acc[key] || [];  
  acc[key].push(user);  
  return acc;  
}, {});  

‌**groupBy 实现**‌：

javascriptCopy Code
const groupedByRole = users.groupBy(user => user.role);  

‌优势对比‌：

• 代码量减少 60%，逻辑更集中。
• 无需手动初始化空数组，避免遗漏边界情况。

---

‌注意事项‌

1. ‌兼容性‌：需确认运行环境支持 ES2024 或使用 polyfill。
2. ‌键类型 ‌：分组键会被强制转为字符串（如数字 1 转为 "1"）。
3. ‌性能‌：原生实现比 Lodash 快 20%~30%（V8 引擎优化）。

---

‌总结‌

Array.prototype.groupBy 是处理数据分组的利器，适用于统计、筛选、可视化等场景。通过直接返回结构化对象，大幅简化开发流程，尤其适合处理动态或嵌套数据的分组需求。