JavaScript：複数の配列から最大値を抽出して1つの配列にまとめる方法

本記事では、任意の個数の数値配列を引数として受け取り、各インデックス位置における最大値だけを抜き出して新しい配列として返すJavaScript関数の実装方法を解説します。

要件の概要

作成する関数は、可変長引数として複数の数値配列を受け取ります。各サブ配列の同じインデックス位置にある要素同士を比較し、その中で最も大きい値を結果の配列に格納していきます。出力配列の要素数は、元の入力配列に含まれる各サブ配列の要素数と一致します。

コード例

実際のコードは以下の通りです。

const arr1 = [117, 121, 18, 24];
const arr2 = [132, 19, 432, 23];
const arr3 = [32, 23, 137, 145];
const arr4 = [900, 332, 23, 19];

const mergeGreatest = (...arrs) => {
    const res = [];
    arrs.forEach(el => {
        el.forEach((elm, ind) => {
            if(!( res[ind] > elm)) {
                res[ind] = elm;
            };
        });
    });
    return res;
};

console.log(mergeGreatest(arr1, arr2, arr3, arr4));

実行結果

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

[ 900, 332, 432, 145 ]

コードの解説

この関数では、レストパラメータ（...arrs）を使用することで、いくつでも配列を受け取れる柔軟な設計になっています。処理の流れは以下の通りです。

まず、結果を格納するための空の配列 res を用意します。外側の forEach で渡された各配列を順番に処理し、内側の forEach で各要素とそのインデックスを取得します。そして、現在の結果配列の同じ位置にある値よりも大きい場合にのみ値を上書きします。この条件式 !(res[ind] > elm) により、res[ind] が未定義の場合や、既存の値より大きい場合に更新が行われます。

すべての配列の走査が完了した時点で、各インデックス位置における最大値が res に残り、それが戻り値として返されます。

別のアプローチ：Math.max を活用する方法

より簡潔に記述したい場合は、Math.max と map を組み合わせる方法もあります。ただし、この方法はすべての配列が同じ長さであることが前提となる点に注意してください。

const mergeGreatest = (...arrs) =>
  arrs[0].map((_, i) => Math.max(...arrs.map(arr => arr[i])));

console.log(mergeGreatest(arr1, arr2, arr3, arr4));
// [ 900, 332, 432, 145 ]

最初の配列の長さを基準に map でループし、各インデックス位置で全配列の該当要素を Math.max に渡すことで最大値を求めています。ネストした forEach よりも宣言的で読みやすいのが特徴です。