今回はJavaScriptで配列をソートするsortメソッドについて書いてみました。
sortメソッドを配列で使用することで、配列内のデータをソート（並び替え）することができます。
sortメソッドの使い方
JavaScriptでsortメソッドを使うには、配列からsortメソッドを呼び出します。
sortメソッドを呼び出すと、配列の要素が文字列の昇順に並びます。
例えば、下記のように使用します。
const fruits = ["banana", "apple", "grape", "orange", "remon"];
fruits.sort();
console.log(fruits); // 結果：['apple', 'banana', 'grape', 'orange', 'remon']
fruitsという配列を作成して、果物の英語名を入力しました。
その後にfruis.sort()を実行して、配列をソートしました。
結果として、配列の内容が「’apple’, ‘banana’, ‘grape’, ‘orange’, ‘remon’」といったように文字列の昇順に並びます。
気をつけるところは、文字列の昇順に並ぶという挙動です。
数値の配列に対して、下記のように使用します。
const numbers = [20, 10, 1, 22, 3, 5];
numbers.sort();
console.log(numbers); // 結果：[1, 10, 20, 22, 3, 5]
数値を「20, 10, 1, 22, 3, 5」の順にnumbersという配列に入れてソートしました。
文字列の昇順になるので、結果が「1, 10, 20, 22, 3, 5」になります。
文字列の昇順以外で並べる場合は、次項以降を確認してください。
数値を数値順に並べる
数値配列を数値順に並べます。
sortメソッドに対して、比較関数を実装することで、文字列の昇順以外のソートが可能です。
const numbers = [20, 10, 1, 22, 3, 5];
numbers.sort((a, b) => {
return a < b ? -1 : 1;
});
console.log(numbers); // 結果：「[1, 3, 5, 10, 20, 22]」
sortメソッドに指定した比較関数は、配列の2つの値を比較します。
1つ目の要素より、2つ目の要素を先頭にしたい場合は、マイナスの値を返します。
1つ目の要素の方を優先する場合は、0より大きな値を返すようにします。
上記のように実装することで、要素を2つ比較して返すようになります。
「20」と「10」が渡されて、比較されて、-1が返って2番目の値が先頭に来ます。
それが繰り返されて、昇順になり、出力結果が「1, 3, 5, 10, 20, 22」となります。
文字列を逆順に並べる
同じように比較関数を使用すると、逆順に並べることができます。
const fruits = ["banana", "apple", "grape", "orange", "remon"];
fruits.sort((a, b) => {
return a > b ? -1 : 1;
});
console.log(fruits); // 結果：['remon', 'orange', 'grape', 'banana', 'apple']
先ほどのコードのaとbの比較の箇所を変えてみます。
そうすると、予想される通り、逆の昇順になります。
const fruits = ["banana", "apple", "grape", "orange", "remon"];
fruits.sort((a, b) => {
return a < b ? -1 : 1;
});
console.log(fruits); // 結果：['apple', 'banana', 'grape', 'orange', 'remon']
オブジェクトのプロパティ順に並べる
オブジェクトのプロパティを並べる場合にも比較関数を使用します。
ユーザーのオブジェクトを作成して、ID・名前・年齢のプロパティを持たせて配列に並べました。
このオブジェクト配列をsortメソッドでソートしています。
const users = [
{
id: 1,
name: 'taro',
age: 20,
},
{
id: 10,
name: 'hanako',
age: 28,
},
{
id: 5,
name: 'jiro',
age: 22,
},
];
users.sort((a, b) => {
return a.id < b.id ? -1 : 1;
});
console.log(users);
sortメソッドに比較関数を作成して、それぞれのオブジェクトプロパティのIDで比べてみました。
このように比較することで、IDの昇順に並びます。
return a.id < b.id ? -1 : 1;
結果として、下記のようになります。
(3) [{…}, {…}, {…}]
0: {id: 1, name: 'taro', age: 20}
1: {id: 5, name: 'jiro', age: 22}
2: {id: 10, name: 'hanako', age: 28}
このように比較関数に渡したオブジェクトのプロパティにアクセスすることで、オブジェクトを並び替えることができます。
名前の昇順に並び替えるには、同じようにして名前のプロパティにアクセスして、下記のようにします。
users.sort((a, b) => {
return a.name < b.name ? -1 : 1;
});
そうすると、このように名前の昇順に並びかわります。
(3) [{…}, {…}, {…}]
0: {id: 10, name: 'hanako', age: 28}
1: {id: 5, name: 'jiro', age: 22}
2: {id: 1, name: 'taro', age: 20}
終わりに
今回はJavaScriptで配列のソートを行ってみました。
引数を渡さずに使うと、文字列の昇順に並ぶという挙動に注意して使っていきたいです。
コメント