JavaScriptで複数のプロパティを基準にオブジェクトの配列をソートする方法

はじめに

JavaScriptでは、配列のsort()メソッドに比較関数を渡すことで、複数の条件を組み合わせた柔軟な並べ替えが可能です。本記事では、dnf(完走なし)やisCut(カット)といったフラグを持つオブジェクトの配列を、優先順位に従ってソートする実践的なテクニックを紹介します。

サンプルデータ

次のような、id・score・isCut・dnfの4つのプロパティを持つオブジェクトの配列を用意します。

const arr = [
    { id: 1, score: 1, isCut: false, dnf: false },
    { id: 2, score: 2, isCut: false, dnf: false },
    { id: 3, score: 3, isCut: false, dnf: false },
    { id: 4, score: 4, isCut: false, dnf: false },
    { id: 5, score: 5, isCut: true, dnf: true },
    { id: 6, score: 6, isCut: true, dnf: false },
    { id: 7, score: 7, isCut: true, dnf: false },
    { id: 8, score: 8, isCut: true, dnf: false },
    { id: 9, score: 9, isCut: true, dnf: false },
    { id: 10, score: 0, isCut: false, dnf: false },
    { id: 11, score: -1, isCut: false, dnf: false },
    { id: 12, score: -2, isCut: false, dnf: true },
    { id: 13, score: -3, isCut: false, dnf: false },
    { id: 14, score: -4, isCut: false, dnf: false },
    { id: 15, score: -5, isCut: false, dnf: false },
    { id: 16, score: 10, isCut: true, dnf: false }
];

ソートの要件

この配列を、以下の優先順位で並べ替えます。

• dnfがtrueの場合:オブジェクトは配列の最下部へ移動します。dnfオブジェクト同士はスコア順にソートします。
• isCutがtrueの場合:オブジェクトは最下部寄りに配置されますが、dnfオブジェクトより上位とします。isCutオブジェクト同士もスコア順にソートします。
• その他のオブジェクト:スコア順にソートし、スコアが等しい場合はidで順序を決定します。

実装コード

これらの条件を実現するコードは次のとおりです。

const sortComplex = (arr = []) => {
    arr.sort(function (a, b) {
        // dnf / isCut の組み合わせからグループ番号(0〜3)を算出する
        const order = (dnf, isCut) => {
            return [0, 1, 3, 2][dnf * 2 + isCut];
        };
        // まずグループ順序で比較し、同点ならスコア降順、さらに同点なら id 降順で判定
        return order(a.dnf, a.isCut) - order(b.dnf, b.isCut)
            || b.score - a.score
            || b.id - a.id;
    });
};

sortComplex(arr);
console.log(arr);

コードの仕組み

ポイントとなるのはorder関数です。dnf * 2 + isCutの計算により、2つの真偽値の組み合わせが0〜3のインデックスへ変換され、対応するルックアップテーブル[0, 1, 3, 2]の値がグループ番号として返されます。グループ番号が小さいほど配列の先頭に近い位置に配置されるため、「通常オブジェクト → isCutオブジェクト → dnfオブジェクト」という優先順位が自然に実現します。

また、戻り値では||演算子で比較を連結しており、前段の比較結果が0(同点)のときだけ次の比較へ進みます。そのため「グループ順序 → スコア → id」の優先度で判定されます。元のコードにはidによる同点判定が含まれていませんでしたが、要件どおりの動作を保証するため|| b.id - a.idを追加しています(このサンプルデータではスコアの重複がないため、出力結果には影響しません)。

出力結果

コンソールへの出力は次のようになります。

[
    { id: 4, score: 4, isCut: false, dnf: false },
    { id: 3, score: 3, isCut: false, dnf: false },
    { id: 2, score: 2, isCut: false, dnf: false },
    { id: 1, score: 1, isCut: false, dnf: false },
    { id: 10, score: 0, isCut: false, dnf: false },
    { id: 11, score: -1, isCut: false, dnf: false },
    { id: 13, score: -3, isCut: false, dnf: false },
    { id: 14, score: -4, isCut: false, dnf: false },
    { id: 15, score: -5, isCut: false, dnf: false },
    { id: 16, score: 10, isCut: true, dnf: false },
    { id: 9, score: 9, isCut: true, dnf: false },
    { id: 8, score: 8, isCut: true, dnf: false },
    { id: 7, score: 7, isCut: true, dnf: false },
    { id: 6, score: 6, isCut: true, dnf: false },
    { id: 5, score: 5, isCut: true, dnf: true },
    { id: 12, score: -2, isCut: false, dnf: true }
]

出力を確認すると、通常オブジェクトがスコアの高い順に先頭に並び、その後にisCutオブジェクト、最後にdnfオブジェクトが配置されており、意図したとおりの並べ替えが実現できていることが分かります。この手法は、ランキングやフィードの一覧表示など、複雑な優先順位が必要な場面で幅広く応用できます。