JavaScriptでネストされた配列の要素数に基づいてオブジェクトの配列をソートする方法

JavaScriptでは、オブジェクトの中にネストされた配列を含むデータ構造を扱うことがよくあります。例えば、次のような「elements」という配列プロパティを持つオブジェクトの配列を考えてみましょう。

const arr = [
    { name: "Cat1", elements: [
    { name: name, id: id } ]
},
{ name: "Cat2", elements: [
    { name: name, id: id },
    { name: name, id: id },
    { name: name, id: id } ]
},
{ name: "Cat3", elements: [
    { name: name, id: id },
    { name: name, id: id } ]
    }
];

やりたいこと

このような配列を受け取り、各オブジェクトが持つ「elements」配列の要素数が多いものほど上位に来るように並べ替える関数を作成します。

つまり、ソート後の配列は次のようになることが期待されます。

const output = [
    { name: "Cat2", elements: [
        { name: name, id: id },
        { name: name, id: id },
        { name: name, id: id } ]
    },
    { name: "Cat3", elements: [
        { name: name, id: id },
        { name: name, id: id } ]
    },
    { name: "Cat1", elements: [
        { name: name, id: id } ]
    }
];

実装コード

この並べ替えは、配列の sort() メソッドと比較関数を組み合わせることで簡単に実現できます。比較関数内で、両オブジェクトの「elements」配列の長さを比較し、その結果に応じて -1 または 1 を返すだけです。

具体的なコードは以下のとおりです。

const arr = [
    { "name": "Cat1", elements: [
    { "name": "name", "id": "id" } ]
    },
    { "name": "Cat2", elements: [
    { "name": "name", "id": "id" },
    { "name": "name", "id": "id" },
    { "name": "name", "id": "id" } ]
    },
    { "name": "Cat3", elements: [
    { "name": "name", "id": "id" },
    { "name": "name", "id": "id" } ]
    }
];
const sorter = (a, b) => {
    if(a.elements.length > b.elements.length) {
        return -1;
    } else {
        return 1;
    }
}
arr.sort(sorter);
console.log(JSON.stringify(arr, undefined, 4));

実行結果

コンソールに出力される結果は以下のようになります。要素数の多い「Cat2」が先頭になり、「Cat3」、「Cat1」の順に並んでいるのが確認できます。

[
    {
        "name": "Cat2",
        "elements": [
            {
                 "name": "name",
                 "id": "id"
            },
            {
                 "name": "name",
                 "id": "id"
            },
            {
                 "name": "name",
                 "id": "id"
            }
        ]
    },
    {
        "name": "Cat3",
        "elements": [
            {
                 "name": "name",
                 "id": "id"
            },
            {
                 "name": "name",
                 "id": "id"
            }
        ]
    },
    {
        "name": "Cat1",
        "elements": [
            {
                 "name": "name",
                 "id": "id"
            }
        ]
    }
]

補足：より簡潔な書き方

上記の比較関数は、減算を使ってさらに簡潔に記述することもできます。

arr.sort((a, b) => b.elements.length - a.elements.length);

この場合、b の要素数から a の要素数を引くことで、降順（要素数の多い順）に並べ替えられます。結果は先ほどのコードとまったく同じになります。