【JavaScript】ネストした配列を1行の文字列にフラット化する方法

問題の概要

まず、次のような数値が入れ子になった(ネストされた)配列があるとします。

const arr = [
    [ 0, 0, 0, -8.5, 28, 8.5 ],
    [ 1, 1, -3, 0, 3, 12 ],
    [ 2, 2, -0.5, 0, 0.5, 5.3 ]
];

ここで求められているのは、このようなネストされた数値配列を引数として受け取り、すべての数値を結合して1つの文字列を返すJavaScript関数を作成することです。

生成される文字列のルールは以下のとおりです。

• 隣接する数値同士は半角スペースで区切る
• 隣り合う配列の要素の間はカンマで区切る

実装例

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

const arr = [
    [ 0, 0, 0, -8.5, 28, 8.5 ],
    [ 1, 1, -3, 0, 3, 12 ],
    [ 2, 2, -0.5, 0, 0.5, 5.3 ]
];

const arrayToString = (arr = []) => {
    let res = '';
    for(let i = 0; i < arr.length; i++){
        const el = arr[i];
        const temp = el.join(' ');
        res += temp;
        if(i !== arr.length - 1){
            res += ',';
        }
    };
    return res;
};

console.log(arrayToString(arr));

実行結果

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

0 0 0 -8.5 28 8.5,1 1 -3 0 3 12,2 2 -0.5 0 0.5 5.3

コードの解説

この関数の処理の流れは以下のようになっています。

1. 結果を格納するための空文字列 res を用意します。
2. for ループで外側の配列を順番に走査します。
3. 各内側の配列に対して join(' ') を呼び出し、要素をスペース区切りの文字列に変換します。
4. 変換した文字列を res に連結し、最後の要素でない場合はカンマを追加します。

より簡潔な書き方:mapとjoinの組み合わせ

for ループを使わず、map() と join() を組み合わせれば、同じ処理をわずか1行で実現できます。

const arrayToString = (arr = []) => arr.map(el => el.join(' ')).join(',');

console.log(arrayToString(arr));
// 0 0 0 -8.5 28 8.5,1 1 -3 0 3 12,2 2 -0.5 0 0.5 5.3

この方法では、まず map() によって各内側の配列をスペース区切りの文字列に変換し、その後 join(',') で全体をカンマ区切りで連結しています。コードが短くなるだけでなく、意図も読み取りやすくなるため、実務ではこちらの書き方が推奨されます。