JavaScriptで配列を同じ値ごとにグループ化してカウントする方法

はじめに

文字列や数値のリテラルを含む配列の中に、重複した値がいくつか存在するケースを考えてみましょう。

const array = ['day', 'night', 'afternoon', 'night', 'noon', 'night', 'noon', 'day', 'afternoon', 'day', 'night'];

ここで必要なのは、このような配列を受け取り、重複している要素をサブ配列の最初の要素としてグループ化し、元の配列における出現回数を2番目の要素として格納した新しい配列を返す関数 groupSimilar() を作成することです。

上記の例の場合、期待される出力は以下のようになります。

[
  [ 'day', 3 ],
  [ 'night', 4 ],
  [ 'afternoon', 2 ],
  [ 'noon', 2 ]
]

コード例

それでは、実際にこの関数を実装してみましょう。配列の反復処理には Array.prototype.reduce() を使用し、各値がどのインデックス位置にあるかを追跡するために Map オブジェクトを活用します。

const array = ['day', 'night', 'afternoon', 'night', 'noon', 'night',
'noon', 'day', 'afternoon', 'day', 'night'];
const groupSimilar = arr => {
    return arr.reduce((acc, val) => {
        const { data, map } = acc;
        const ind = map.get(val);
        if(map.has(val)){
            data[ind][1]++;
        } else {
            map.set(val, data.push([val, 1])-1);
        }
        return { data, map };
    }, {
        data: [],
        map: new Map()
    }).data;
};
console.log(groupSimilar(array));

処理の流れ

• アキュムレータ（acc）には、結果を格納する data 配列と、値とインデックスの対応を管理する map の2つを持たせています。
• 各要素（val）を走査し、すでに map に登録済みであれば、対応する data のカウントを1つ増やします。
• 未登録の値であれば、[val, 1] を新規に追加し、そのインデックスを map に記録します。

この仕組みにより、配列を一度だけ走査するだけでグループ化とカウントを同時に完了できるため、パフォーマンス面でも効率的です。

実行結果

コンソールには以下のように出力されます。

[ [ 'day', 3 ], [ 'night', 4 ], [ 'afternoon', 2 ], [ 'noon', 2 ] ]