【JavaScript】最初の要素の値に基づいてサブ配列をグループ化する方法

はじめに

まず、次のような数値のペアからなる配列の配列（ネストされた配列）があるとします。

const arr = [[1, 45], [1, 34], [1, 49], [2, 34], [4, 78], [2, 67], [4, 65]];

各サブ配列は必ず2つの要素を持つものとします。ここで求められるのは、「先頭の要素が同じ値であるサブ配列」の2番目の要素をすべて集めてグループ化し、新しい配列を構築する関数を書くことです。

したがって、上記の配列に対する期待される出力は次のようになります。

const output = [
    [45, 34, 49],
    [34, 67],
    [78, 65]
];

reduce()とMap()を使った実装方法

このようなグループ化処理には、Array.prototype.reduce()メソッドとMap()オブジェクトを組み合わせるのが効果的です。Mapを使うことで、先頭の値と結果配列内のインデックスを対応付けて管理でき、効率よくデータを整理できます。

以下が実際のコード例です。

const arr = [[1, 45], [1, 34], [1, 49], [2, 34], [4, 78], [2, 67], [4, 65]];
const constructSimilarArray = (arr = []) => {
    const creds = arr.reduce((acc, val) => {
        const { map, res } = acc;
        if(!map.has(val[0])){
            map.set(val[0], res.push([val[1]]) - 1);
        }else{
            res[map.get(val[0])].push(val[1]);
        };
        return { map, res };
    }, {
        map: new Map(),
        res: []
    });
    return creds.res;
};
console.log(constructSimilarArray(arr));

コードの解説

• reduce()の初期値として、空のMap（map）と空の結果配列（res）を持つオブジェクトを用意します。
• 各サブ配列（val）について、先頭の要素 val[0] がMapにまだ存在しない場合は、2番目の要素だけを含む新しい配列をresに追加し、そのインデックスをMapに登録します。
• 先頭の要素が既にMapに登録されている場合は、対応するインデックスを取得し、res内の該当する配列に2番目の要素をpushします。
• 最後に creds.res を返すことで、グループ化された配列を受け取ることができます。

実行結果

このコードを実行すると、コンソールには次のように表示されます。

[ [ 45, 34, 49 ], [ 34, 67 ], [ 78, 65 ] ]

先頭の値「1」「2」「4」ごとに、それぞれのサブ配列の2番目の要素が正しくまとめられていることが確認できます。この手法は、キーごとのデータ集計や分類処理など、さまざまな場面で応用できる汎用的なパターンです。