【Javascript】sortメソッドのソート方法について調べてみた。知ることで更に使いやすくなる

Javascriptで、配列をソートしてくれるsortメソッドについて、少し調べてみました。sortメソッドの引数にfunctionを指定するのですが、その戻り値によってソートをコントロールできるようです。

どういった条件でソートさせていくのかチェックすることで、今後思い出しやすいようになればと思います。

※単純に一次元・二次元配列を簡単にソートする方法を知りたい場合は、「【Javascript】一次元・二次元配列を簡単にソートする方法」←こちらをご覧ください

スポンサーリンク

sort(・・・)の基本ルール

let test = [5, 3, 4, 1, 2];
test.sort(function(no1, no2) {
  ・・・
});

Javascriptで、配列をソートしてくれるsortメソッドについて、分かっていた方が使いやすい点が2点あります。

1つ目が「test」の部分には、ソートしたい配列を指定するということです。これは問題ないと思います。

2つ目が「function」の戻り値についてです。ルールは簡単で、下記のとおりです。

  1. 戻り値がマイナスの場合、1つ目の引数（上の例だと no1）を前に移動する
  2. 戻り値がプラスの場合、2つ目の引数（上の例だと no2）を前に移動する
  3. 戻り値が 0 の場合、何もしない

    では、昇順、降順にソートする例を見ながら詳しく見ていきたいと思います。

    昇順（小さい順）にソートしたい場合

    昇順（小さい順）にソートしたい場合は、小さい値を前に移動していけばOKです。

    小さい値を前に移動していけばOK？

    たとえば、「3 2 1」と並んでいるとします。これをそれぞれ比較していきながら、昇順（小さい順）に並び替えてみます。

    まず、1つ目「3」と2つ目「2」を比較すると、「2」の方が小さいので、「3」より前に移動します。
    「2 3 1」
    次に、2つ目「3」と3つ目「1」を比較すると、「1」の方が小さいので、「3」より前に移動します。
    「2 1 3」
    入れ替わったので再度、1つ目「2」と2つ目「1」を比較すると、「1」の方が小さいので、「2」より前に移動します。
    「1 2 3」

    後は、どこを比較しても順番は変わりません。以上より、「3 2 1」は昇順（小さい順）に並び変わり、「1 2 3」となりました。

    このように、小さい値をどんどん前に移動していけば、昇順（小さい順）に並び変わります。（※降順（大きい順）も同様です）

    実際にどのように戻り値を設定すれば良いか確認してみます。

    1つ目の要素の方が小さい場合は、1つ目の要素を前に移動したいので、戻り値にマイナスの値を指定して1つ目の要素を前に移動させます。

    また、2つ目の要素の方が小さい場合は、2つ目の要素を前に移動したいので、戻り値にプラスの値を指定して2つ目の要素を前に移動させます。

    すると、常に小さい要素を前に移動していくことになるので、最終的に小さい順、つまり昇順にソートされます。実際にコードを書くと下記のようになります。

    let test = [5, 3, 4, 1, 2];
test.sort(function(no1, no2) {
  let ret = 0; // 戻り値
  if (no1 < no2) {
    // no1（1つ目の要素）の方が小さい場合
    // 1つ目の要素を前に移動させるためにマイナス
    ret = -1;
  } else if (no2 < no1) {
    // no2（2つ目の要素）の方が小さい場合
    // 2つ目の要素を前に移動させるためにプラス
    ret = 1;
  }
  return ret;
});
// test = [1, 2, 3, 4, 5]とソートされます

    コードをシンプルにすると

    let test = [5, 3, 4, 1, 2];
test.sort(function(no1, no2) {
  return no1 - no2;
});
// test = [1, 2, 3, 4, 5]とソートされます

    これだけで上に書いたコードと同じソートを実装できます。

    本当にそうなるか「no1 – no2」を考えてみます。

    • no1の方が小さい場合、「no1-no2」はマイナスになります。よって、1つ目の引数（no1）を前に移動します
    • no2の方が小さい場合、「no1-no2」はプラスになります。よって、2つ目の引数（no2）を前に移動します

    上記のとおり、常に小さい要素の方が前に移動していますので、昇順（小さい順）にソートされていきます。慣れると、こちらの方がコードもスッキリしますし、良いかもしれませんね。

    ただ、あまりピンと来ない場合は、後でコードを確認するときを考えると、先に書いたコードの方が内容は思い出しやすいかもしれないです。

    降順（大きい順）にソートしたい場合

    降順（大きい順）にソートしたい場合は、大きい値を前に移動すればOKです。

    実際にどのように戻り値を設定すれば良いか確認してみます。

    1つ目の要素の方が小さい場合は、1つ目の要素を前に移動したいので、戻り値にマイナスの値を指定して1つ目の要素を前に移動させます。

    また、2つ目の要素の方が小さい場合は、2つ目の要素を前に移動したいので、戻り値にプラスの値を指定して2つ目の要素を前に移動させます。

    すると、常に大きい要素を前に移動していくことになるので、最終的に大きい順、つまり降順にソートされます。

    実際にコードを書くと下記のようになります。

    let test = [5, 3, 4, 1, 2];
test.sort(function(no1, no2) {
  let ret = 0; // 戻り値
  if (no2 < no1) {
    // no1（1つ目の要素）の方が大きい場合
    // 1つ目の要素を前に移動させるためにマイナス
    ret = -1;
  } else if (no1 < no2) {
    // no2（2つ目の要素）の方が大きい場合
    // 2つ目の要素を前に移動させるためにプラス
    ret = 1;
  }
  return ret;
});
// test = [5, 4, 3, 2, 1]とソートされます

    コードをシンプルにすると

    let test = [5, 3, 4, 1, 2];
test.sort(function(no1, no2) {
  return no2 - no1;
});
// test = [5, 4, 3, 2, 1]とソートされます

    これだけで上に書いたコードと同じソートを実装できます。

    こちらも本当にそうなるか「no2-no1」を考えてみます。

    • no1の方が大きい場合、「no2-no1」はマイナスになります。よって、1つ目の引数（no1）を前に移動します
    • no2の方が大きい場合、「no2-no1」はプラスになります。よって、2つ目の引数（no2）を前に移動します

    上記のとおり、常に大きい要素の方が前に移動していますので、降順（大きい順）にソートされていきます。

    まとめ

    javascriptで配列をソートしてくれるsortメソッドについて簡単に調べてみました。

    sortメソッドの引く数に設定するfunction（ソート用関数）には引数を2つ設定し、戻り値がマナイスなら1つ目の引数を、プラスなら2つ目の引数の要素を前に移動する

    これを覚えておけば、使う際にsortメソッドの使い方を調べなくても済むようになりそうです。また、もし忘れてても一度覚えておけば「あーそうだった」とすぐに思い出せそうです。

    実際問題あまり役に立たないかと思いますが、自分が忘れたら見直してみようと思います。

    それでは、最後までお読みいただきありがとうございました！

    スポンサーリンク