JavaScriptで配列の配列をオブジェクトに変換する方法

はじめに

JavaScriptでは、「キーと値のペア」を格納した配列の配列（ネストされた配列）を、扱いやすいオブジェクトへ変換したい場面がよくあります。本記事では、その具体的な実装方法をわかりやすく解説します。

例として、あるクリケット選手の成績データを表す次のような配列の配列を想定してみましょう。

const arr = [
    ['Name', 'V Kohli'],
    ['Matches', 13],
    ['Runs', 590],
    ['Highest', 183],
    ['NO', 3],
    ['SR', 131.5]
];

各サブ配列は1組のキーと値のペアを表しており、最初の要素がキー、2番目の要素がその値に対応します。このデータ構造から、次のようなオブジェクトを生成して返す関数を実装するのが目的です。

const output = {
    Name: 'V Kohli',
    Matches: 13,
    Runs: 590,
    Highest: 183,
    NO: 3,
    SR: 131.5
};

forループを使った基本的な実装例

以下のコードでは、for...ofループで配列を順番に走査し、分割代入（デストラクチャリング）によって各サブ配列からキーと値を取り出しながら、空のオブジェクトにプロパティを追加していきます。

const arr = [
    ['Name', 'V Kohli'],
    ['Matches', 13],
    ['Runs', 590],
    ['Highest', 183],
    ['NO', 3],
    ['SR', 131.5]
];
const arrayToObject = (arr = []) => {
    const res = {};
    for(pair of arr){
        const [key, value] = pair;
        res[key] = value;
    };
    return res;
};
console.log(arrayToObject(arr));

なお、より安全なコードにするには、ループ変数を for(const pair of arr) のように宣言しておくことをおすすめします。宣言なしで記述すると、暗黙的にグローバル変数が作られてしまうためです。

実行結果

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

{
    Name: 'V Kohli',
    Matches: 13,
    Runs: 590,
    Highest: 183,
    NO: 3,
    SR: 131.5
}

補足：Object.fromEntries()を使ったより簡潔な方法

ES2019以降で使用できる Object.fromEntries() を活用すれば、同じ変換をたった1行で実現できます。

const output = Object.fromEntries(arr);
console.log(output);
// {
//    Name: 'V Kohli',
//    Matches: 13,
//    Runs: 590,
//    Highest: 183,
//    NO: 3,
//    SR: 131.5
// }

まとめ

キーと値のペアを持つ配列の配列は、for...ofループと分割代入を組み合わせた手続き的な方法でも、Object.fromEntries() を使った簡潔な方法でも、簡単にオブジェクトへ変換できます。対応ブラウザの範囲や可読性などの要件に応じて、最適な手法を選択するとよいでしょう。