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

相关推荐
旧曲重听16 分钟前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿15 分钟前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉20 分钟前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽26 分钟前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课28 分钟前
React useEffect 详解与运用
前端·react.js
我想说一句29 分钟前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee12330 分钟前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为
小鱼小鱼干32 分钟前
【Tauri】Tauri中Channel的使用
前端
拾光拾趣录34 分钟前
CSS全面指南:从基础布局到高级技巧与实践
前端·css
南屿im37 分钟前
基于 Promise 封装 Ajax 请求:从 XMLHttpRequest 到现代化异步处理
前端·javascript