sortによる並び替え | 配列の並び替えと結合 | JavaScript 超完全入門 基本から発展までのすべて

スポンサーリンク
スポンサーリンク

sortメソッドとは?

sortメソッドは、JavaScriptの配列操作において、配列の要素をアルファベット順または数値順に並び替えるために使用されるメソッドです。sortメソッドは元の配列を変更することが特徴です。

sortメソッドの基本的な使い方

const fruits = ["banana", "apple", "cherry", "date"];

// アルファベット順に並び替え
fruits.sort();

console.log(fruits);  // ["apple", "banana", "cherry", "date"]

この例では、fruits配列がアルファベット順に並び替えられています。

数値を並び替える

数値を正確に並び替えるためには、sortメソッドに比較関数を渡す必要があります。デフォルトでは、sortメソッドは数値を文字列として扱うため、意図した結果が得られません。

数値の昇順に並び替える例

const numbers = [40, 100, 1, 5, 25, 10];

// 昇順に並び替え
numbers.sort(function(a, b) {
    return a - b;
});

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

この例では、数値の配列を昇順に並び替えています。a - bは、各要素を比較して並び替えるために使用されます。

数値の降順に並び替える例

const numbers = [40, 100, 1, 5, 25, 10];

// 降順に並び替え
numbers.sort(function(a, b) {
    return b - a;
});

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

この例では、数値の配列を降順に並び替えています。b - aを使用することで、逆順に並び替えられています。

文字列の並び替え

文字列の配列も簡単に並び替えることができますが、アルファベット順に並べる際には大文字と小文字の扱いに注意が必要です。

大文字と小文字を区別せずに並び替える例

const fruits = ["Banana", "apple", "cherry", "Date"];

// 大文字小文字を区別しない並び替え
fruits.sort(function(a, b) {
    return a.toLowerCase().localeCompare(b.toLowerCase());
});

console.log(fruits);  // ["apple", "Banana", "cherry", "Date"]

この例では、toLowerCaseを使って、大文字と小文字を区別せずに並び替えを行っています。

配列内のオブジェクトを並び替える

オブジェクトの配列を並び替える場合、オブジェクト内の特定のプロパティに基づいて並び替えを行うことができます。

オブジェクトの配列を並び替える例

const users = [
    { name: "John", age: 30 },
    { name: "Jane", age: 22 },
    { name: "Jack", age: 25 }
];

// 年齢で並び替え
users.sort(function(a, b) {
    return a.age - b.age;
});

console.log(users);
// [{ name: "Jane", age: 22 }, { name: "Jack", age: 25 }, { name: "John", age: 30 }]

この例では、users配列をageプロパティに基づいて昇順に並び替えています。

sortメソッドの動作まとめ

sortメソッドは、配列を並び替えるために非常に便利ですが、文字列の並び替え、数値の並び替え、さらにはオブジェクトの配列の並び替えなど、多くの場面で異なる比較方法を用いる必要があります。以下の表で主な並び替えの違いを整理しました。

並び替え方法 比較方法 使用例
アルファベット順 デフォルトのsort() 文字列の配列
数値の昇順 function(a, b) { return a - b; } 数値の配列
数値の降順 function(a, b) { return b - a; } 数値の配列
オブジェクトの並び替え function(a, b) { return a.prop - b.prop; } オブジェクトの配列

まとめ

sortメソッドは、配列の並び替えに使用され、数値や文字列の並び替え、オブジェクトの配列の並び替えにも対応しています。特に数値やオブジェクトの並び替えでは、比較関数を適切に使用することで、正確な順序で要素を並べることが可能です。