ES2024 新增的数组方法groupBy

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


核心作用

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

鲜明示例

示例 1:按对象属性分组

场景 ‌:将用户数组按角色(role)分组。

yaml 复制代码
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:按动态计算值分组

场景 ‌:将数字数组按奇偶性分组,键名为 evenodd

ini 复制代码
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。

yaml 复制代码
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:处理边缘情况(空值或无效键)

场景 ‌:分组时处理可能的 nullundefined 值。

go 复制代码
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):

ini 复制代码
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 实现**‌:

ini 复制代码
javascriptCopy Code
const groupedByRole = users.groupBy(user => user.role);  

优势对比‌:

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

注意事项

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

总结

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

相关推荐
念念不忘 必有回响10 小时前
js设计模式-状态模式
javascript·设计模式·状态模式
我的写法有点潮10 小时前
Scss 的四种导入方式你都知道吗
前端·css
大模型真好玩11 小时前
大模型工程面试经典(五)—大模型专业领域微调数据集如何构建?
人工智能·python·面试
UrbanJazzerati11 小时前
Python正则表达式匹配和替换详细指南
python·面试
云飞云共享云桌面11 小时前
SolidWorks对电脑的硬件配置要求具体有哪些
java·服务器·前端·网络·数据库
鹏程十八少11 小时前
11. Android <卡顿十一>深入ASM与Transform进行插桩,手写微信Matrix插件,打造自己的Matrix工具(卡顿进阶)
前端
小桥风满袖11 小时前
极简三分钟ES6 - 箭头函数
前端·javascript
bug_kada11 小时前
前端后端3步联调:Cookie认证实战,让登录功能完美上线!
前端·javascript
stringwu11 小时前
Flutter开发者必备:状态管理Bloc的实用详解
前端·flutter
青晚舟11 小时前
作为前端你必须要会的CICD
前端·ci/cd