JavaScriptでネストされた複数の配列を1つの配列にまとめる方法

JavaScriptでは、配列の中にさらに配列が入った「ネストされた配列」を扱うことがあります。たとえば、次のようなデータ構造を考えてみましょう。

const arr = [
    [{"c": 1},{"d": 2}],
    [{"c": 2},{"d": 3}]
];

ここで必要となるのは、このような配列を第1引数（唯一の引数）として受け取るJavaScript関数の作成です。

作成する関数は、元の配列を直接変更せずに新しい配列を生成し、ネストされた配列を取り除いたうえで、オブジェクトだけをフラット（平坦）に並べた1つの配列へと変換します。

つまり、最終的な出力は次のようになります。

const output = [{"c": 1},{"d": 2},{"c": 2},{"d": 3}];

実装例

まずは、forEach()を使った基本的な実装方法を見てみましょう。外側と内側の配列を順番に走査し、要素を結果用の配列へ追加していくシンプルなアプローチです。

const arr = [
    [{"c": 1},{"d": 2}],
    [{"c": 2},{"d": 3}]
];
const simplifyArray = (arr = []) => {
    const res = [];
    arr.forEach(element => {
        element.forEach(el => {
            res.push(el);
        });
    });
    return res;
};
console.log(simplifyArray(arr));

実行結果

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

[ { c: 1 }, { d: 2 }, { c: 2 }, { d: 3 } ]

より簡潔な方法：Array.prototype.flat()

ES2019以降の環境では、flat()メソッドを使うことで、同じ処理をわずか1行で実現できます。

const output = arr.flat();
console.log(output); // [ { c: 1 }, { d: 2 }, { c: 2 }, { d: 3 } ]

デフォルトでは1階層分しか平坦化されませんが、深くネストされた配列に対してはarr.flat(Infinity)と指定すれば、すべての階層を一度に展開できます。

そのほかにも、flatMap()やreduce()とconcat()を組み合わせる方法など、さまざまなアプローチがあります。コードの可読性や対応ブラウザの範囲などを考慮して、プロジェクトに適した方法を選ぶとよいでしょう。