使用 JavaScript 进行数据分组最优雅的方式

开发 前端
对数据进行分组,是我们在开发中经常会遇到的需求,使用 JavaScript 进行数据分组的方式也有很多种,但是由于没有原生方法的支持,我们自己实现的数据分组函数通常都比较冗长而且难以理解。

大家好,我是 ConardLi ,今天我们一起来看一个数据分组的小技巧。

对数据进行分组,是我们在开发中经常会遇到的需求,使用 JavaScript 进行数据分组的方式也有很多种,但是由于没有原生方法的支持,我们自己实现的数据分组函数通常都比较冗长而且难以理解。

不过,告诉大家一个好消息,一个专门用来做数据分组的提案 Array.prototype.groupBy 已经到达 Stage 3 啦!

在看这个提案,之前,我们先来回顾下我们以前在 JavaScript 里是怎么分组的。

以前的方式

假设我们有下面一组数据:

  1. const items = [ 
  2.   { 
  3.     type: 'clothes', 
  4.     value: '👔', 
  5.   }, 
  6.   { 
  7.     type: 'clothes', 
  8.     value: '👕', 
  9.   }, 
  10.   { 
  11.     type: 'clothes', 
  12.     value: '👗', 
  13.   }, 
  14.   { 
  15.     type: 'animal', 
  16.     value: '🐷', 
  17.   }, 
  18.   { 
  19.     type: 'animal', 
  20.     value: '🐸', 
  21.   }, 
  22.   { 
  23.     type: 'animal', 
  24.     value: '🐒', 
  25.   }, 
  26. ]; 

我们希望按照 type 分组成下面的格式:

  1. const items = { 
  2.   clothes: [ 
  3.     { 
  4.       type: 'clothes', 
  5.       value: '👔', 
  6.     }, 
  7.     { 
  8.       type: 'clothes', 
  9.       value: '👕', 
  10.     }, 
  11.     { 
  12.       type: 'clothes', 
  13.       value: '👗', 
  14.     }, 
  15.   ], 
  16.   animal: [ 
  17.     { 
  18.       type: 'animal', 
  19.       value: '🐷', 
  20.     }, 
  21.     { 
  22.       type: 'animal', 
  23.       value: '🐸', 
  24.     }, 
  25.     { 
  26.       type: 'animal', 
  27.       value: '🐒', 
  28.     }, 
  29.   ], 
  30. }; 

我们可能会用到下面的写法:

for 循环

最直接而且容易理解的方法,就是代码有点多。

  1. const groupedBy = {}; 
  2.  
  3. for (const item of items) { 
  4.   if (groupedBy[item.type]) { 
  5.     groupedBy[item.type].push(item); 
  6.   } else { 
  7.     groupedBy[item.type] = [item]; 
  8.   } 

reduce

使用 Array.protoype.reduce 虽然语法看起来简单,但是太难读了。

  1. items.reduce( 
  2.   (acc, item) => ({ 
  3.     ...acc, 
  4.     [item.type]: [...(acc[item.type] ?? []), item], 
  5.   }), 
  6.   {}, 
  7. ); 

我们稍微改造的容易理解一点,语法就跟上面的 for 循环差不多了:

  1. items.reduce((acc, item) => { 
  2.   if (acc[item.type]) { 
  3.     acc[item.type].push(item); 
  4.   } else { 
  5.     acc[item.type] = [item]; 
  6.   } 
  7.  
  8.   return acc; 
  9. }, {}); 

filter

使用 Array.prototype.filter,代码看起来很容易阅读,但是性能很差,你需要对数组进行多次过滤,而且如果 type 属性值比较多的情况下,还需要做更多的 filter 操作。

  1. const groupedBy = { 
  2.   fruit: items.filter((item) => item.type === 'clothes'), 
  3.   vegetable: items.filter((item) => item.type === 'animal'), 
  4. }; 

其他

如果你既不想用 reduce,还想用到函数式写法,你可能会写出下面的代码:

  1. Object.fromEntries( 
  2.   Array.from(new Set(items.map(({ type }) => type))).map((type) => [ 
  3.     type, 
  4.     items.filter((item) => item.type === type), 
  5.   ]), 
  6. ); 

是不是很让人崩溃 🤯~

Array.prototype.groupBy

好了,如果使用 Array.prototype.groupBy,你只需要下面这一行代码:

  1. items.groupBy(({ type }) => type); 

groupBy 的回调中一共有三个参数:

  • 参数1:数组遍历到的当前对象
  • 参数2:index 索引
  • 参数3:原数组
  1. const array = [1, 2, 3, 4, 5]; 
  2.  
  3. // groupBy groups items by arbitrary key. 
  4. // In this case, we're grouping by even/odd keys 
  5. array.groupBy((num, index, array) => { 
  6.   return num % 2 === 0 ? 'even': 'odd'; 
  7. }); 

另外,你还可以用 groupByToMap,将数据分组为一个 Map 对象。

  1. // groupByToMap returns items in a Map, and is useful for grouping using 
  2. // an object key. 
  3. const odd  = { odd: true }; 
  4. const even = { even: true }; 
  5. array.groupByToMap((num, index, array) => { 
  6.   return num % 2 === 0 ? even: odd; 
  7. }); 
  8.  
  9. // =>  Map { {odd: true}: [1, 3, 5], {even: true}: [2, 4] } 

 

责任编辑:赵宁宁 来源: code秘密花园
相关推荐

2017-03-20 16:30:15

Android退出应用优雅方式

2017-10-31 11:55:46

sklearn数据挖掘自动化

2017-02-16 08:41:09

数据Vlookup匹配

2019-09-30 10:12:21

机器学习数据映射

2009-09-08 16:50:12

使用LINQ进行数据转

2022-11-02 14:45:24

Python数据分析工具

2009-03-16 10:29:45

数据挖掘过滤器Access

2023-08-15 16:20:42

Pandas数据分析

2022-03-28 14:08:02

Python数据清洗数据集

2010-03-29 18:31:09

Nginx配置

2009-07-16 14:46:48

jdbc statem

2022-04-08 11:25:58

数据库操作AbilityData

2021-07-27 15:40:39

Python数据清洗函数

2011-10-14 14:24:26

Ruby

2023-10-18 18:38:44

数据校验业务

2021-07-17 22:41:53

Python数据技术

2022-01-26 09:00:00

数据库SnowparkSQL

2022-06-02 13:59:57

数据迁移数据

2017-09-26 19:02:09

PythonInstagram数据分析

2023-09-27 15:34:48

数据编程
点赞
收藏

51CTO技术栈公众号