【JavaScript】2つのプロパティを使ってオブジェクト配列を並べ替える方法

問題の概要

次のようなオブジェクトの配列があるとします。

const arr = [
    { resVal: "25FA15", resFlow: 49, resName: "Rendimiento Tri-Seal Completo", resPhoto: "Tri-Sealseries.png", resHP: 1.5 },
    { resVal: "25FA2", resFlow: 52, resName: "Rendimiento Tri-Seal Completo", resPhoto: "Tri-Sealseries.png", resHP: 2 },
    { resVal: "45FA2", resFlow: 53, resName: "Rendimiento Hi-Cap Completo", resPhoto: "HighCapseries.png", resHP: 2 },
    { resVal: "35FA2", resFlow: 59, resName: "Rendimiento Hi-Cap Completo", resPhoto: "HighCapseries.png", resHP: 2 }
];

このような配列を受け取り、次の2つの条件に基づいて並べ替えを行うJavaScript関数を作成する必要があります。

• resHP の値が小さいものから先に（昇順）
• resHP が同じ場合には、resFlow の値が大きいものから先に（降順）

アプローチ

この問題では、比較関数の中で ||（論理OR）演算子 を使った「チェーン方式」を採用します。これにより、複数のキーとそれぞれのソート順序を、たった1行の比較関数で簡潔に指定できます。

今回の配列は、次の優先順位で並べ替えられます。

• 第1条件：resHP 昇順
• 第2条件：resFlow 降順

仕組みのポイントは「差分（デルタ）」の計算です。まず a.resHP - b.resHP を計算し、その結果が0でなければ、その差がそのまま戻り値となり、Array.prototype.sort() が要素の順序を決定します。結果が0の場合（つまり2つの値が等しい場合）は、続く b.resFlow - a.resFlow が評価され、その差が返されます。

なお、a.resHP - b.resHP が負の数なら a が先にくるため resHP は昇順になり、b.resFlow - a.resFlow が負の数になるのは a の resFlow が大きいときなので、resFlow は降順に並びます。

コード例

実際のコードは次のようになります。

const arr = [
    { resVal: "25FA15", resFlow: 49, resName: "Rendimiento Tri-Seal Completo", resPhoto: "Tri-Sealseries.png", resHP: 1.5 },
    { resVal: "25FA2", resFlow: 52, resName: "Rendimiento Tri-Seal Completo", resPhoto: "Tri-Sealseries.png", resHP: 2 },
    { resVal: "45FA2", resFlow: 53, resName: "Rendimiento Hi-Cap Completo", resPhoto: "HighCapseries.png", resHP: 2 },
    { resVal: "35FA2", resFlow: 59, resName: "Rendimiento Hi-Cap Completo", resPhoto: "HighCapseries.png", resHP: 2 }
];

const sortByTwo = (arr = []) => {
    arr.sort((a, b) => {
        return a.resHP - b.resHP || b.resFlow - a.resFlow;
    });
};

sortByTwo(arr);
console.log(arr);

出力結果

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

[
    {
        resVal: '25FA15',
        resFlow: 49,
        resName: 'Rendimiento Tri-Seal Completo',
        resPhoto: 'Tri-Sealseries.png',
        resHP: 1.5
    },
    {
        resVal: '35FA2',
        resFlow: 59,
        resName: 'Rendimiento Hi-Cap Completo',
        resPhoto: 'HighCapseries.png',
        resHP: 2
    },
    {
        resVal: '45FA2',
        resFlow: 53,
        resName: 'Rendimiento Hi-Cap Completo',
        resPhoto: 'HighCapseries.png',
        resHP: 2
    },
    {
        resVal: '25FA2',
        resFlow: 52,
        resName: 'Rendimiento Tri-Seal Completo',
        resPhoto: 'Tri-Sealseries.png',
        resHP: 2
    }
]

出力結果を見ると、まず resHP が最も小さい 1.5 のオブジェクトが先頭に配置され、残りの resHP が 2 のオブジェクト同士は resFlow の降順（59 → 53 → 52）に並んでいることが確認できます。このように || 演算子による比較関数のチェーン を活用すれば、3つ以上のプロパティを使ったソートにも同じ考え方を簡単に応用できるので、覚えておくと非常に便利です。