こんにちは。
大阪でフロントエンド兼マネージャー兼Webチームの採用担当をしている筆者です🙋♂️
配列はJavaScript（以下JS）を理解する上では必須の項目です。
JavaScriptの配列で使うメソッド多くあります。
そんなメソッドの中でも最も重要な７つをシリーズで紹介しています。
第６弾の今回はsortメソッドを紹介します。
ちなみに前回の記事はこちらから！
【5分で理解⑤ (配列編)】JavaScriptの配列のeveryメソッド ーsomeメソッドとの違いー
sort()の基本文法
const people = [John, Ben, Adam, Eric, Zack];
const sortGrammer = people.sort()
console.log(sortGrammer) //👉 [Adam, Ben, Eric, John, Zack]実施結果は、
[Adam, Ben, Eric, John, Zack] とアルファベット順になって返ってきます。
次は数字の並び替えを見てみましょう。
const scores = [20, -110, 70, 120, -990, -30];
const sortGrammer2 = scores.sort()
console.log(sortGrammer) //👉 [-110, -30, -990, 120, 20, 70]実施結果は、
[-110, -30, -990, 120, 20, 70] となりました。
小→大の並んでいませんね。
理由はsortメソッドは数値ベース（Number）ではなく文字ベース（String）で順番を比較しているからです。
少し工夫をすると数字も綺麗に並び替えることができるので心配ありません。
続きを見ていきましょう！
sort()は何をしてくれる？
sortメソッドは配列を並び替えができるメソッドです。
文字だけでなく、数字やオブジェクトのキーを対象にして並び替えることができます。
では数字の並び替えをsortメソッドでやっていきましょう。
先ほどはうまくソートができませんでしたね。😅
数字の並び替えをするには引数に比較関係を作るのです。
どういうこと？🤔
下のコードを見てください。
const scores = [20, -110, 70, 120, -990, -30];
const sortTest = scores.sort((a, b) => {
if (a > b) return 1;
if (b > a) return -1;
});
console.log(sortTest) //👉 [-990, -110, -30, 20, 70, 120]実行すると、
[-990, -110, -30, 20, 70, 120] となり昇順に並び替えられています。
では解説していきます。
まず引数のa,bのふたつですが、
「a」は現在の数字、「b」は次の数字を指します。
これをif文で比較させて、１もしくは-1で返させます。
ここでsortメソッド本来の機能である、「０よりも小さかったらa→bに並び替えられ、０よりも大きかったらb→aと並び替えられる」で順番を入れ替えられます。
今回の例で言うと、
まずaが20、bが-110が入ります。
a>bなので１が返ってきて順番はb→aと入れ替わり、「-110, 20」となります。
この動作が繰り返し行なわれ、並び替えられた配列 [-990, -110, -30, 20, 70, 120] が完成されます。
さらに、このコードはもっとシンプルに書くことができます。
const sortTest = scores.sort((a, b) => {
if (a > b) return 1;
if (b > a) return -1;
});
↓↓↓↓↓↓↓リファクタリング↓↓↓↓↓↓↓
const sortTest = scores.sort((a, b) => a - b);少しですが、見やすくなりましたね！
これは覚えておいた方が良さそうです。
ちなみに先ほどは小さい数字→大きい数字へと並び替えましたが、大きい数字→小さい数字に並び替えることも可能です。
const scores = [20, -110, 70, 120, -990, -30];
const sortTest = scores.sort((a, b) => b - a);
console.log(sortTest) //👉 [120, 70, 20, -30, -110, -990]b と aを入れ替えるだけですね。
オブジェクトのキーを使って並び替える
次はオブジェクトのキーを使って並び替えをしてみます。
オブジェクトの中にデータを貯めて、、のような実装をすることも多くあると思うので、sortメソッドでオブジェクトを並び替える方法も知っておきましょう 。
const members = [
{ name: 'Natsumi', old: 21, gender: 'female', height: 158 },
{ name: 'Takashi', old: 18, gender: 'male', height: 180 },
{ name: 'Hitomi', old: 17, gender: 'female', height: 163 },
{ name: 'Jun', old: 32, gender: 'male', height: 165 },
];
const sortTest = members.sort((a, b) => a.height - b.height);
console.log(sortTest) //👉 [120, 70, 20, -30, -110, -990]実行結果は、
[
{ name: 'Natsumi', old: 21, gender: 'female', height: 158 },
{ name: 'Hitomi', old: 17, gender: 'female', height: 163 },
{ name: 'Jun', old: 32, gender: 'male', height: 165 },
{ name: 'Takashi', old: 18, gender: 'male', height: 180 }
]となり、heightの数字が小さい頃に並び返すことができました。
注意：sort() は元の配列を並び替える
sortメソッドを使用する上で一つ注意点があります。
それは、sortメソッドは、元の配列データを書き換えてしまうと言う事です。
const scores = [20, -110, 70, 120, -990, -30];
const sortTest = scores.sort((a, b) => b - a);
console.log(sortTest) //👉 [120, 70, 20, -30, -110, -990]
console.log(scores) //👉 [120, 70, 20, -30, -110, -990]このように４行目で元の配列を確認してみると３行目の順番を入れ替えた配列と同じ結果となってしまいます。
元の配列を壊したくない場合は、sliceメソッドを使って配列をコピーしておくのが良いでしょう。
今回は少し長かったですが以上となります。
皆さんのJSの理解に繋がっていれば幸いです。
次回も楽しみにしていてください。
▼▼あわせて読みたいの記事▼▼
【5分で理解⑤ (配列編)】JavaScriptの配列のeveryメソッド ーsomeメソッドとの違いー