【JavaScript】配列の前半と後半を混ぜずに個別に昇順ソートする方法

はじめに

JavaScriptでは、配列全体ではなく一部だけを並べ替えたいというケースがあります。本記事では、「オブジェクトを多数含む配列に対して、前半部分を昇順でソートし、後半部分も昇順でソートする。ただし、前半と後半の要素が互いに混ざり合わないようにする」という要件を満たす関数の実装方法を解説します。

サンプルデータ

まず、次のような配列を用意します。

const arr = [
    {id: 1, x: 33},
    {id: 2, x: 22},
    {id: 3, x: 11},
    {id: 4, x: 3},
    {id: 5, x: 2},
    {id: 6, x: 1}
];

この配列には6つのオブジェクトが格納されており、各オブジェクトは id プロパティと数値型の x プロパティを持っています。今回のゴールは、この配列を x プロパティの値を基準に、前半3件と後半3件に分けて、それぞれ独立して昇順に並べ替えることです。

実装コード

実際のコードは以下のようになります。

const arr = [
    {id: 1, x: 33},
    {id: 2, x: 22},
    {id: 3, x: 11},
    {id: 4, x: 3},
    {id: 5, x: 2},
    {id: 6, x: 1}
];

const sortInParts = array => {
    // 元の配列を変更しないようコピーを作成
    const arr = array.slice();
    // xプロパティの値で比較するソート関数
    const sorter = (a, b) => {
        return a['x'] - b['x'];
    };
    // 前半部分を取り出し(元の配列からは削除される)
    const arr1 = arr.splice(0, arr.length / 2);
    // 後半部分をソート
    arr.sort(sorter);
    // 前半部分をソート
    arr1.sort(sorter);
    // 前半と後半を結合して返す
    return [...arr1, ...arr];
};

console.log(sortInParts(arr));

処理の流れを解説

この関数のポイントは以下の通りです。

• array.slice() によって元の配列のコピーを作成しています。これにより、呼び出し元の配列が意図せず変更される副作用を防げます。
• splice(0, arr.length / 2) を使って、配列の前半部分を取り出します。splice は元の配列から要素を削除しながら抽出するため、残りの arr には後半部分だけが残ります。
• 両方の配列に対して同じ比較関数 sorter を使って sort() を呼び出し、x プロパティの値で昇順に並べ替えます。
• 最後にスプレッド構文 [...arr1, ...arr] で前半・後半の順序を保ったまま結合し、新しい配列として返します。

実行結果

コンソールに出力される結果は次の通りです。

[
    { id: 3, x: 11 },
    { id: 2, x: 22 },
    { id: 1, x: 33 },
    { id: 6, x: 1 },
    { id: 5, x: 2 },
    { id: 4, x: 3 }
]

結果を見ると、前半3件(id: 1〜3)は x の値で 11 → 22 → 33 の昇順に、後半3件(id: 4〜6)は x の値で 1 → 2 → 3 の昇順に、それぞれ独立して並べ替えられていることがわかります。前後半の要素が混ざることはありません。

まとめ

配列の一部だけを並べ替えたい場合は、slice でコピーを作成し、splice で分割した上で、それぞれに sort を適用するのがシンプルかつ効果的なアプローチです。このテクニックは、ページネーション表示やチャートのセグメント別データ整理など、さまざまな場面で応用できます。