JavaScriptの「.sort()」について簡単なサンプルコードで解説
2 回閲覧されました
みなさんこんにちは、jonioです。
今回はJavaScriptの.sort()が何かと簡単なサンプルコードで解説します。
Laravelの無料学習サイトを作りました
Laravelを勉強したい人向けの無料の学習サイトを作りました。
ここからリンクに飛べますのでぜひ利用してください。
.sort()とは
配列の要素を文字列として並べ替える時に使います。
デフォルトは昇順です。
サンプルコードで説明します。
下記のコードで考えます。
const fruits = ['banana', 'apple', 'cherry'];
const sortedFruits = fruits.sort();配列の要素の最初の文字(bananaの「b」、appleの「a」、cherryの「c」)を比較して昇順に並べます。
結果は下記になります。
console.log(sortedFruits);
// 結果: ['apple', 'banana', 'cherry']降順にするには例えば下記の記述をします。
const sortedFruitsDesc = fruits.sort().reverse();
console.log(sortedFruitsDesc);
// 結果: ['cherry', 'banana', 'apple']「.sort()」で昇順に並べて「.reverse()」で降順に変換します。
注意点
配列の要素が数字の場合も文字列として並び替えをするのでそのまま.sort()を使ってもうまくいきません。
例えば下記の記述をしたとします。
const numbers = [10, 5, 30, 2];
console.log(numbers.sort());
// 結果: [10, 2, 30, 5]（文字列扱い）配列の要素は文字列の扱いになるのでnumbersは以下と同じになります。
const numbers = ['10', '5', '30', '2'];だから「10」の「1」と5と「30」の「3」と2を比較して.sortの結果は「[10, 2, 30, 5]」になります。
数値の場合は下記の記述をしないといけません。(昇順の場合)
const numbers = [10, 5, 30, 2];
const sortedNumbers = numbers.sort((a, b) => a - b);
console.log(sortedNumbers);
// 結果: [2, 5, 10, 30]「(a, b) => a – b」の部分ですが降順の場合は「(a, b) => b – a」になります。
「(a, b) => a – b」の挙動は以下になります。
a・bは配列の要素です。
配列の要素を左端から比較します。
「a – b > 0」の時は要素の順番が並び替わります。
a = 10、b = 5の時→10 – 5 = 5 > 0→配列は[5, 10, 30, 2]
a = 10、b = 30の時→ 10 – 30 = -20 < 0→配列は[5, 10, 30, 2]のまま
a = 30、b = 2の時→30 – 2 = 28 > 0→配列は[5, 10, 2, 30]
5・10・2の並び順が昇順になっていないので並び替えます。
a = 5、b = 10の時→5 – 10 = -5 < 0→配列は[5, 10, 2, 30]のまま
a = 10、b = 2の時→10 – 2 = 5 > 0→配列は[5, 2, 10, 30]
a = 5、b = 2の時→5 – 2 = 3 > 0→配列は[2, 5, 10, 30]
流れを理解して結果を覚えていいと思います。