JavaScriptでネストされた配列をマージして1次元配列に変換する方法

問題の概要

2つのネストされた（入れ子構造の）配列 arr1 と arr2 を引数として受け取り、それらのすべての要素を含む新しい配列を返すJavaScript関数を作成します。ただし、返される配列は1次元（フラットな構造）である必要があります。

入力例

const arr1 = [
    1, [
        2, [
            4, 5, [
                6
            ]
        ]
    ]
];
const arr2 = [
    11, 12, [
        16, 18, [
            19, 21, [
                23
            ]
        ]
    ]
];

期待される出力

const output = [1, 2, 4, 5, 6, 11, 12, 16, 18, 19, 21, 23];

解決策：再帰を使ったフラット化とマージ

この問題は再帰処理を使うことでエレガントに解決できます。各要素を順番に調べ、要素が配列であれば再帰的に処理を続け、数値であれば結果用の配列に追加していきます。

実装コード

const arr1 = [
    1, [
        2, [
            4, 5, [
                6
            ]
        ]
    ]
];
const arr2 = [
    11, 12, [
        16, 18, [
            19, 21, [
                23
            ]
        ]
    ]
];

const flattenAndMerge = (arr1 = [], arr2 = []) => {
    const res = [];

    const flatten = (arr = []) => {
        for(let i = 0; i < arr.length; i++){
            // 要素が配列の場合は再帰的にフラット化
            if(Array.isArray(arr[i])){
                flatten(arr[i]);
            }
            // 数値の場合は結果配列へ追加
            else if(typeof arr[i] === 'number'){
                res.push(arr[i]);
            };
        };
    };

    flatten(arr1);
    flatten(arr2);
    return res;
};

console.log(flattenAndMerge(arr1, arr2));

コードのポイント

• Array.isArray(): 要素が配列かどうかを判定する組み込みメソッドです。
• 再帰呼び出し: 配列が見つかるたびに関数自身を呼び出すことで、どれほど深いネスト構造にも対応できます。
• デフォルト引数: arr1 = [] のようにすることで、引数が渡されなかった場合でもエラーを防げます。

実行結果

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

[
    1, 2, 4, 5, 6,
    11, 12, 16, 18, 19,
    21, 23
]

補足：Array.prototype.flat() を使った簡潔な書き方

モダンなJavaScriptでは、flat() メソッドに Infinity を指定することで、より簡潔に同じ結果を得られます。

const flattenAndMerge = (arr1 = [], arr2 = []) =>
    [...arr1.flat(Infinity), ...arr2.flat(Infinity)];

flat(Infinity) はすべての階層のネストを一気に解除してくれるため、深さが不明な配列にも対応可能です。ただし、非常に深く複雑なデータ構造を扱う場合は、再帰版の方が柔軟にカスタマイズできるというメリットもあります。