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

問題の概要

JavaScriptでは、複数のオブジェクトを含む配列を、同じキーごとに値をまとめた「配列を持つオブジェクト」へ変換したいケースがあります。例えば、次のようなオブジェクトの配列があったとしましょう。

const nights = [
    { "2016-06-25": 32, "2016-06-26": 151, "2016-06-27": null },
    { "2016-06-24": null, "2016-06-25": null, "2016-06-26": null },
    { "2016-06-26": 11, "2016-06-27": 31, "2016-06-28": 31 },
];

ここで求められているのは、このような配列を受け取り、各オブジェクトのキーを基準に値をグループ化した「配列のオブジェクト」を生成する関数を作ることです。

つまり、上記の配列に対する期待される出力は以下のようになります。

const output = {
"2016-06-24": [null],
"2016-06-25": [32, null],
"2016-06-26": [151, null, 11],
"2016-06-27": [null, 31],
"2016-06-28": [31]
};

実装コード

この変換を行うコードは以下の通りです。

const nights = [
    { "2016-06-25": 32, "2016-06-26": 151, "2016-06-27": null },
    { "2016-06-24": null, "2016-06-25": null, "2016-06-26": null },
    { "2016-06-26": 11, "2016-06-27": 31, "2016-06-28": 31 },
];
const arrayToObject = (arr = []) => {
    const res = {};
    for(let i = 0; i < arr.length; i++){
        const keys = Object.keys(arr[i]);
        for(let j = 0; j < keys.length; j++){
            if(res.hasOwnProperty(keys[j])){
                res[keys[j]].push(arr[i][keys[j]]);
            }
            else{
                res[keys[j]] = [arr[i][keys[j]]];
            }
        }
    };
    return res;
};
console.log(arrayToObject(nights));

処理の流れ

この関数の動作を整理すると、次のような流れになります。

• まず、結果を格納するための空のオブジェクト res を用意します。
• 外側のループで入力配列の各オブジェクトを順に処理し、Object.keys() ですべてのキーを取得します。
• 内側のループで各キーに対して hasOwnProperty() を使い、結果オブジェクトにそのキーがすでに存在するかどうかを判定します。
• キーが存在すれば、既存の配列に push() で値を追加します。存在しなければ、新しい配列として値を登録します。
• すべての要素の処理が完了したら、結果オブジェクトを返します。

実行結果

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

{
    '2016-06-25': [ 32, null ],
    '2016-06-26': [ 151, null, 11 ],
    '2016-06-27': [ null, 31 ],
    '2016-06-24': [ null ],
    '2016-06-28': [ 31 ]
}

なお、オブジェクトの文字列キーは挿入された順序を保持するため、元データの出現順に出力されます。日付順など特定の順序で並べたい場合は、Object.keys(output).sort() を使ってキーをソートするとよいでしょう。