JavaScriptでオブジェクト配列をindexプロパティの値に基づいて並べ替える方法

はじめに

JavaScriptでは、オブジェクトが格納された配列を特定のプロパティの値に基づいて並べ替えたい場面がよくあります。本記事では、各オブジェクトが持つ index プロパティの値を基準に配列を昇順にソートし、その結果を文字列の配列へ変換する方法を解説します。

対象となるデータ

例として、次のようなオブジェクトの配列を想定します。

const arr = [
    {
        'name': 'd',
        'index': 3
    },
    {
        'name': 'c',
        'index': 2
    },
    {
        'name': 'a',
        'index': 0
    },
    {
        'name': 'b',
        'index': 1
    }
];

この配列には、name と index という2つのプロパティを持つオブジェクトが含まれています。name は文字列、index は数値です。

要件

求められる処理は以下の通りです。

• 引数として上記のような配列を受け取る関数を作成する。
• オブジェクトの index プロパティの値に従って、配列を昇順に並べ替える。
• 並べ替えた結果から、各オブジェクトの name プロパティの値だけを取り出し、文字列の配列として返す。

したがって、先ほどの配列に対してこの処理を実行すると、最終的な出力は次のようになります。

const output = ["a", "b", "c", "d"];

実装例

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

const arr = [
    {
        'name': 'd',
        'index': 3
    },
    {
        'name': 'c',
        'index': 2
    },
    {
        'name': 'a',
        'index': 0
    },
    {
        'name': 'b',
        'index': 1
    }
];

const sortAndMap = (arr = []) => {
    // 元の配列を変更しないようコピーを作成
    const copy = arr.slice();
    
    // indexプロパティの差で比較するソート関数
    const sorter = (a, b) => {
        return a['index'] - b['index'];
    };
    
    copy.sort(sorter);
    
    // ソート済み配列からnameプロパティのみを抽出
    const res = copy.map(({ name, index }) => {
        return name;
    });
    
    return res;
};

console.log(sortAndMap(arr));

コードの解説

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

• 配列のコピー: slice() を使うことで、元の配列 arr を破壊的に変更することを防いでいます。sort() は元の配列を直接書き換えるメソッドなので、副作用を避けたい場合にはコピーが有効です。
• 比較関数: a['index'] - b['index'] の結果が負なら a が先、正なら b が先に来ます。これにより index の小さい順（昇順）に並びます。
• mapによる変換: 分割代入 ({ name, index }) を使って各オブジェクトから name プロパティを取り出し、新しい文字列配列を生成しています。

出力結果

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

[ 'a', 'b', 'c', 'd' ]

まとめ

sort() と map() を組み合わせれば、オブジェクト配列を任意のプロパティで並べ替え、必要な値だけを簡単に抽出できます。降順にしたい場合は、比較関数を b['index'] - a['index'] と逆にするだけで対応可能です。