中学生でもわかる!JavaScriptの.sort()メソッドを使いこなそう!

programming
学習コースキャンペーンバナー

こんにちは、フローです。

今回はJavaScriptの配列メソッドである

.sort()について学びましょう。

配列の要素を特定の順序で並び替える際に使用します。

配列を並べ替えることは、プログラミングで非常によくあるタスクなので、

このメソッドはとても重要です。

.sort()とは?

配列の要素をある基準に従って並べ替えるためのJavaScriptの組み込み関数です。

デフォルトでは、要素は文字列として比較され、

その結果、アルファベット順(実際にはUnicode順)で並び替えられます。

どんな時に使うのか?

.sort()は、配列の要素を特定の順序で並べ替えたいときに使用します。

例えば、名前のリストをアルファベット順に並べ替えたり、

数値の配列を昇順または降順に並べ替えたりすることができます。

パターン1:文字列の配列をソートする

let names = ['Taro', 'Hanako', 'Yoshio', 'Akiko'];
names.sort();
console.log(names); // ['Akiko', 'Hanako', 'Taro', 'Yoshio']

このコードでは、名前の配列をアルファベット順にソートしています。

パターン2:数値の配列をソートする

let numbers = [40, 100, 1, 5, 25, 10];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 5, 10, 25, 40, 100]

このコードでは、数値の配列を昇順にソートしています。

数値のソートには、比較関数を引数として渡す必要があります。

パターン3:オブジェクトの配列を特定のプロパティでソートする

let students = [
  { name: "Taro", score: 85 },
  { name: "Hanako", score: 90 },
  { name: "Yoshio", score: 78 }
];
students.sort((a, b) => b.score - a.score);
console.log(students);

このコードでは、スコアの高い順(降順)に学生の配列をソートしています。

.sort()の注意点

元の配列を直接変更します

JavaScriptの.sort()メソッドは元の配列を直接ソートします。

つまり、新しい配列を作成せず、元の配列を変更します。

この動作が意図しない結果をもたらすことがありますので注意が必要です。

let numbers = [40, 100, 1, 5, 25, 10];
let sortedNumbers = numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 5, 10, 25, 40, 100]
console.log(sortedNumbers); // [1, 5, 10, 25, 40, 100]

このコードでは、sortedNumbersnumbersの両方がソートされています。

デフォルトでは、要素を文字列として比較します

JavaScriptの.sort()メソッドはデフォルトでは要素を文字列として比較します。

したがって、数値の配列を期待通りにソートするには、比較関数を指定する必要があります。

let numbers = [40, 100, 1, 5, 25, 10];
numbers.sort();
console.log(numbers); // [1, 10, 100, 25, 40, 5]

このコードでは、数値が文字列として解釈され、

1, 10, 100, 25, 40, 5という意図しない順序でソートされています。

.sort()メソッドの比較関数は、

2つの引数(通常はabと呼ばれる)を取ります。

比較関数が正の値を返す場合、

abの後に置きます(baよりも小さいと見なします)

比較関数が負の値を返す場合、abの前に置きます(abよりも小さいと見なします)

比較関数が0を返す場合、abの位置は変更されません。

まとめ

今回はJavaScriptの.sort()メソッドについて詳しく学びました。

文字列の配列をアルファベット順にソートしたり、

数値の配列を昇順や降順にソートしたり、

オブジェクトの配列を特定のプロパティに基づいてソートするなど、

様々な場面で使用することができます。

ただし、.sort()メソッドは元の配列を直接変更し、

デフォルトでは要素を文字列として比較すること、

そして比較関数を使用する際のルールを理解することが重要です。

これらの特性を理解し、適切に使用することで、

配列を効果的にソートすることが可能となります。

プログラミングは一見すると難しく見えますが、

一つひとつの関数やメソッドを理解していけば、徐々に全体像が見えてきます。

.sort()もその一部であり、

しっかり理解して使いこなすことで、JavaScriptの世界がさらに広がります。

レッツチャレンジ!