概要: このチュートリアルでは、JavaScript配列のtoSorted()メソッドを使用して、ソートされた要素を含む新しい配列を返す方法を学習します。
JavaScript Array toSorted メソッドの紹介
Array.prototypeには、配列内の要素をソートするsort()メソッドがあります。ただし、これは元の配列を変更します。
元の配列を変更せずに、ソートされた要素を含む新しい配列を作成したい場合があります。この場合、Array.prototype.toSorted()メソッドを使用できます。
toSorted()メソッドの基本的な構文を次に示します。
array.toSorted(compareFn);Code language: JavaScript (javascript)この構文では
array: メソッドを呼び出す配列です。compareFn(オプション): ソート順序を定義する関数です。省略した場合、toSorted()メソッドは配列の要素を文字列に変換し、文字のUnicodeコードポイント値に従ってソートします。
compareFn関数は、比較対象の最初の要素と2番目の要素である2つの引数aとbを受け取ります。
compareFnは、aをbの前にソートする必要がある場合は負の数を、bをaの前にソートする必要がある場合は正の数を、aとbの順序が重要でない場合は0を返す必要があります。
toSorted()関数は、昇順にソートされた要素を含む新しい配列を返します。
toSorted()メソッドはジェネリックです。つまり、lengthプロパティと整数キーのプロパティを持つ非配列オブジェクトにも呼び出すことができます。
この場合、toSorted()メソッドは次の操作を実行します。
- まず、オブジェクトの
lengthプロパティを読み取ります。 - 次に、
0からlength - 1の範囲内の既存の整数キーのプロパティをすべて収集します。 - 次に、要素をソートします。
- 最後に、要素を新しい配列に書き込みます。
JavaScript Array toSorted メソッドの例
JavaScript配列のtoSorted()メソッドの使用例をいくつか見てみましょう。
1) toSorted()メソッドを使用して、ソートされた新しい文字列配列を返す
次の例では、toSorted()メソッドを使用して文字列の配列をソートします。
const colors = ['red','green','blue'];
const sortedColors = colors.toSorted();
console.log(colors);
console.log(sortedColors);Code language: JavaScript (javascript)出力
['red', 'green', 'blue']
['blue', 'green', 'red']Code language: JavaScript (javascript)出力は、元の配列（colors）は変更されないが、結果の配列（sortedColors）は要素がソートされていることを示しています。
2) toSorted()メソッドを使用して、ソートされた新しい数値配列を返す
次の例では、toSorted()メソッドを使用して数値の配列をソートします。
const scores = [3, 1, 2, 7, 9];
const sortedScores = scores.toSorted((a,b) => a - b);
console.log(scores);
console.log(sortedScores);Code language: JavaScript (javascript)出力
[3, 1, 2, 7, 9]
[1, 2, 3, 7, 9]Code language: JavaScript (javascript)この例では、compareFnパラメータを使用して2つの数値を比較し、scores配列の要素を数値で昇順にソートします。
数値を降順にソートするには、compareFnパラメータを次のように変更します。
const scores = [3, 1, 2, 7, 9];
const sortedScores = scores.toSorted((a,b) => b - a);
console.log(scores);
console.log(sortedScores);Code language: JavaScript (javascript)出力
[3, 1, 2, 7, 9]
[9, 7, 3, 2, 1]Code language: JavaScript (javascript)compareFn関数では、b - aを使用して、bがaより大きい場合、正の値を返し、bがaの前にソートされるように指示します。
その結果、toSorted()メソッドは、より大きな数値（bの値が高い）をより小さな数値（aの値が低い）の前に配置するため、配列を降順にソートします。
3) toSorted()メソッドを使用して、プロパティでオブジェクトの配列をソートする
次の例では、toSorted()メソッドを使用して、元の配列を変更せずに、書籍の配列を刊行年でソートします。
// Original array of books
const books = [
{ title: 'The Great Gatsby', author: 'F. Scott Fitzgerald', year: 1925 },
{ title: 'To Kill a Mockingbird', author: 'Harper Lee', year: 1960 },
{ title: '1984', author: 'George Orwell', year: 1949 },
{ title: 'Brave New World', author: 'Aldous Huxley', year: 1932 }
];
// Creating a sorted copy based on the publication year using toSorted()
const sortedBooks = books.toSorted((a, b) => a.year - b.year);
// Output the sorted copy and the original array
console.log(sortedBooks);Code language: JavaScript (javascript)出力
[
{ title: 'The Great Gatsby', author: 'F. Scott Fitzgerald', year: 1925},
{ title: 'Brave New World', author: 'Aldous Huxley', year: 1932 },
{ title: '1984', author: 'George Orwell', year: 1949 },
{ title: 'To Kill a Mockingbird', author: 'Harper Lee', year: 1960 }
]Code language: JavaScript (javascript)4) 非配列オブジェクトでtoSorted()メソッドを呼び出す
次の例は、lengthプロパティと整数キーのプロパティを持つオブジェクトでtoSorted()メソッドを呼び出す方法を示しています。
const arrayLike = {
length: 3,
unrelated: "foo",
0: 5,
2: 4,
3: 3, // ignored by toSorted() since length is 3
};
console.log(Array.prototype.toSorted.call(arrayLike));
// [4, 5, undefined]Code language: JavaScript (javascript)5) スパース配列でtoSorted()を使用する
次の例は、スパース配列でtoSorted()メソッドを呼び出します。toSorted()メソッドは、空のスロットを値undefinedが含まれているかのように扱います。
const skills = ['JS',,'Node.js'];
const sortedSkills = skills.toSorted();
console.log(sortedSkills);Code language: JavaScript (javascript)出力
['JS', 'Node.js', undefined]Code language: JavaScript (javascript)まとめ
- JavaScript配列の
toSorted()メソッドを使用して、元の配列を変更せずに、要素がソートされた新しい配列を返します。 toSorted()メソッドはジェネリックなので、lengthプロパティと整数キーのプロパティを持つ非配列オブジェクトにも呼び出すことができます。- スパース配列に
toSorted()メソッドを適用する場合、空のスロットを反復処理し、値がundefinedであるかのように扱います。
