JavaScriptのtoSortedの使い方！【配列】

JavaScriptで配列の要素をソートした新しい配列を返すtoSortedメソッドについて書いています。

toSortedメソッドを使うと、元の配列を変更せずに、要素がソートされた新しい配列を作成できます。
配列をソートして別の処理に渡したり、ソート前の配列も保持しておきたい場合に便利です。

実際に動くサンプルを使って、以下の操作を解説します。

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

toSortedメソッドは、配列の要素をソートした新しい配列を返します。
元の配列は変更されません。

基本的な構文は以下のとおりです。

array.toSorted(compareFn)

• compareFn: ソート順を定義する関数（省略可能）。

配列要素をソートした新しい配列を作成する

toSortedメソッドを使って、数値の配列をソートして、新しい配列を作って返してみます。

const numbers = [3, 1, 4, 2];
const sortedNumbers = numbers.toSorted();

console.log(numbers); // 結果：[3, 1, 4, 2] (元の配列は変わらない)
console.log(sortedNumbers); // 結果：[1, 2, 3, 4] (新しい配列)

numbers配列を作成して、次の処理でtoSortedメソッドを呼び出しています。
こうすることで、配列の要素がtoSortedメソッドによって昇順にソートされ、新しい配列sortedNumbersが作成されています。

元のnumbers配列は変更されていません。

文字列の配列をソートする

文字列の配列をソートしてみます。

const fruits = ['orange', 'apple', 'banana'];
const sortedFruits = fruits.toSorted();

console.log(sortedFruits); // 結果：['apple', 'banana', 'orange']

fruits配列を作成して、toSortedメソッドでソートしました。
文字列の配列もソートされることが確認できました。

toSortedメソッドの引数でソート順を変える

toSortedメソッドの引数compareFnは、ソート順を定義する関数です。
省略した場合は、昇順にソートされます。

const numbers = [3, 1, 4, 2];
const sortedNumbersDescending = numbers.toSorted((a, b) => b - a);

console.log(sortedNumbersDescending); // 結果：[4, 3, 2, 1] (降順にソート)

compareFnとして「(a, b) => b - a」という関数を渡しています。
この関数は、「b - a」の値を返すことで、aとbの大小関係を逆転させています。
つまり、bが大きい場合は正の数を返し、aが大きい場合は負の数を返すため、結果として降順にソートされます。

下記のように処理結果を出力すると、わかりやすいです。

const numbers = [3, 1, 4, 2];

const sortedNumbersDescending = numbers.toSorted((a, b) => {
    console.log(`比較: a = ${a}, b = ${b}, b - a = ${b - a}`);
    return b - a; // 降順ソート
});

console.log("元の配列:", numbers);
console.log("ソート後の配列:", sortedNumbersDescending);

出力すると、下記のようになります。

比較: a = 1, b = 3, b - a = 2
比較: a = 4, b = 1, b - a = -3
比較: a = 4, b = 3, b - a = -1
比較: a = 2, b = 3, b - a = 1
比較: a = 2, b = 1, b - a = -1
元の配列: [3, 1, 4, 2]
ソート後の配列: [4, 3, 2, 1]

compareFnを理解するポイントは、2つの要素を比較してソート順を決定するという点です。
compareFnの戻り値によって、要素の並び順がどのように変わるかを意識することで、より柔軟なソートを実現できます。

toSortedメソッドを使うメリット

toSortedメソッドを使う主なメリットは以下のとおりです。

• 元の配列を変更せずにソートされた新しい配列を作成できる: 元の配列を変更せずに、ソートされた新しい配列を作成できます。
• 可読性の向上: toSortedメソッドを使うことで、配列をソートする処理がより明確になり、コードの可読性が向上します。

sortメソッドとの違い

配列の要素をソートするメソッドとしては、sortメソッドも存在します。
sortメソッドは、元の配列を直接変更するのに対し、toSortedメソッドは元の配列を変更せずに新しい配列を返す点が異なります。

どちらのメソッドを使うかは、元の配列を変更したいかどうかによって選択する必要があります。

JavaScriptのtoSortedメソッドの使い方まとめ

今回はJavaScriptのtoSortedメソッドの使い方について書きました。
記事の内容をまとめます。