別の配列を基準にオブジェクト配列を並べ替える方法 – JavaScript

JavaScriptでは、別の配列に含まれる要素の順序を基準として、オブジェクトの配列を並べ替えたいケースがあります。例えば、次のような2つの配列があったとします。

const arr1 = ['d','a','b','c'];
const arr2 = [{a:1},{c:3},{d:4},{b:2}];

ここで求められているのは、この2つの配列を受け取る関数を作成し、最初の配列（arr1）の要素の順序に従って、2つ目の配列（arr2）を並べ替えることです。

つまり、arr2内の各オブジェクトが持つキーを、arr1の要素順に合わせてソートします。期待される出力は以下のとおりです。

const output = [{d:4},{a:1},{b:2},{c:3}];

実装の考え方

並べ替えのロジックはシンプルです。Array.prototype.sort() メソッドのコールバック関数の中で、各オブジェクトの最初のキーを Object.keys() で取得し、そのキーが arr1 のどの位置にあるかを indexOf() で調べます。そして、両者のインデックスの差を返すことで、arr1 の順序通りに arr2 が並ぶようにします。

コード例

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

const arr1 = ['d','a','b','c'];
const arr2 = [{a:1},{c:3},{d:4},{b:2}];
const sortArray = (arr1, arr2) => {
    arr2.sort((a, b) => {
        const aKey = Object.keys(a)[0];
        const bKey = Object.keys(b)[0];
        return arr1.indexOf(aKey) - arr1.indexOf(bKey);
    });
};
sortArray(arr1, arr2);
console.log(arr2);

出力結果

このコードを実行すると、コンソールには次のように表示されます。

[ { d: 4 }, { a: 1 }, { b: 2 }, { c: 3 } ]

ご覧のとおり、arr2 のオブジェクトが arr1 の要素順（d、a、b、c）どおりに正しく並べ替えられています。

補足：パフォーマンスを改善する場合

上記の方法は直感的で分かりやすい一方、比較のたびに indexOf() が呼ばれるため、配列が大きい場合は計算量が増えます。パフォーマンスを重視する場合は、あらかじめキーとインデックスの対応を Map オブジェクトに格納しておくと効率的です。

const sortArrayOptimized = (orderArr, targetArr) => {
    const orderMap = new Map(orderArr.map((key, index) => [key, index]));
    return targetArr.sort(
        (a, b) => orderMap.get(Object.keys(a)[0]) - orderMap.get(Object.keys(b)[0])
    );
};

このアプローチなら、キーからインデックスへの参照が O(1) で行えるため、大量のデータを扱う際にも高速に動作します。