【JavaScript】基準配列（標準配列）の値の順序に従って配列を並べ替える方法

JavaScriptでは、動的な配列を、あらかじめ定義しておいた「基準（標準）配列」に格納されている値の順序に従って並べ替えたいケースがあります。

前提となるデータ

たとえば、次のような動的な配列があるとします。

const dbArray = ['Apple','Banana','Mango','Apple','Mango','Mango','Apple'];

そして、並べ替えの基準となる標準配列は次のとおりです。

const stdArray = ['Mango','Apple','Banana','Grapes'];

この場合、dbArray を stdArray の順序に従って並べ替えた結果は、次のようになります。

const resultArray = ['Mango','Mango','Mango','Apple','Apple','Apple','Banana'];

実装コード

ポイントは、sort() メソッドに渡す比較関数の中で、基準配列の indexOf() を使って各要素の順位を求め、その差を返すことです。これにより、標準配列で先に登場する要素ほど前方に配置されます。

const dbArray =
['Apple','Banana','Mango','Apple','Mango','Mango','Apple'];
const stdArray = ['Mango','Apple','Banana','Grapes'];

// 基準配列の順序に従って並べ替える関数
const sortByRef = (arr, ref) => {
    const sorter = (a, b) => {
        return ref.indexOf(a) - ref.indexOf(b);
    };
    arr.sort(sorter);
};

sortByRef(dbArray, stdArray);
console.log(dbArray);

実行結果

コンソールへの出力は次のとおりです。

[
    'Mango',  'Mango',
    'Mango',  'Apple',
    'Apple',  'Apple',
    'Banana'
]

解説のポイント

• indexOf()による順序判定： ref.indexOf(a) は要素 a の基準配列内での位置（インデックス）を返します。このインデックス同士の差を比較関数として返すことで、基準配列の並び順どおりにソートされます。
• 基準配列に存在しない要素の扱い： 基準配列に含まれない要素は -1 を返すため、常に先頭側に配置される点に注意が必要です。必要に応じて、存在しない場合は大きな数値を返すなどの工夫を加えると安全です。
• 元の配列が変更される： sort() は元の配列自体を変更します（破壊的メソッド）。元の配列を保持したい場合は、[...arr].sort(sorter) のようにコピーしてからソートしましょう。