【JavaScript】配列をアルファベット順にソートし、指定した要素を常に先頭に配置する方法

本記事では、リテラル値の配列を第一引数に、文字列を第二引数として受け取るJavaScript関数の実装方法を解説します。

この関数には、次のような要件があります。

• 配列をアルファベット順にソートする
• ただし、第二引数で渡された文字列が配列内に存在する場合は、その文字列の内容に関わらず常に先頭の要素として配置する

実装コード

以下が実際のコードです。

const arr = ['Apple', 'Orange', 'Grapes', 'Pineapple', 'None', 'Dates'];

const sortKeepingConstants = (arr = [], text = '') => {
   const sorter = (a, b) => {
      return (b === text) - (a === text) || a.localeCompare(b);
   }
   arr.sort(sorter);
};

sortKeepingConstants(arr, 'None');
console.log(arr);

出力結果

コンソールには次のように出力されます。「None」だけが先頭に移動し、残りの要素はアルファベット順に並んでいることが確認できます。

[ 'None', 'Apple', 'Dates', 'Grapes', 'Orange', 'Pineapple' ]

仕組みの解説

このソートの鍵となっているのは、Array.prototype.sort() に渡している比較関数です。

(b === text) - (a === text) || a.localeCompare(b)

動作の流れは以下のとおりです。

• (b === text) - (a === text):ブール値同士の減算により、a が対象文字列なら -1(a を手前に)、b が対象文字列なら 1(b を手前に)となります。どちらでもなければ 0 になります。
• a.localeCompare(b):前段の結果が 0 の場合(どちらも対象文字列ではない場合)にのみ評価され、ロケールを考慮したアルファベット順の比較が行われます。

このように論理和演算子(||)の短絡評価を利用することで、「特定の要素を最優先し、それ以外は通常のアルファベット順」という柔軟なソートを簡潔に実現できます。

補足：元の配列を変更したくない場合

sort() は元の配列を直接書き換える破壊的なメソッドです。元の配列を保持したい場合は、ES2023で追加された toSorted() を使うと安全です。

const sorted = [...arr].sort(sorter); // スプレッド構文でコピーしてからソート
// または
const sorted2 = arr.toSorted(sorter); // ES2023以降