JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで数値ソートを実行する方法をわかりやすく解説

JavaScriptで配列内の数値を並べ替えるには、sort()メソッドを使用します。ただし、単純にsort()を呼び出すだけでは期待どおりの結果にならないため、数値ソートには比較関数を渡す必要があります。本記事では、その理由と具体的な実装方法をサンプルコード付きで解説します。

なぜ比較関数が必要なのか

sort()メソッドを引数なしで呼び出すと、配列の要素はすべて文字列に変換された上で、辞書順（Unicodeのコードポイント順）にソートされます。そのため、[9, 20, 75]のような数値配列では、「9」が「20」よりも後ろに配置されるなど、直感に反した結果になることがあります。

この問題を回避するために、比較関数を引数として渡します。比較関数は2つの引数を受け取り、以下のように動作します。

  • 戻り値が負の数の場合：第1引数が先に来る
  • 戻り値が0の場合：順序は変わらない
  • 戻り値が正の数の場合：第2引数が先に来る

return val1 - val2;と記述すれば、差の符号によって自動的に昇順ソートが実現できます。

数値ソートのサンプルコード

以下は、配列内の数値を昇順にソートするHTMLの完全なサンプルです。document.write()を使って、ソート前とソート後の配列の状態を画面に出力しています。

<!DOCTYPE html>
<html>
<body>
<script>
   var arr = [75, 20, 90, 9, 49, 32, 69, 66];
   document.write("Initial Values: " + arr);

   function myFunction() {
      arr.sort(function(val1, val2){
         return val1 - val2;
      });
      document.write("<br>Sorted Values: " + arr);
   }

   myFunction();
</script>
</body>
</html>

実行結果

このコードを実行すると、ブラウザには次のように表示されます。

Initial Values: 75,20,90,9,49,32,69,66
Sorted Values: 9,20,32,49,66,69,75,90

バラバラだった数値が、小さい順（昇順）にきちんと整列していることが確認できます。

降順にソートしたい場合

大きい順（降順）に並べ替えたい場合は、比較関数の引き算を逆にしてreturn val2 - val1;とするだけでOKです。

arr.sort(function(val1, val2){
   return val2 - val1; // 降順ソート
});

補足：アロー関数を使った書き方

ES6以降では、アロー関数を使うことでより簡潔に記述できます。

arr.sort((a, b) => a - b); // 昇順
arr.sort((a, b) => b - a); // 降順

このように、JavaScriptで数値を正しくソートするポイントは「比較関数を渡すこと」です。デフォルトの文字列ソートの挙動を理解しておけば、意図しないバグを未然に防ぐことができます。

  1. JavaScriptでカスタムソート関数を定義する方法をわかりやすく解説

    JavaScriptのsort()メソッドでは、比較用のコールバック関数（カスタムソート関数）を渡すことで、独自の並び替えルールを実現できます。カスタムソート関数の基本ルールカスタムソート関数を定義するには、配列内の1番目の値と2番目の値を比較します。戻り値によって並び順が決まります。1番目の値が2番目の値より大きい場合 → -1 を返す1番目の値が2番目の値より小さい場合 → 1 を返すどちらでもない場合（等しい場合）→ 0 を返すこのルールに従うと、データは降順（大きい順）にソートされます。もし昇順（小さい順）で並べたい場合は、上記の処理を逆向きにして、大きい場合に 1 を、小さい場合に

  2. 【JavaScript】数字と英字が混在する配列を自然な順序でソートする方法

    英数字混在配列のソートとはまず、次のような英字と数字が混ざった文字列の配列を想定してみましょう。const arr = [A1, A10, A11, A12, A3A, A3B, A3, A4, B10, B2, F1, 1, 2, F3];この配列を唯一の引数として受け取り、元の配列自身（インプレース）を並べ替えるJavaScript関数を作成します。ソートのルールは以下のとおりです。数字だけで構成される文字列は先頭に集め、昇順で並べる。英字と数字が組み合わさった文字列は、まず英字の順に、同じ英字の場合は続く数字の昇順で並べる。つまり、期待される出力は次のようになります。const outp