学ぶ sort() メソッドによる配列のソート | 高度な配列メソッドと変換

メニューを表示するにはスワイプしてください

sort()

sort() メソッドは、配列の要素をその場で並べ替え、更新された配列を返します。デフォルトでは文字列の並べ替えに適していますが、数値の場合は予期しない動作をすることがあります。

デフォルトのソート動作

sort() メソッドは、デフォルトで要素を文字列に変換し、Unicode順で比較します。そのため、文字列には自然に動作しますが、数値の配列では比較関数を指定しないと予期しない結果になることがあります。


              123
            
const numbers = [1, 2, 10, 21];
numbers.sort();
console.log(numbers); // Output: 1, 10, 2, 21

数値を正しくソートするには、比較関数を使用します。


              1234
            
const numbers = [1, 2, 10, 21];

const ascending = [...numbers].sort((a, b) => a - b);
console.log(ascending); // Output: 1, 2, 10, 21

カスタムソート順

特定のニーズに合わせてソートを調整するには、コールバック関数を使用します。この関数は比較関数と呼ばれ、ソートのロジックを決定します。数値と文字列のカスタムソートを見てみましょう。基本構文：

array.sort((a, b) => {
  // Callback body
});

a は最初の要素；
b は2番目の要素。

数値のソート

この場合、比較関数は要素 a と b の関係に基づいて昇順および降順を決定。


              1234567
            
const numbers = [34, 25, 19, 1, 92, 2, 3];

const ascendingNumbers = [...numbers].sort((a, b) => a - b);
console.log(ascendingNumbers); // Output: 1, 2, 3, 19, 25, 34, 92

const descendingNumbers = [...numbers].sort((a, b) => b - a);
console.log(descendingNumbers); // Output: 92, 34, 25, 19, 3, 2, 1

文字列のソート

localeCompare() メソッドはアルファベット順のソートを可能にし、昇順・降順のカスタマイズに対応。


              1234567
            
const employees = ["Antonia", "Rene", "Casey", "Lorraine", "Shelia"];

const inAlphabetOrder = [...employees].sort((a, b) => a.localeCompare(b));
console.log(inAlphabetOrder); // Antonia, Casey, Lorraine, Rene, Shelia

const inReversedOrder = [...employees].sort((a, b) => b.localeCompare(a));
console.log(inReversedOrder); // Shelia, Rene, Lorraine, Casey, Antonia