おーみんブログ

C#, ASP.NET Core, Unityが大好きです。

トップ > JavaScript > reduceメソッドを用いてグルーピング処理を行う方法

reduceメソッドを用いてグルーピング処理を行う方法

JavaScript

はじめに

JavaScriptでグルーピング処理を行う機会があったので備忘録として残します。

概要

以下のような配列を...

[
  {date: '2022/9/23', title: 'test'},
  {date: '2022/9/23', title: 'test2'},
  {date: '2022/9/22', title: 'test3'},
  {date: '2022/9/22', title: 'test4'},
  {date: '2022/9/21', title: 'test5'}
]

以下のようにグルーピングします。

{
    '2022/9/21': [{date: '2022/9/21', title: 'test5'}],
    '2022/9/22': [{date: '2022/9/22', title: 'test3'},{date: '2022/9/22', title: 'test4'}],
    '2022/9/23': [{date: '2022/9/23', title: 'test'},{date: '2022/9/23', title: 'test2'}]
}

reduceメソッド

reduceメソッドについては以下のサイトの解説が非常に分かりやすかったです。

Array.prototype.reduce() - JavaScript | MDN

サンプルコード

以下がサンプルコードとなります。

reduceメソッドの2つ目の引数は初期値を表します。
今回は{}としています。

[
  {date: '2022/9/23', title: 'test'},
  {date: '2022/9/23', title: 'test2'},
  {date: '2022/9/22', title: 'test3'},
  {date: '2022/9/22', title: 'test4'},
  {date: '2022/9/21', title: 'test5'}
].reduce((previousValue, currentValue) => {
    const date = currentValue.date;
    
    // 同じ日付ならそれをKeyとした配列へ追加、そうでなければ新規に配列を作成
    previousValue[date] = previousValue[date] ? [...previousValue[date], currentValue] : [currentValue]
    return previousValue;
}, {})

おわりに

ちょっとグルーピングするには一手間が必要ですが、調べていたらgroupメソッドというのもあるみたいですね（今はまだほぼ全ブラウザで利用できないみたいですが...）。

Array.prototype.group() - JavaScript | MDN

いずれ使えるようになってくれるといいな～と思いながら、しばらくはこの方法でやっていこうと思います。