JavaScriptでは配列に対して次の２つの並び替え用のメソッドが用意されています。
- reverseメソッド
- sortメソッド
配列だと要素の並び替えする機会が多いのでこのメソッドはよく使うかもしれません。
ということで自分の記憶の整理をするのも兼ねてこの２つの使い方についてまとめてみます。
reverseメソッド
reverseメソッドは文字通り配列の順番を入れ替えるためのものです。
配列.reverse(); のように配列から呼び出して使えます。
例えば次はreverseを使った逆順並び替えのコード例
|
1 2 3 |
var primes = [2, 3, 5, 7, 11, 13, 17, 19]; primes.reverse(); console.log(primes); |
1～20までの素数が順番に入った配列にたいして reverse しています。
そして次がコンソールへの出力結果
|
1 |
[ 19, 17, 13, 11, 7, 5, 3, 2 ] |
逆順に並んでいることが分かりますね。
reverseメソッドについてはこれだけです。
本当に単純な機能ですが、配列の反転はよく使うことがあるので覚えておくと便利そうです。
sortメソッド
sortメソッドは配列の並び替えに使われる汎用的な関数です。
これはMDNリファレンスによると次のように説明されています。
配列の要素をin placeでソートします。このソートは stable ではありません(訳注:同じ序列を持つ値の順番が保証されません)。 デフォルトではUnicodeコードポイントの昇順にソートされます。
in placeというのはデータ変換する際に新しく領域を作らないアルゴリズムを指すようです。
この場合でいえば並び替え中に配列のコピーを作らないということですね。
それでこのsortメソッドは次の２つの使い方ができます。
- 何も渡さずそのまま使う
- 並び替え用メソッドを渡して使う
この使い方について次で詳しく説明
sortに何も渡さずそのまま使う
１つめの使い方は配列に対して 配列.sort(); のようにそのまま使う方法です。
このように呼び出しした場合、要素はUnicodeコードの昇順に並び替えられます。
例えば次がsortを使った配列の並び替えコード例
|
1 2 3 4 |
let sweets = ['Cherry','Orange', 'Apple', 'Grape', 'Banana']; console.log(sweets); sweets.sort(); console.log(sweets); |
そしてこのコードのコンソールへの出力結果は次の通り
|
1 2 |
[ 'Cherry', 'Orange', 'Apple', 'Grape', 'Banana' ] [ 'Apple', 'Banana', 'Cherry', 'Grape', 'Orange' ] |
要素が文字コードの大きい順に並んでいることが分かると思います。
ただしこの使い方で注意しないといけないのは
"数字も文字コード扱いで並び替えされてしまう"
ということです。
例えば次のコードのように数値を並び替えしたいとしましょう。
|
1 2 3 |
var primes = [7, 13, 2, 5, 19, 3, 11, 17]; primes.sort(); console.log(primes); |
このコードがどのような出力をするかというと次の通り
|
1 2 |
[ 7, 13, 2, 5, 19, 3, 11, 17 ] [ 11, 13, 17, 19, 2, 3, 5, 7 ] |
2, 3, 5, 7... のように並び替えされることを期待してしまいますが、 11, 13, 17, 19... のように初めが '1' の数字が最初に並んでいます。
これは数値をいったん文字列に変換して並び替えているからです。
まあ '1' の文字コードは '2' や '3' よりも小さいので当然と言えば当然ですよね。
じゃあ数値も正しく並び替えられるにはどうすればいいのか・・・
というのが次で紹介する並び替え用の関数を渡す方法です。
並び替え用関数を渡して使う
sortメソッドは第１引数で関数を受け取れます。
そしてその渡された関数で返された値に応じて並び替えを制御可能です。
例えば次が数値の並び替えをするためのメソッド例
|
1 2 3 4 5 |
function my_sort(a, b){ if(a < b) return -1; else if(a > b) return 1; else return 0; } |
a, b という２つの引数をとる関数で、それぞれの引数は配列の要素だと思ってください。
そして、上のコードを使って説明すると並び替え関数内では次のルールで値を返します。
- a を b の前に並び替えるとき
メソッド内で 0 より小さい値(つまり -1 以下)を返す
- a を b の後に並び替えるとき
メソッド内で 0 より大きい値(つまり 1 以上)を返す
- a と b を並び替えしないとき
メソッド内で0を返す
ここで返した値によって実際に要素が並び替えされるという訳です。
そして実際に配列を並び替える場面で、このようなメソッドを sort に渡します。
例えば次のように関数式やクロ―ジャとして渡せばOK
|
1 2 3 4 5 6 7 |
let primes = [7, 13, 2, 5, 19, 3, 11, 17]; primes.sort(function(a, b){ if(a < b) return -1; else if(a > b) return 1; else return 0; }); console.log(primes); |
これでコンソールには次のように期待した結果が表示されます。
|
1 |
[ 2, 3, 5, 7, 11, 13, 17, 19 ] |
ちなみに数値をただ昇順に並び替えるなら並び替えメソッドは次のようにしても問題なし
|
1 2 3 |
function my_sort(a, b) { return a - b; } |
aとbの差をとれば比較したのと同じになります。
以上がsortメソッドの使い方です。
単純に 配列.sort(); と呼び出すだけだとUnicodeのコード順に並んでしまいます。
数値またはその他のデータを並び替えするときは並び替え用の関数が必要なので要注意です。
ここまでのまとめ
ということで２つの並び替えメソッドについて簡単にまとめると次の通り
- reverseメソッド
配列の要素を逆順に並び替える
- sortメソッド
並び替え用関数を渡すことで配列要素を好きなように並び替えできる
ただし関数を渡さないとUnicode昇順に並び替えられるので注意！
この２つはよく使うと思うのでしっかりと使い方を覚えておきたいです。
ではでは(・◇・)ﾉ
