【JavaScript】サブ配列の要素も含めて配列全体を並べ替える方法

本記事では、整数のペアを格納したサブ配列からなる配列を受け取り、その中に存在するすべての要素を含めて並べ替えるJavaScript関数の作り方を解説します。

問題の概要

作成するJavaScript関数は、整数の配列を要素として持つ配列（ネストされた配列）を受け取ります。各サブ配列には、必ず2つの整数が含まれているものとします。

この関数は、サブ配列の中身も含めた配列全体を並べ替えた結果を返す必要があります。

入力例

const arr = [
    [4, 2],
    [6, 1],
    [5, 3]
];

期待される出力

const output = [
    [1, 2],
    [3, 4],
    [5, 6]
];

ご覧のとおり、すべての数値が昇順に並べ替えられており、かつ「2つの要素を持つサブ配列」という元の構造は維持されています。

解決策：サンプルコード

以下が、この問題を解決するためのコードです。

const arr = [
    [4, 2],
    [6, 1],
    [5, 3]
];

const sortWithin = (arr = []) => {
    const res = [];
    const temp = [];

    // ステップ1: すべてのサブ配列をフラット化して temp に格納
    for(let i = 0; i < arr.length; i++){
        temp.push(...arr[i]);
    };

    // ステップ2: 数値として昇順にソート
    temp.sort((a, b) => a - b);

    // ステップ3: 2個ずつ取り出してサブ配列として再構築
    for(let i = 0; i < temp.length; i += 2){
        res.push([temp[i], temp[i+1]]);
    };

    return res;
};

console.log(sortWithin(arr));

コンソールへの出力結果

[ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ] ]

コードの仕組みを解説

このアルゴリズムは、大きく分けて3つのステップで処理を行っています。

ステップ1：配列のフラット化

まず、ループ処理の中でスプレッド演算子 ... を使い、各サブ配列の要素を一時的な配列 temp へ展開して格納します。これにより、ネストされた構造が単一の数値配列へと変換されます。

ステップ2：昇順での並べ替え

次に、sort() メソッドに比較関数 (a, b) => a - b を渡して、temp 内の全要素を数値として昇順にソートします。比較関数を指定しない場合、文字列として比較されて意図しない順序になる可能性があるため、必ず明示的に指定することが重要です。

ステップ3：ペア構造の再構築

最後に、インデックスを i += 2 と2つずつ進めながら、隣接する2つの要素を新しいサブ配列として res に追加していきます。これにより、ソート済みの要素が元どおり「2要素のサブ配列」の形式で返却されます。

まとめ

このように、「フラット化 → ソート → 再構築」というシンプルな3段階の処理によって、ネストされた配列の中身も含めた全体の並べ替えを実現できます。Array.prototype.flat() を使えばフラット化をより簡潔に書くことも可能なので、ぜひ応用してみてください。