大家好，我是 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.   } 
9. } 

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] } 

原文地址：https://mp.weixin.qq.com/s?__biz=Mzk0MDMwMzQyOA==&mid=2247491678&idx=1&sn=03e6972176ceff15c368c33410d410e6&chksm=c2e11575f5969c63b4ab53fd532161b1bbecc39e2e8f6ead7e9419e6d8f9b7ef3b2a3d50113e&mpshare=1&s