JavaScriptのsort関数は、配列の要素を並び替えるための強力なツールです。
この記事では、sort関数の基本的な使い方から、カスタムソート関数の作成まで、実例を交えて詳しく説明します。
sort関数の基本
sort関数は、配列のプロトタイプメソッドです。配列の要素を並べるのに使います。
文字列並び替え
デフォルトでは、要素を文字列として比較し、辞書順に並び替えます。
const fruits = ["banana", "apple", "orange", "grape"];
fruits.sort();
console.log(fruits);
// 出力: ["apple", "banana", "grape", "orange"]配列の先頭文字で並び替えられていますね。
数値並び替え
数値も同様にして並び替え見ましょう。
const numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3];
numbers.sort();
console.log(numbers);
// 出力: [1, 1, 2, 3, 3, 4, 5, 5, 6, 9]文字列同様に数値の並び替えが行われていますね。
常に昇順に並び替える際には良いかもしれないのですが、場合に応じて色々な並び替えがしたい場合があります。
任意の並び順にしたいときの方法を見ていきましょう。
カスタムソート関数
sort関数の真価は、カスタムソート関数を使うときに発揮されます。
（少し考え方は難しいですが、使いこなせれば強力な武器になります！＿）
カスタムソート関数をsort関数に渡すことで、並び替えの基準を自由にカスタマイズできます。
実際にコードを見てみましょう。
const numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3];
numbers.sort((a, b) => b - a);
console.log(numbers);
// 出力: [9, 6, 5, 5, 4, 3, 3, 2, 1, 1]sort関数に式を渡しています。
この渡している関数がカスタムソート関数になります。
カスタムソート関数は、2つの引数aとbを受け取ります。
この関数は、比較する2つの要素の大小関係を判断し、返却値に応じて要素の並び替え順番を決めます。
返却値による変換は以下のようになります。
| 返却値 | 説明 |
| < (b-a) (負の値) | aをbの手前に並べる |
| = (b-a) (等しい) | aとbを入れ替えない |
| < (b-a) (正の値) | aをbの後に並べる |
これを利用することで任意の順番で並べることが可能になります。上記のコード例では、b-aの値が正の際には、入れ替えず、負になった際に入れ替えることで降順に要素が並びます。
数値の昇順ソート
const numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3];
numbers.sort((a, b) => a - b);
console.log(numbers);
// 出力: [1, 1, 2, 3, 3, 4, 5, 5, 6, 9]数値の降順ソート
const numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3];
numbers.sort((a, b) => b - a);
console.log(numbers);
// 出力: [9, 6, 5, 5, 4, 3, 3, 2, 1, 1]オブジェクトの配列のソート
const people = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 },
{ name: "Charlie", age: 20 },
];
// 年齢の昇順ソート
people.sort((a, b) => a.age - b.age);
console.log(people);
// 出力: [{ name: "Charlie", age: 20 }, { name: "Alice", age: 25 }, { name: "Bob", age: 30 }]
// 名前の辞書順ソート
people.sort((a, b) => a.name.localeCompare(b.name));
console.log(people);
// 出力: [{ name: "Alice", age: 25 }, { name: "Bob", age: 30 }, { name: "Charlie", age: 20 }]sort関数の破壊的操作
sort関数は、配列を直接変更する破壊的操作であることに注意してください。元の配列を保持したい場合は、事前に配列のコピーを作成しておきましょう。
※破壊的操作とは元になる配列を直接変えてしまう操作のことを言います。
const original = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3];
const sorted = [...original].sort((a, b) => a - b);
console.log(original);
// 出力: [3, 1, 4, 1, 5, 9, 2, 6, 5, 3]
console.log(sorted);
// 出力: [1, 1, 2, 3, 3, 4, 5, 5, 6, 9]まとめ
JavaScriptのsort関数は、配列の並び替えに欠かせないツールです。カスタムソート関数を使いこなすことで、あらゆる基準で配列を並び替えることができます。
是非、sort関数を活用して、配列の並び替えを自在に操ってみてください！
コメント