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

JavaScriptで配列をソートする方法を具体例付きで解説｜昇順・降順の書き方

配列のソートとは

ソートとは、配列内の要素を昇順（小さい順）または降順（大きい順）に並べ替える処理のことです。JavaScriptではArray.prototype.sort()メソッドを使用することで、比較関数（compare関数）のロジックに従って配列を柔軟に並べ替えることができます。

sort()メソッドに渡す比較関数は、比較対象となる2つの要素（a と b）を受け取ります。戻り値が負の値であれば a が b の前に、正の値であれば b が a の前に配置されます。この仕組みを活用すれば、単純な数値の並べ替えだけでなく、オブジェクトの特定プロパティを基準にしたソートも簡単に実装できます。

例1：寿命（生年〜没年の年数）を基準に降順でソートする

以下のプログラムでは、persons 配列の各オブジェクトが持つ birthdate（生年）と death（没年）から寿命を計算し、寿命が長い順（降順）に配列を並べ替えています。「lastPerson > nextPerson」の場合に -1 を返すことで、値が大きい要素が前方に配置されるように制御しています。

<html>
<body>
<script>
    var persons = [
                    { name: 'rajesh', birthdate: 1845, death: 1875 },
                    { name: 'Bharat', birthdate: 1909, death: 1917},
                    { name: 'baba', birthdate: 1950, death: 1972 },
                    { name: 'Tanish', birthdate: 2039, death: 2067 },
                    { name: 'rahim', birthdate: 1989, death: 2049 }
            ]
    var sortedArray = persons.sort(function(a,b) {
    var lastPerson = a.death - a.birthdate;
    var nextPerson = b.death - b.birthdate;
    if (lastPerson > nextPerson) {
    return -1;
    } else {
    return 1;
    }
    });
    console.log(sortedArray);
</script>
</body>
</html>

ブラウザコンソールの出力結果

{name: "rahim", birthdate: 1989, death: 2049}
{name: "rajesh", birthdate: 1845, death: 1875}
{name: "Tanish", birthdate: 2039, death: 2067}
{name: "baba", birthdate: 1950, death: 1972}
{name: "Bharat", birthdate: 1909, death: 1917}

例2：寿命を基準に昇順でソートする

続いて、比較条件を逆にしたパターンです。「lastPerson < nextPerson」の場合に -1 を返すことで、寿命が短い順（昇順）に配列が並べ替えられます。

<html>
<body>
<script>
    var persons = [
                    { name: 'rajesh', birthdate: 1845, death: 1875 },
                    { name: 'Bharat', birthdate: 1909, death: 1917},
                    { name: 'baba', birthdate: 1950, death: 1972 },
                    { name: 'Tanish', birthdate: 2039, death: 2067 },
                    { name: 'rahim', birthdate: 1989, death: 2049 }
            ]
    var sortedArray = persons.sort(function(a,b) {
    var lastPerson = a.death - a.birthdate;
    var nextPerson = b.death - b.birthdate;
    if (lastPerson < nextPerson) {
    return -1;
    } else
    {
    return 1;
    }
    });
    console.log(sortedArray);  
</script>
</body>
</html>

ブラウザコンソールの出力結果

{name: "Bharat", birthdate: 1909, death: 1917}
{name: "baba", birthdate: 1950, death: 1972}
{name: "Tanish", birthdate: 2039, death: 2067}
{name: "rajesh", birthdate: 1845, death: 1875}
{name: "rahim", birthdate: 1989, death: 2049}

まとめ

sort()メソッドに比較関数を渡せば、オブジェクト配列でも任意の計算結果を基準に並べ替えが可能です。比較関数の戻り値の符号（負／正）を入れ替えるだけで、降順と昇順を簡単に切り替えられます。なお、sort()は元の配列を直接変更する破壊的なメソッドである点には注意が必要です。元の配列を残しておきたい場合は、スプレッド構文（[...array]）でコピーを作成してからソートすると安全です。

  1. 【初心者向け】JavaScriptでオブジェクトのディープクローンを作成する方法を実例付きで解説

    はじめにJavaScriptでは、単純な代入（=）やObject.assign()などによるコピーはシャローコピー（浅いコピー）となり、元のオブジェクトとプロパティへの参照が共有されてしまいます。そのため、一方を変更するともう一方にも影響が及びます。これを防ぐには、参照関係まで完全に切り離したディープクローン（深いコピー）を作成する必要があります。本記事では、JSON.parse(JSON.stringify()) を使ったシンプルな方法で、オブジェクトのディープクローンを作成する例を紹介します。ディープクローンのサンプルコード以下のコードでは、ボタンをクリックすると元のオブジェクト obj

  2. JavaScriptで配列の要素を同じ配列内に複製する方法

    JavaScriptでは、concat()メソッドとsort()メソッドを組み合わせることで、既存の配列の要素を同じ配列内に複製することができます。ここでは、実際に動作するサンプルコードを使って、その手順をわかりやすく解説します。 コード例 以下は、配列の要素を同じ配列内に複製するためのコード例です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" cont