大家好，我是 ConardLi ，今天我們一起來看一個數(shù)據(jù)分組的小技巧。

對數(shù)據(jù)進(jìn)行分組，是我們在開發(fā)中經(jīng)常會遇到的需求，使用 JavaScript 進(jìn)行數(shù)據(jù)分組的方式也有很多種，但是由于沒有原生方法的支持，我們自己實現(xiàn)的數(shù)據(jù)分組函數(shù)通常都比較冗長而且難以理解。

不過，告訴大家一個好消息，一個專門用來做數(shù)據(jù)分組的提案 Array.prototype.groupBy 已經(jīng)到達(dá) Stage 3 啦!

在看這個提案，之前，我們先來回顧下我們以前在 JavaScript 里是怎么分組的。

以前的方式

假設(shè)我們有下面一組數(shù)據(jù)：

const items = [ 
  { 
    type: 'clothes', 
    value: '👔', 
  }, 
  { 
    type: 'clothes', 
    value: '👕', 
  }, 
  { 
    type: 'clothes', 
    value: '👗', 
  }, 
  { 
    type: 'animal', 
    value: '🐷', 
  }, 
  { 
    type: 'animal', 
    value: '🐸', 
  }, 
  { 
    type: 'animal', 
    value: '🐒', 
  }, 
]; 

我們希望按照 type 分組成下面的格式：

const items = { 
  clothes: [ 
    { 
      type: 'clothes', 
      value: '👔', 
    }, 
    { 
      type: 'clothes', 
      value: '👕', 
    }, 
    { 
      type: 'clothes', 
      value: '👗', 
    }, 
  ], 
  animal: [ 
    { 
      type: 'animal', 
      value: '🐷', 
    }, 
    { 
      type: 'animal', 
      value: '🐸', 
    }, 
    { 
      type: 'animal', 
      value: '🐒', 
    }, 
  ], 
}; 

我們可能會用到下面的寫法：

for 循環(huán)

最直接而且容易理解的方法，就是代碼有點多。

const groupedBy = {}; 
 
for (const item of items) { 
  if (groupedBy[item.type]) { 
    groupedBy[item.type].push(item); 
  } else { 
    groupedBy[item.type] = [item]; 
  } 
} 

reduce

使用 Array.protoype.reduce 雖然語法看起來簡單，但是太難讀了。

items.reduce( 
  (acc, item) => ({ 
    ...acc, 
    [item.type]: [...(acc[item.type] ?? []), item], 
  }), 
  {}, 
); 

我們稍微改造的容易理解一點，語法就跟上面的 for 循環(huán)差不多了：

items.reduce((acc, item) => { 
  if (acc[item.type]) { 
    acc[item.type].push(item); 
  } else { 
    acc[item.type] = [item]; 
  } 
 
  return acc; 
}, {}); 

filter

使用 Array.prototype.filter，代碼看起來很容易閱讀，但是性能很差，你需要對數(shù)組進(jìn)行多次過濾，而且如果 type 屬性值比較多的情況下，還需要做更多的 filter 操作。

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

其他

如果你既不想用 reduce，還想用到函數(shù)式寫法，你可能會寫出下面的代碼：

Object.fromEntries( 
  Array.from(new Set(items.map(({ type }) => type))).map((type) => [ 
    type, 
    items.filter((item) => item.type === type), 
  ]), 
); 

是不是很讓人崩潰 🤯～

Array.prototype.groupBy

好了，如果使用 Array.prototype.groupBy，你只需要下面這一行代碼：

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

groupBy 的回調(diào)中一共有三個參數(shù)：

• 參數(shù)1：數(shù)組遍歷到的當(dāng)前對象
• 參數(shù)2：index 索引
• 參數(shù)3：原數(shù)組

const array = [1, 2, 3, 4, 5]; 
 
// groupBy groups items by arbitrary key. 
// In this case, we're grouping by even/odd keys 
array.groupBy((num, index, array) => { 
  return num % 2 === 0 ? 'even': 'odd'; 
}); 

另外，你還可以用 groupByToMap，將數(shù)據(jù)分組為一個 Map 對象。

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