【JS】ソートの簡単な書き方

JavaScript

こんにちは、しきゆらです。

台風の影響で天気が悪いですね。

それに伴い、やる気もどこかに飛んでいってしまいました。悲しい。

 

以前、JSで特定の要素のみを前/後ろにまとめる記事を書きました。

【JS】特定のものを前/後ろにソートする

https://wp.me/p6IU5Y-cm

この後、色んなサイトを眺めていると、よりきれいに書く方法を知ったのでメモしておきます。

 

眺めたサイトは以下。

JSのsortに渡す関数は、正負もしくは0を返すことでソートしてくれます。

これを生かして、より簡単に各方法を示してくれていました。

 

今までは、以下のように愚直に分岐させていました。

function(item1, item2){
  if(item1 < item2) return -1;
  else if(item1 > item2) return 1;
  else return 0;
}

しかし、比較するものを計算して、その結果を返す関数を渡しても良いとのことでした。

例えば以下のような感じ。

array = [1,2,3,4,5];
array.sort(function(item1, item2) {
  return item1 - item2;
});

item1とitem2にはarrayの中にある数が渡されてきます。

この2つを計算し、その結果をそのまま返してしまうのです。

パッと見はよくわかりませんが、計算の結果は以下のようになるはずです。

  • item1 < item2 のとき、item1 – item2 < 0
  • item1 = item2 のとき、item1 – item2 = 0
  • item1 > item2 のとき、item1 – item2 > 0

このようになり、きちんとソートしてくれるわけですね。

 

これは、目からウロコでした。

条件式で記述すると3行は使う内容ですが、引き算で表現すると1行で済んでしまいますね。

正直パっと見てわからないと思うので

可読性を取るか、記述量を取るか、という状況かな、と思います。

 

なお、以前の記事を今回の方法で書き換えるとするとこうなると思います。

array = [1,2,3,4,5,6,7,8,9];
array.sort((item1, item2) => {
  return 3 - item1;
});
// => [3, 4, 5, 6, 7, 8, 9, 2, 1]

このようにすると

  • item1 < 3 のとき、 3 – item1 > 0
  • item1 = 3 のとき、 3 – item1 = 0
  • item1 > 3 のとき、 3 – item1 < 0

となり、想定通りの動きをしてくれます。

 

今回はここまで。

おわり。

Posted by しきゆら