JavaScriptで別の配列を基準に配列を並べ替える方法

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

const input = ['S-1','S-2','S-3','S-4','S-5','S-6','S-7','S-8'];
const sortingArray = ["S-1", "S-5", "S-2", "S-6", "S-3", "S-7", "S-4", "S-8"];

このように「並べ替えたい配列」と「基準となる順序を持った配列」が別々に存在するケースは、実際の開発でもよくあります。
そこで今回は、1つ目の配列の要素を、2つ目の配列内での位置（インデックス）に従って並べ替えるJavaScript関数を作成してみましょう。

具体的には、2つの配列を第1引数・第2引数として受け取り、1つ目の配列を2つ目の配列の順序どおりにソートする関数を実装します。

実装例

const input = ['S-1','S-2','S-3','S-4','S-5','S-6','S-7','S-8'];
const sortingArray = ["S-1", "S-5", "S-2", "S-6", "S-3", "S-7", "S-4", "S-8"];

const sortByReference = (arr1 = [], arr2 = []) => {
   const sorter = (a, b) => {
      const firstIndex = arr2.indexOf(a);
      const secondIndex = arr2.indexOf(b);
      return firstIndex - secondIndex;
   };
   arr1.sort(sorter);
};

sortByReference(input, sortingArray);

console.log(input);

出力結果

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

[
  'S-1',
  'S-5',
  'S-2',
  'S-6',
  'S-3',
  'S-7',
  'S-4',
  'S-8'
]

コードの解説

この実装のポイントは、sort()メソッドに渡している比較関数（sorter）です。

• arr2.indexOf(a) で、要素 a が基準配列内のどこに位置するかを取得します。
• 同様に b のインデックスも取得し、その差を返します。
• 差が負なら a が先、正なら b が先に来るため、結果として1つ目の配列全体が2つ目の配列の順序に沿って並び替えられます。

より高速な代替案：Mapを活用する

indexOf() は呼び出しごとに先頭から線形探索を行うため、配列の要素数が多い場合は処理が遅くなる可能性があります。そのような場合、あらかじめ基準配列の「値 → インデックス」の対応を Map にキャッシュしておくと、参照がO(1)になり大幅に効率化できます。

const sortByReferenceFast = (arr1 = [], arr2 = []) => {
   // 値とインデックスの対応表を一度だけ作成
   const orderMap = new Map(arr2.map((value, index) => [value, index]));
   arr1.sort((a, b) => orderMap.get(a) - orderMap.get(b));
};

sortByReferenceFast(input, sortingArray);
console.log(input); // 同じ結果が出力される

小規模なデータでは前者のシンプルな実装で十分ですが、数千件以上の要素を扱う場合は後者の Map 版を選ぶとよいでしょう。状況に応じて使い分けてください。