この記事ではJavaScriptの『sort()メソッド』について、
sort()メソッドとはsort()メソッドの構文sort()メソッドの使い方- 要素が「文字列」の配列を「昇順」にソートする方法
- 要素が「数字」の配列を「昇順」にソートする方法
- 要素が「文字列」の配列を「降順」にソートする方法
- 要素が「数字」の配列を「降順」にソートする方法
- 要素に「非ASCII文字」が含む配列を「昇順」にソートする方法
sort()メソッドの特徴
などを分かりやすく説明するように心掛けています。ご参考になれば幸いです。
sort()メソッドとは
sort()メソッドは、配列の順番を並び変えるメソッドです。
sort()メソッドは引数を省略すると昇順(小さいものから大きいものへ)でソートします。ソートの際には、まず各要素を文字列に変換します。その後、これらの文字列が持つUTF-16コード(コンピュータが文字を認識するための数値コード)を基にして、それらの順番を比較し、並び変えています。
例えば、数字の配列[10, 5, 1]があるとします。引数を省略してsort()メソッドを使用すると、結果は[1, 10, 5]となります(文字列として「10」は「5」より前に来るからです)。
sort()メソッドの構文
sort()メソッドの構文を以下に示します。
sort()メソッドの構文
array.sort([compareFunction])arrayはソートされる配列です。sort()メソッドの引数と返り値を以下に示します。
引数
compareFunction(省略可能)compareFunctionは比較関数(コールバック関数)であり、比較関数の中では「どのように要素を並び替えるのか」を定義します(後ほど、サンプルコードで比較関数について説明します)。- 引数を省略した場合、各要素を文字列に変換してから、UTF-16コードの値に従って並び替えられます。
返り値(戻り値)
- ソートされた元の配列への参照です。そのため、返された配列を変更すると、元の配列も変更されます。
sort()メソッドの使い方
sort()メソッドについて、以下に示している様々な使い方をこれから説明します。
- 要素が「文字列」の配列を「昇順」にソートする方法
- 要素が「数字」の配列を「昇順」にソートする方法
- 要素が「文字列」の配列を「降順」にソートする方法
- 要素が「数字」の配列を「降順」にソートする方法
- 要素に「非ASCII文字」が含む配列を「昇順」にソートする方法
各使い方について順番に説明します。
要素が「文字列」の配列を「昇順」にソートする方法
sort()メソッドはデフォルトで使用すると(引数を省略して使用すると)、昇順でソートします。そのため、要素が「文字列」の配列を昇順にソートする場合には、ソートしたい配列.sort()のように記述します。サンプルコードを以下に示します。
const arr = ['banana', 'apple', 'cherry'];
arr.sort();
console.log(arr);
// ログ出力
// [ 'apple', 'banana', 'cherry' ]要素が「数字」の配列を「昇順」にソートする方法
sort()メソッドは要素を文字列に変換してから並び替えています。そのため、以下のコードでは期待する結果が得られません。
const arr = [10, 5, 1];
arr.sort();
console.log(arr);
// ログ出力
// [ 1, 10, 5 ]数値のソートでは「5」は「10」の前に来るので、期待する結果は[ 1, 5, 10 ]だと思われます。しかし、sort()メソッドの引数を省略した場合、数値は文字列に変換され、UTF-16コードの値に従って並び替えられるため、「10」が「5」の前に来ます。
そのため、要素が「数字」の配列を昇順にソートする場合、sort()メソッドの引数に比較関数を使って、ソートする必要があります。サンプルコードを以下に示します。
// 比較関数は2つの引数を取る
function compare(val1, val2) {
if (val1 > val2) {
// val1の方が大きい場合、val1をval2の後に配置する
return 1;
}
else if (val1 < val2) {
// val1の方が小さい場合、val1をval2の前に配置する
return -1;
}
else {
// 返り値が「0」の場合、val1とval2の元の順序を保持する
return 0;
}
}
const arr = [10, 5, 1];
arr.sort(compare);
console.log(arr);
// ログ出力
// [ 1, 5, 10 ]なお、以下のコードに示すように、sort()メソッドの引数の中に直接関数を記述してもOKです。
const arr = [10, 5, 1];
arr.sort(function (val1, val2) {
if (val1 > val2) {
// val1の方が大きい場合、val1をval2の後に配置する
return 1;
} else if (val1 < val2) {
// val1の方が小さい場合、val1をval2の前に配置する
return -1;
} else {
// 返り値が「0」の場合、al1とval2の元の順序を保持する
return 0;
}
});
console.log(arr);
// ログ出力
// [ 1, 5, 10 ]また、以下のサンプルコードに示すように、比較関数はアロー関数を使って記述することもできます。
const arr = [10, 5, 1];
arr.sort((val1, val2) => {
if (val1 > val2) {
// val1の方が大きい場合、val1をval2の後に配置する
return 1;
}
else if (val1 < val2) {
// val1の方が小さい場合、val1をval2の前に配置する
return -1;
}
else {
// 返り値が「0」の場合、val1とval2の元の順序を保持する
return 0;
}
});
console.log(arr);
// ログ出力
// [ 1, 5, 10 ]また、要素が数字のみで構成されている配列の場合、if文を使わなくても以下のように記述することで同じ結果を得ることができます。
const arr = [10, 5, 1];
arr.sort((val1, val2) => val1 - val2);
console.log(arr);
// ログ出力
// [ 1, 5, 10 ]比較関数について
sort()メソッドの比較関数は2つの引数を取ります。この時、引数に渡される値は、配列が保持する値の中でランダムに選択されたものになります(Webブラウザが使用しているソートアルゴリズムの挙動によります)。
上記の比較関数のように、返り値として、「正の値」、「負の値」、「0」を返すことで、ソートアルゴリズムに対して、2つの値のどちらを前に持ってくるかを指示しています。ソートアルゴリズムはこのような比較を何回も繰り返し行うことで、少しずつ配列の要素をソートしています。
| compareFunction(val1, val2)の返り値 | ソート順 |
正の値(>0) | val1をval2の後に並べる |
負の値(<0) | val1をval2の前に並べる |
ゼロ(===0) | val1とval2の元の順序を保持する |
要素が「文字列」の配列を「降順」にソートする方法
sort()メソッドはデフォルトで使用すると(引数を省略して使用すると)、昇順でソートします。文字列の配列を降順にソートしたい場合には比較関数を用います。サンプルコードを以下に示します。
const arr = ['banana', 'apple', 'cherry'];
arr.sort((val1, val2) => {
const name1 = val1.toUpperCase(); // 大文字小文字を無視
const name2 = val2.toUpperCase(); // 大文字小文字を無視
if (name1 < name2) {
// name1の方が小さい場合、val1をval2の後に配置する
return 1;
}
else if (name1 > name2) {
// name1の方が大きい場合、val1をval2の前に配置する
return -1;
}
else {
// 返り値が「0」の場合、al1とval2の元の順序を保持する
return 0;
}
});
console.log(arr);
// ログ出力
// [ 'cherry', 'banana', 'apple' ]上記のコードはlocaleCompare()メソッドを使用しても並び替えることができます。サンプルコードを以下に示します。
const arr = ['banana', 'apple', 'cherry'];
arr.sort((val1, val2) => {
return val2.localeCompare(val1, undefined, { sensitivity: 'base' });
});
console.log(arr);
// ログ出力
// [ 'cherry', 'banana', 'apple' ]このコードでは、localeCompare()メソッドの第三引数に { sensitivity: 'base' } オプションを指定しています。これにより、大文字と小文字を区別せずに文字列を比較することができるようになります。
要素が「数字」の配列を「降順」にソートする方法
要素が「数字」の配列を「昇順」にソートする方法にて説明した比較関数において、val1 - val2をval2 - val1に変えれば、降順にソートすることができます。サンプルコードを以下に示します。
const arr = [10, 5, 1];
arr.sort((val1, val2) => val2 - val1);
console.log(arr);
// ログ出力
// [ 10, 5, 1 ]要素に「非ASCII文字」が含む配列を「昇順」にソートする方法
要素に「非ASCII文字」が含む配列をソートする場合には、localeCompare()メソッドを使用します。このメソッドを使用すれば、正しくソートすることができます。以下にサンプルコードを示します。
const arr = ['élève', 'étudiant', 'apple'];
arr.sort((val1, val2) => val1.localeCompare(val2));
console.log(arr);
// ログ出力
// [ 'apple', 'élève', 'étudiant' ]アクセント記号などが付いた文字(á, à, â, ãなど)などが非ASCII文字です。
sort()メソッドの特徴
sort()メソッドの特徴を以下に示します。
sort()メソッドは元の配列への参照を返すundefinedの要素や空の要素は配列の末尾に置かれる
各特長について順番に説明します。
sort()メソッドは元の配列への参照を返す
sort()メソッドは元の配列への参照を返すので、返された配列を変更すると、元の配列も変更されます。以下のサンプルコードを見てみましょう。
const originalArray = [3, 1, 4, 2, 5];
const sortedArray = originalArray.sort();
// originalArray と originalArray は両方とも [ 1, 2, 3, 4, 5 ]になる。
console.log(sortedArray); // 出力: [ 1, 2, 3, 4, 5 ]
console.log(originalArray); // 出力: [ 1, 2, 3, 4, 5 ] (元の配列も変更される)
sortedArray[0] = 10;
console.log(sortedArray); // 出力: [ 10, 2, 3, 4, 5 ]
console.log(originalArray); // 出力: [ 10, 2, 3, 4, 5 ] (元の配列も変更される)配列の元の順序を保持しつつ、ソートされた新しい配列を作成するには、配列をコピーしてからsortメソッドを使用する必要があります。そのためには、スプレッド構文(...)やslice()メソッドを用います。以下にサンプルコードを示します。
スプレッド構文を使用する場合
const originalArray = [3, 1, 4, 2, 5];
// スプレッド構文を使用して配列をコピーし、ソートする
const sortedArray = [...originalArray].sort();
console.log(sortedArray); // 出力: [1, 2, 3, 4, 5]
console.log(originalArray); // 出力: [3, 1, 4, 2, 5] (元の配列は変更されない)
sortedArray[0] = 10;
console.log(sortedArray); // 出力: [ 10, 2, 3, 4, 5 ]
console.log(originalArray); // 出力: [3, 1, 4, 2, 5] (元の配列は変更されない)slice()メソッドを使用する場合
const originalArray = [3, 1, 4, 2, 5];
// slice()メソッドを使用して配列をコピーし、ソートする
const sortedArray = originalArray.slice().sort();
console.log(sortedArray); // 出力: [1, 2, 3, 4, 5]
console.log(originalArray); // 出力: [3, 1, 4, 2, 5] (元の配列は変更されない)
sortedArray[0] = 10;
console.log(sortedArray); // 出力: [ 10, 2, 3, 4, 5 ]
console.log(originalArray); // 出力: [3, 1, 4, 2, 5] (元の配列は変更されない)undefinedの要素や空の要素は配列の末尾に置かれる
undefinedの要素や空の要素は配列の末尾に置かれます。undefinedの要素よりも空の要素が一番最後に置かれます。以下にサンプルコードを示します。
const arrayWithUndefined = [undefined, 1, 4, undefined, 2];
arrayWithUndefined.sort();
console.log(arrayWithUndefined);
// ログ出力
// [1, 2, 4, undefined, undefined] (undefinedが末尾に移動)
const arrayWithEmpty = [undefined, 1, , 4, 2];
arrayWithEmpty.sort();
console.log(arrayWithEmpty);
// ログ出力
// [1, 2, 4, undefined, empty × 1] (空の要素が末尾に移動)本記事のまとめ
この記事ではJavaScriptの『sort()メソッド』について、以下の内容を説明しました。
sort()メソッドとはsort()メソッドの構文sort()メソッドの使い方- 要素が「文字列」の配列を「昇順」にソートする方法
- 要素が「数字」の配列を「昇順」にソートする方法
- 要素が「文字列」の配列を「降順」にソートする方法
- 要素が「数字」の配列を「降順」にソートする方法
- 要素に「非ASCII文字」が含む配列を「昇順」にソートする方法
sort()メソッドの特徴
お読み頂きありがとうございました。