javascript の比較関数がわからない

###理解したいこと
javascriptの比較関数が理解できません。
分かりやすいサイトを探しているのですが、
どなたか教えていただけないでしょうか。

###発生している問題・エラーメッセージ
「3ステップでしっかり学ぶ Java Script入門」という本で勉強をしています。
arrayオブジェクトの説明文に、sortメソッドの並び替えを行う構文がありました。

sortメソッドの動きは理解できたのですが、
何故、比較関数（return a - b;）を使うと綺麗にソートできるのか
調べてもわかりませんでした。

<script type="text/javascript">

 function compare(a, b){
  return a - b;
  }

 var ages = new Array(4, 6, 10, 24, 1, 11, 40);
 ages = ages.sort(compare);
 document.write(ages.join(" > "));


</script>

###試したこと
以下のサイトを見つけ、コメントの説明を読んでみましたが
理解できませんでした・・・。

（sortメソッドの仕組みはわかりました。）

比較関数の意味がよくわからん。

Sort()メソッドはデフォルトで、a,b,c,dと並んでいる場合、先頭から順にa<=bならa,bのまま、a>bならb,aに、という作業を繰り返していきます。ですから、比較関数で、何によってソートさせたいかを指定することで、いろいろなソートが実現可能になります。b-aとする場合、比較条件がすべて逆になりますから、降順となるわけです。

どなたか、わかりやすいサイトや説明があるサイトをご教授いただけないでしょうか。

行動規範の内容に同意します

回答3件

ベストアンサー

こちらの解説にあるとおりで、

compareFunction が与えられた場合、配列の要素は比較関数の返り値に基づきソートされます。もし a と b が比較されようとしている要素の場合、

・compareFunction(a, b) が 0 未満の場合、a を b より小さい添字にソートします。
・compareFunction(a, b) が 0 を返す場合、a と b は互いに関して変えることなく、他のすべての要素に関してソートします。注意: ECMAScript 標準はこの振る舞いを保証しておらず、そのため一部のブラウザ (例えば、遅くとも 2003 年以前のバージョンの Mozilla) はこれを尊重していません。
・compareFunction(a, b) が 0 より大きい場合、b を a より小さい添字にソートします。

つまり、この関数の結果としては、0かプラスかマイナスかだけが考慮されます。実際にreturn a-bを考えてみると、

a > bのとき…a - bはプラス、つまりaのほうが後にくるようにソートされる
a == bのとき…a - bはゼロ、どちらが先にくるかは（Chromeの場合）わからない
a < bのとき…a - bはマイナス、つまりaが先にくるようにソートされる

ということで、文字として出力している不等号とは逆向きのソート順となりそうです。

なお、無関係なところで気になる点がいくつかありました。

配列を作る際はnew Array(1, 2, 3)より[1, 2, 3]のほうが簡潔だしわかりやすい
配列の.sortはもとの配列を直接変更するので、結果を代入しないages.sort(compare);だけでいい
document.writeはいまどき使うべきでない（テスト用ならconsole.logのほうが便利）

投稿2017/06/12 07:43

編集2017/06/12 08:00

maisumakun

総合スコア145184

ozwk

2017/06/12 07:52

何も指定しないときは文字列比較になるので、 [ 1, 10, 11, 24, 4, 40, 6 ] になるのでは

maisumakun

2017/06/12 07:59

そうですね、修正します。

hainan

2017/06/12 09:17

回答ありがとうございました！ a > bのとき…a - bはプラス、つまりaのほうが後にくるようにソートされる a == bのとき…a - bはゼロ、どちらが先にくるかは（Chromeの場合）わからない a < bのとき…a - bはマイナス、つまりaが先にくるようにソートされるの部分がわからず、今日数時間唸っていました・・・。もう一度、本といただいた回答をにらめっこしながら確認していきます。ありがとうございます。無関係な点についても、ご指摘ありがとうございました。本を参考にまだ勉強している最中で、「何がベストなのか」がまだ理解できておりませんでした。気になる点がありましたら、（とても勉強になるので）コメントいただけますとありがたいです！本当にありがとうございました。

行動規範の内容に同意します

困ったときのリファレンス

Array.prototype.sort()

compareFunction が与えられた場合、配列の要素は比較関数の返り値に基づきソートされます。もし a と b が比較されようとしている要素の場合、

compareFunction(a, b) が 0 未満の場合、a を b より小さい添字にソートします。

compareFunction(a, b) が 0 を返す場合、a と b は互いに関して変えることなく、他のすべての要素に関してソートします。注意: ECMAScript 標準はこの振る舞いを保証しておらず、そのため一部のブラウザ (例えば、遅くとも 2003 年以前のバージョンの Mozilla) はこれを尊重していません。