【JavaScript】別の配列の内容に基づいて配列を並べ替える方法

はじめに

JavaScript開発では、ある配列の内容を基準にして別の配列を並べ替えたいケースがあります。例えば、「特定の要素を配列の先頭に移動させ、それ以外の要素は元の順序のまま維持したい」という要件はよく見られます。

この記事では、基準となる sortOrder 配列に含まれる要素を元の配列の先頭に配置し、残りの要素は元の順序を保つソート関数の実装方法を解説します。

問題の例

次のように、元の配列と並べ替えの基準となる配列が与えられているとします。

const originalArray = ['Apple', 'Cat', 'Fan', 'Goat', 'Van', 'Zebra'];
const sortOrder = ['Zebra', 'Van'];

この場合、'Zebra' と 'Van' を先頭に移動させ、その他の要素は元の相対的な順序を維持したまま並べ替えます。

実装例

以下のコードでは、Array.prototype.sort() メソッドにカスタム比較関数を渡すことでこの要件を実現しています。

const originalArray = ['Apple', 'Cat', 'Fan', 'Goat', 'Van', 'Zebra'];
const sortOrder = ['Zebra', 'Van'];

const sorter = (a, b) => {
  // aがsortOrderに含まれていれば優先的に前へ
  if (sortOrder.includes(a)) {
    return -1;
  }
  // bがsortOrderに含まれていればaより後ろへ
  if (sortOrder.includes(b)) {
    return 1;
  }
  // どちらも含まれていなければ順序を変更しない
  return 0;
};

originalArray.sort(sorter);
console.log(originalArray);

コードの解説

比較関数 sorter の動作は以下の通りです。

• 第1引数 a が sortOrder に含まれる場合、-1 を返して b より前に配置します。
• 第2引数 b が sortOrder に含まれる場合、1 を返して a より後ろに配置します。
• どちらも sortOrder に含まれない場合、0 を返すことで元の相対的な順序を維持します。

出力結果

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

[ 'Zebra', 'Van', 'Apple', 'Cat', 'Fan', 'Goat' ]

補足：sortOrder内の順序も正確に反映したい場合

上記の実装では、sortOrder に複数の要素が指定されている場合、その内部の順序までは保証されません。sortOrder に書いた通りの順序で先頭に配置したい場合は、indexOf() を使った次の比較関数が有効です。

const sorter = (a, b) => {
  const indexA = sortOrder.indexOf(a);
  const indexB = sortOrder.indexOf(b);

  // どちらもsortOrderに含まれない場合は元の順序を維持
  if (indexA === -1 && indexB === -1) return 0;
  // aのみ含まれない場合はbを先へ
  if (indexA === -1) return 1;
  // bのみ含まれない場合はaを先へ
  if (indexB === -1) return -1;
  // どちらも含まれる場合はsortOrderの順序に従う
  return indexA - indexB;
};

このように、用途に応じて比較関数を工夫することで、柔軟な並べ替え処理を実現できます。