ネストされた配列のデータをJavaScriptオブジェクトに変換する方法

課題

まず、次のように「配列の中に配列が入った」ネストされたデータ構造があると仮定しましょう。

const arr = [
    [
        ['dog', 'Harry'], ['age', 2]
    ],
    [
        ['dog', 'Roger'], ['age', 5]
    ]
];

ここで求められているのは、このようなネストされた配列を受け取り、その内容をもとにオブジェクトの配列を作成するJavaScript関数を実装することです。

上記の配列に対して関数を実行した場合、期待される出力は以下のとおりです。

const output = [
    { dog: 'Harry', age: 2 },
    { dog: 'Roger', age: 5 }
];

実装例

実際のコードは次のようになります。

const arr = [
    [
        ['dog', 'Harry'], ['age', 2]
    ],
    [
        ['dog', 'Roger'], ['age', 5]
    ]
];

const prepareObjectArray = (arr = []) => {
    const copy = arr.slice();
    copy.forEach((el, ind, array) => {
        el.forEach((element, index, subArray) => {
            subArray[element[0]] = element[1];
        });
        el.length = 0;
        array[ind] = Object.assign({}, array[ind]);
    });
    return copy;
};

console.log(prepareObjectArray(arr));

出力

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

[ { dog: 'Harry', age: 2 }, { dog: 'Roger', age: 5 } ]

コードの解説

この関数の処理の流れは以下のとおりです。

1. arr.slice() で元の配列のコピーを作成し、元のデータを破壊しないようにしています。
2. 外側の forEach で犬ごとのグループを走査し、内側の forEach で [キー, 値] のペアを配列自身のプロパティとして動的に設定しています。
3. el.length = 0 によって配列の要素をすべて取り除いた後、Object.assign() を使って配列をプレーンなオブジェクトへ変換しています。

よりシンプルな代替手法：Object.fromEntries()

ES2019以降で利用できる Object.fromEntries() を使うと、同じ処理をはるかに簡潔に記述できます。

const prepareObjectArray = (arr = []) =>
    arr.map(pairs => Object.fromEntries(pairs));

console.log(prepareObjectArray(arr));
// [ { dog: 'Harry', age: 2 }, { dog: 'Roger', age: 5 } ]

各サブ配列が [キー, 値] 形式のペアを持っているため、そのまま Object.fromEntries() に渡すだけで自動的にオブジェクトへ変換されます。モダンなJavaScript環境では、こちらの方法を採用するのがおすすめです。