JavaScriptで2次元配列を値ごとにグループ化して並べ替える方法

はじめに

本記事では、JavaScriptを使って2次元配列内の同じ数値をグループ化し、その結果を昇順に並べ替える方法を解説します。

まず、次のような数値の2次元配列があったとします。

const arr = [
    [1, 3, 2],
    [5, 2, 1, 4],
    [2, 1]
];

ここで求められるのは、同じ数値どうしをそれぞれ独立したサブ配列にまとめ、さらにグループ化された配列全体を昇順に並べ替えるJavaScript関数です。

最終的に、新しい配列は次のようになります。

const output = [
    [1, 1, 1],
    [2, 2, 2],
    [3],
    [4],
    [5]
];

実装コード

この処理を実現するコードは以下のとおりです。

const arr = [
    [1, 3, 2],
    [5, 2, 1, 4],
    [2, 1]
];
const groupAndSort = arr => {
    const res = [];
    const map = Object.create(null);
    Array.prototype.forEach.call(arr, item => {
        item.forEach(el => {
            if (!(el in map)) {
                map[el] = [];
                res.push(map[el]);
            };
            map[el].push(el);
        });
    });
    res.sort((a, b) => {
        return a[0] - b[0];
    });
    return res;
};
console.log(groupAndSort(arr));

出力結果

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

[ [ 1, 1, 1 ], [ 2, 2, 2 ], [ 3 ], [ 4 ], [ 5 ] ]

コードの解説

この実装のポイントを順番に見ていきましょう。

1. マップの作成： Object.create(null) を使うことで、プロトタイプチェーンを持たないプレーンなオブジェクトを生成しています。これにより、toString などの組み込みプロパティ名と衝突するリスクを回避できます。

2. グループ化： 外側の forEach で各サブ配列を、内側の forEach で各要素を走査します。初めて登場する値の場合は、新しい空のサブ配列を作成し、結果配列 res に登録します。以降、同じ値が出現するたびに、対応するサブ配列へその値を追加していきます。

3. 並べ替え： グループ化が完了したら、sort() メソッドのコールバックで各サブ配列の先頭要素（＝グループを代表する値）同士を比較し、配列全体を昇順に整列させます。

このように、マップによる値の出現管理とソート処理を組み合わせることで、シンプルかつ効率的にグループ化と並べ替えを実現できます。