きっかけ
インターン先でAPI側から取ってきたデータ（連想配列)をAlphabet順にsortしたかったが、一度もsortメソッドを使ったことがなかったのと比較関数が特殊だったのでまとめてみることにした。
概要
配列や連想配列をアルファベット順や数値の昇順、降順に並べたい。下記のarray.sortを使い並び替えてみる。
やってみたこと
文字列の配列をアルファベット順にする方法
数値の配列を昇順に並び替える方法
数値の配列を降順に並び替える方法
文字列の配列をアルファベット順に並び替える方法(nameプロパティ）
数値の配列を昇順に並び替える方法(scoreプロパティ）
数値の配列を降順に並び替える方法（scoreプロパティ）
配列
arrayAlphabet = ['kamome','ari','tonbo','batta','tomato']
arrayNumber = [3,1,5,8,-1,0]
文字列の配列と数値の配列を用意した。
1.文字列の配列をアルファベット順に並び替える方法
arrayAlphabet = ['kamome','ari','tonbo','batta','tomato']
arrayAlphabet.sort()
console.log(arrayAlphabet)
Array ["ari", "batta", "kamome", "tomato", "tonbo"]
sortメソッドの引数を空にすればアルファベット順に並び替えることができる！ものすごく簡単
2.数値の配列を昇順に並び替える方法
上記のことをなすにはsortメソッドの引数に比較関数を用いなければならない。
sortメソッドの引数に比較関数を使用する
引数は配列から2つのa,bという値を取り出す。この2つの値を比較することで配列を並び替える。
関数の戻り値が正の時 → 引数1を引数2の後ろに並べ替え。
関数の戻り値が負の時 → 引数1を引数2の前に並べ替え。
関数の戻り値が0の時 → 何もしない
数値の配列を昇順にするを比較関数を使って書いてみる
arrayNumber = [3,1,5,8,-1,0]
arrayNumber.sort((a,b)=>{
return a - b
})
console.log(arrayNumber)
Array [-1, 0, 1, 3, 5, 8]
例えば 3(引数1),1(引数2) を3から１を引いて答えが
正 → ３を１の後ろに加える。
負 → ３を１の前に加える。
0 → 移動しない。
この場合であれば３−１は正であるため3を1の後ろに加える。今回は3,1で考えたが他の要素同士を比較して配列を並び替えることができる。
3.数値の配列を降順に並び替える方法
先ほど考え方を使えば降順は下記のようなコードで実装できる
arrayNumber = [3,1,5,8,-1,0]
arrayNumber.sort((a,b)=>{
return b - a
})
console.log(arrayNumber)
Array [8, 5, 3, 1, 0, -1]
連想配列
userList = [{name: 'amazon',score: 72},
{name: 'google',score: 11},
{name: 'facebook',score: 100}]
上記のような連想配列を作る。
1.文字列の配列をアルファベット順に並び替える方法(nameプロパティ）
userList.sort((a,b)=>{
if(a.name < b.name) return -1;
else if(a.name > b.name) return 1;
return 0;
})
console.log(userList)
Array [Object { name: "amazon", score: 72 }, Object { name: "facebook", score: 100 }, Object { name: "google", score: 11 }]
上記では 例えば引数一番目amazon二番目にgoogleをとり、aの名前の方が小さい（アルファベットの最初の方）であれば負の値を返している(配列の最初に持ってくる）
補足
大文字の方が基本的に優先されるため、大文字小文字の区別を消すには以下のような記述を比較関数の最初に記述してあげれば良い
a = a.toString().toLowerCase();
b = b.toString().toLowerCase();
2.数値の配列を昇順に並び替える方法(scoreプロパティ）
userList.sort((a,b)=>{
return a.score - b.score
})
console.log(userList)
Array [Object { name: "google", score: 11 }, Object { name: "amazon", score: 72 }, Object { name: "facebook", score: 100 }]
3.数値の配列を降順に並び替える方法（scoreプロパティ）
userList.sort((a,b)=>{
return b.score - a.score
})
console.log(userList)
Array [Object { name: "facebook", score: 100 }, Object { name: "amazon", score: 72 }, Object { name: "google", score: 11 }]
まとめ
比較関数は引数を二つしか取らないので気持ち悪い気がする、全ての要素を比べてる感がなかったが使っていくうちに慣れた。またsortメソッドは元の配列を変更してしまう破壊的メソッドなので使い所には注意したい。