質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.38%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

12514閲覧

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

hainan

総合スコア31

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

4クリップ

投稿2017/06/12 07:25

###理解したいこと
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とする場合、比較条件がすべて逆になりますから、降順となるわけです。

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

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

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

総合スコア145876

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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が先にくるようにソートされる の部分がわからず、今日数時間唸っていました・・・。 もう一度、本といただいた回答をにらめっこしながら確認していきます。 ありがとうございます。 無関係な点についても、ご指摘ありがとうございました。 本を参考にまだ勉強している最中で、「何がベストなのか」がまだ理解できておりませんでした。 気になる点がありましたら、(とても勉強になるので)コメントいただけますとありがたいです! 本当にありがとうございました。
guest

0

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

Array.prototype.sort()

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

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

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

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

というわけで、compareFunction(a, b)a-bとすれば昇順になります。

上記sort()の仕様により、
a<bのとき、compareFunction(a, b)<0となり、「a を b より小さい添字に」して、
a>bのとき、compareFunction(a, b)>0となり、「b を a より小さい添字に」するからです。

投稿2017/06/12 07:35

編集2017/06/12 07:39
ozwk

総合スコア13551

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hainan

2017/06/12 09:18 編集

回答ありがとうございます! 参考になりました!
guest

0

投稿2017/06/12 07:35

kanimaru

総合スコア1013

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hainan

2017/06/12 09:18 編集

回答ありがとうございます! 分かりやすいサイトでした・・・別の内容も併せて勉強させていただきます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.38%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問