【JavaScript】数字を小さい順に並べる sort関数

この記事では、配列の並び替える(アルファベット順や、数字の大小順にする方法)を解説します。

使用する関数

使用する関数は、sort()です。

アルファベット順に並び替え

配列Arrayに対して、Array.sort()とするだけでアルファベット順に並び替えができます。

サンプル配列

const Array = ["banana", "apple", "cherry"];

小さい順に並び替えるコード

Array.sort();

出力結果

["apple", "banana", "cherry"]

数字の並び替え

数値を小さい順に並べ替えるには、sortメソッドに「比較関数」を渡して、並べ替えの基準を指定する必要があります。

返り値が負の数：第1引数を第2引数よりも前に置く
返り値が正の数：第2引数を第1引数よりも前に置く
返り値がゼロ：並び順を変えない

小さい順に並び替えるコード

Array.sort((a, b) => a - b);

例1

サンプル配列

const Numbers = [10, 5, 20, 1]

使用するコード

Numbers.sort((a,b) => a-b);

最初の比較

a = 10, b = 5
比較関数 (a, b) => a - b によって 10 - 5 = 5 が計算されます。
結果が正の数なので、5 を 10 の前に置きます。
現在の配列状態：[5, 10, 20, 1]

次の比較

a = 10, b = 20
比較関数 (a, b) => a - b によって 10 - 20 = -10 が計算されます。
結果が負の数なので、順序を変更せず、10 は 20 の前にそのまま置かれます。
現在の配列状態：[5, 10, 20, 1]

次の比較

a = 20, b = 1
比較関数 (a, b) => a - b によって 20 - 1 = 19 が計算されます。
結果が正の数なので、1 を 20 の前に置きます。
現在の配列状態：[5, 10, 1, 20]

次の比較

a = 10, b = 1
比較関数 (a, b) => a - b によって 10 - 1 = 9 が計算されます。
結果が正の数なので、1 を 10 の前に置きます。
現在の配列状態：[5, 1, 10, 20]

次の比較

a = 5, b = 1
比較関数 (a, b) => a - b によって 5 - 1 = 4 が計算されます。
結果が正の数なので、1 を 5 の前に置きます。

sortメソッドは、小さい順になるまで並び替えを繰り返します

最終的な配列状態

[1, 5, 10, 20]

最終結果
この流れにより、配列は [1, 5, 10, 20] という昇順に並べ替えられます。

元の配列を直接変更（破壊的操作）をしてしまうので注意

const array1 = [3, 2, 1];
const array2 = array1.sort();

console.log(array1); // [1, 2, 3]
console.log(array2); // [1, 2, 3]
array1にsortを使用した瞬間、その後のarray1はすべて並び替えられたものとなる。