JavaScriptで別の配列の順序に従って配列を並べ替える方法

問題の概要

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

const arr1 = [1, 3, 2, 4, 5, 6];
const arr2 = [1, 2, 5];

ここで求められているのは、このような2つの配列を受け取るJavaScript関数を作成することです。この関数は、arr1の全要素を含みながら、arr2の順序に従って並べ替えた配列を返す必要があります。

ルールを整理すると、以下のようになります。

• 両方の配列に存在する要素は、2番目の配列（arr2）内での出現順に従って先頭へ配置する
• arr1にのみ存在する要素は、元の順序を保ったまま後ろに続ける

サンプルコード

この要件を実現するコードは以下のとおりです。

const arr1 = [1, 3, 2, 4, 5, 6];
const arr2 = [1, 2, 5];

const sortByReference = (arr1, arr2) => {
  const inBoth = el => arr1.indexOf(el) !== -1 && arr2.indexOf(el) !== -1;

  const sorter = (a, b) => {
    // 両方の配列に存在する要素同士の場合
    if (inBoth(a) && inBoth(b)) {
      return arr1.indexOf(a) - arr2.indexOf(b);
    }
    // aだけが両方に存在する場合はaを先に
    if (inBoth(a)) {
      return -1;
    }
    // bだけが両方に存在する場合はbを先に
    if (inBoth(b)) {
      return 1;
    }
    // それ以外は順序を維持
    return 0;
  };

  arr1.sort(sorter);
};

sortByReference(arr1, arr2);
console.log(arr1);

実行結果

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

[ 1, 2, 5, 3, 4, 6 ]

ご覧のとおり、arr2に含まれる「1、2、5」がその順序どおり先頭に移動し、残りの「3、4、6」は元の並び順を保ったまま後ろに配置されています。

コードの解説

inBothは、ある要素がarr1とarr2の両方に存在するかどうかを判定するヘルパー関数です。indexOf()の戻り値が-1でなければ、その要素が配列内に存在することを意味します。

sorterは、Array.prototype.sort()に渡される比較関数です。sort()は、比較関数が負の値を返せばaをbより前に、正の値を返せばbをaより前に配置します。この仕組みを利用して、「両方の配列に存在する要素を優先して前方へ」という並べ替えを実現しています。

なお、sort()は元の配列を直接変更する破壊的なメソッドである点に注意してください。元の配列を保持しておきたい場合は、スプレッド構文やslice()などで事前にコピーを作成してからソートすると安全です。

補足：より厳密にarr2の順序を反映させたい場合

共通要素同士を比較する際の戻り値を、次のようにarr2内のインデックス差に置き換えると、常にarr2の並び順どおりにソートでき、より意図通りの結果が得られます。

return arr2.indexOf(a) - arr2.indexOf(b);