JavaScriptで多次元配列の各サブ配列から最大値を取り出す方法

JavaScriptでは、配列の中に配列が入った「多次元配列」を扱う場面がよくあります。本記事では、多次元配列の各サブ配列から最大値を取り出し、それらを新しい配列として返す方法を解説します。

問題の定義

次のような、数値の配列を要素に持つ配列（2次元配列）を考えてみましょう。

const arr = [
    [1, 16, 34, 48],
    [6, 66, 2, 98],
    [43, 8, 65, 43],
    [32, 98, 76, 83],
    [65, 89, 32, 4],
];

この配列に対して関数を実行し、各サブ配列に含まれる最大の数値だけを抜き出した配列を返すことを目標とします。

期待する出力は以下の通りです。

const output = [
    48,
    98,
    65,
    98,
    89
];

実装コード：map()とMath.max()を組み合わせる

最もシンプルで読みやすい実装は、Array.prototype.map()とMath.max()を組み合わせる方法です。

const arr = [
    [1, 16, 34, 48],
    [6, 66, 2, 98],
    [43, 8, 65, 43],
    [32, 98, 76, 83],
    [65, 89, 32, 4],
];

const constructBig = arr => {
    return arr.map(sub => {
        const max = Math.max(...sub);
        return max;
    });
};

console.log(constructBig(arr));

出力結果

コンソールには次のように表示されます。

[ 48, 98, 65, 98, 89 ]

コードの仕組み

• map()メソッド： 元の配列の各要素（サブ配列）に対して処理を行い、その結果を新しい配列として返します。元の配列は変更されません。
• スプレッド構文（...sub）： サブ配列の各要素を個別の引数としてMath.max()に展開します。これにより、配列内のすべての数値を一度に比較できます。
• Math.max()： 渡された複数の数値の中から最大のものを1つ返します。

注意点：サブ配列が空の場合

サブ配列が空の配列だった場合、Math.max()は引数なしで呼ばれることになり、-Infinityを返します。このケースへの対処が必要な場合は、以下のように初期値を指定する方法があります。

const constructBigSafe = arr =>
    arr.map(sub => sub.reduce((a, b) => Math.max(a, b), -Infinity));

このようにreduce()を使えば、空配列でもエラーにならず、意図した挙動を制御できます。

まとめ

多次元配列から各サブ配列の最大値を取得するには、map()で各サブ配列を走査し、スプレッド構文とMath.max()を組み合わせるのが最も簡潔です。データ量が非常に大きい場合や空配列の可能性がある場合は、reduce()を使ったアプローチも検討するとよいでしょう。