JavaScriptで可変個の配列を1つに連結する方法

本記事では、任意の個数の配列を受け取り、それらすべての要素を連結した1つの配列を返すJavaScript関数の実装方法を解説します。

やりたいこと

たとえば、以下のような複数の配列が入力として与えられた場合を考えてみましょう。

[1, 5], [44, 67, 3], [2, 5], [7], [4], [3, 7], [6]

この場合、期待される出力は次のとおりです。

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

実装コード

レストパラメータとreduce()、concat()を組み合わせることで、簡潔に実装できます。以下がそのコードです。

const a = [1, 5], b = [44, 67, 3], c = [2, 5], d = [7], e = [4], f = [3, 7], g = [6];
const concatArrays = (...arr) => {
    const res = arr.reduce((acc, val) => {
        return acc.concat(...val);
    }, []);
    return res;
};
console.log(concatArrays(a, b, c, d, e, f, g));

コードの解説

この関数では、レストパラメータ「...arr」を使用することで、呼び出し時に渡された任意の個数の配列をまとめて受け取っています。その後、reduce()メソッドの初期値として空の配列[]を用意し、各配列の要素をconcat()で順番に連結していきます。

ここでのポイントは、スプレッド構文「...val」を使っている点です。これにより、配列そのものではなく配列の要素が展開されて連結されるため、ネストした配列にならずフラットな結果が得られます。

別の方法：flat()を使う

ES2019以降が利用できる環境であれば、flat()メソッドを使ってさらにシンプルに書くことも可能です。

const concatArrays = (...arr) => arr.flat();
console.log(concatArrays(a, b, c, d, e, f, g));

どちらの方法でも、配列の個数が動的に変わるケースに柔軟に対応できます。

実行結果

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

[
    1, 5, 44, 67, 3,
    2, 5,  7,  4, 3,
    7, 6
]