配列を扱っていると、要素の順番を変更させたい時があります。
特に配列は、要素をインデックスで管理しているため、並び替えを必要とするシチュエーションも多いです。

そこで今回は、配列を変換する際に使える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メソッドは、配列要素の順番を逆転させます。使い方は至ってシンプルです。

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メソッドは、要素が格納されている順番を逆転させて並び替える

これらのポイントを意識して配列での並び替えに役立てていきましょう。

配列メソッドの関連記事

・配列メソッド -追加・削除・抜き取り・分割・結合
・配列メソッド -検索
・配列メソッド -並び替え（当記事）
・配列メソッド -繰り返し
・配列メソッド -新しい配列
・配列メソッド -forEach・map・filterの違い