配列を扱っていると、要素の順番を変更させたい時があります。
特に配列は、要素をインデックスで管理しているため、並び替えを必要とするシチュエーションも多いです。
JavaScriptには、配列の要素を並び替えるために便利なメソッドが用意されています。
そこで今回は、配列を変換する際に使える「sort」「reverse」メソッドについて解説していきます。
sortメソッド
「sortメソッド」は、配列の要素を決まった順番に並び替えます。
const numbers = [2, 100, 53, 1, 38, 1000];
const sortNumbers = numbers.sort();
console.log(sortNumbers); //[1, 100, 1000, 2, 38, 53]実行結果
「numbers.sort」により要素を並び替えしていますが、確認できるように、数値が小さい順に並び変わっているわけではありません。
理由は、sortメソッドがUnicodeのUTF-16の値順に並び替えが行われるからです。
つぎに、アルファベットの場合どのような並びになるか見てみましょう。
const fruits = [
'orange',
'Orange',
'apple',
'Apple',
'banana',
'Banana'
];
const sortFruits = fruits.sort();
console.log(sortFruits);
//['Apple', 'Banana', 'Orange', 'apple', 'banana', 'orange']実行結果
こちらもアルファベット順ではなく、大文字→小文字の順番で出力されています。
つまり、数値だけに関わらず、アルファベットやひらがななどの文字列も、Unicodeを基準にして並び替えられているということです。
上記の例にあげたように、単純にsortメソッドを使用するだけでは、思い通りの並び替えができない場合があります。
そのような場合には、比較関数を使用すると便利です。
ここでは数値を小さい順に並び替える例を紹介します。
const numbers = [2, 100, 53, 1, 38, 1000];
const sortNumbers = numbers.sort(function(a, b) {
if (a < b) {
return -1;
} else if (a > b) {
return 1;
} else {
return 0;
}
});
console.log(sortNumbers); //[1, 2, 38, 53, 100, 1000]実行結果
どのように比較しているのかif文のみを切り取ってみるとわかりやすいです。
if (a < b) return -1;
if (a > b) return 1;
if (a == b) 0;Unicode以外の独自の方法で並び替えるには、sortメソッドの引数に2つの引数を持つ関数を指定し、それらの引数を比較させる必要があります。
・「a < b」では、a→bの順番で並び替える時、つまり0より小さい値を返す。
・「a > b」では、b→aの順番で並び替える時、つまり0より大きい値を返す。
・「a == b」では、aとbを並び替えない。
このように比較関数の処理の中では複数回要素を比べていることになりますが、実際にはもっと簡潔にコードを書き換えることができます。
const numbers = [2, 100, 53, 1, 38, 1000];
const sortNumbers = numbers.sort((a, b) => a - b);
console.log(sortNumbers); //[1, 2, 38, 53, 100, 1000]実行結果
出力結果は同じですが、さっきよりもコードがシンプルになりました。
比較関数は、正の数をより大きく、負の数をより小さくして記述すると、短いコードで済ませることができます。それが「a – b」の部分です。
また、関数式からアロー関数に書き換えることで、よりすっきりとしたコードになります。
実際には、プログラムを書く人やチームによってわかりやすいコードの基準が異なり、シンプルすぎるとかえってわかりにくいと感じる人もいます。
そのため、上記の書き方を選択肢の一つとして理解し、自身が書きやすい方法を選択すると良いでしょう。
reverseメソッド
「reverseメソッド」は、配列要素の順番を逆転させます。
こちらはsortメソッドと異なり、非常に単純です。
const numbers = [2, 100, 53, 1, 38, 1000];
const reverseNumbers = numbers.reverse();
console.log(reverseNumbers); //[1000, 38, 1, 53, 100, 2]実行結果
もともと「2, 100, 53, 1, 38, 1000」と格納されていた要素が、「1000, 28, 1, 53, 100, 2」と格納の順番が逆になっているのがわかります。
まとめ
今回は配列要素を並び替えるために使えるメソッドについて解説しました。
配列は、要素の順番を意識する必要があるため、sortメソッドとreverseメソッドを適切に使用できるとメリットが高まります。
- sortメソッドは、Unicodeを基準として要素を並び替える
- sortメソッドは、比較関数を用いることで要素を任意の順番で並び替えできる
- reverseメソッドは、要素が格納されている順番を逆転させて並び替える
これらのポイントを意識して配列での並び替えに役立てていきましょう。
Javascript関連記事
