JavaScriptでネストされた配列内のオブジェクトをキーごとにグループ化する方法

ここでは、親配列(parentArray)の中に、それぞれ同じサイズの複数のサブ配列が格納されているケースを考えます。各サブ配列は、key と value という2つのプロパティを持つオブジェクトの配列です。同一のサブ配列内で同じキーを持つオブジェクトが重複することはなく、すべてのサブ配列は同じ n 個のキー(n はサブ配列のサイズ)で構成されているものとします。

私たちの目的は、オブジェクトの key をプロパティ名とし、その値として「同じキーを持つすべての value を集めた配列」を持つようなオブジェクトを作成することです。

サンプルデータ

今回使用する親配列のサンプルは以下の通りです。

const parentArray = [[
    {
       key: 123,
       value: 'India'
    }, {
       key: 124,
       value: 'USA'
    }, {
       key: 125,
       value: 'Japan'
    }, {
       key: 126,
       value: 'Denmark'
    }, {
        key: 127,
       value: 'Austria'
    },
], [
    {
       key: 124,
       value: 'Kenya'
    }, {
       key: 126,
       value: 'UK'
    }, {
       key: 123,
       value: 'Germany'
    }, {
       key: 127,
       value: 'Spain'
    }, {
       key: 125,
       value: 'Portugal'
    },
]];

実装のアプローチ

基本的な考え方はシンプルです。まず親配列をループで走査し、続いて各サブ配列のオブジェクトを1つずつ処理していきます。処理の流れは以下の通りです。

• 結果を格納するための空のマップ(オブジェクト)を用意する
• 各オブジェクトから key と value を取り出す
• そのキーがマップに既に存在すれば、既存の配列に値を追加(push)する
• 存在しなければ、新しい配列を作成して値を格納する

このロジックを実装した完全なコードは以下の通りです。

コード例

const parentArray = [[
    {
       key: 123,
       value: 'India'
    }, {
       key: 124,
       value: 'USA'
    }, {
       key: 125,
       value: 'Japan'
    }, {
       key: 126,
       value: 'Denmark'
    }, {
       key: 127,
       value: 'Austria'
    },
], [
    {
       key: 124,
       value: 'Kenya'
    }, {
       key: 126,
       value: 'UK'
    }, {
       key: 123,
       value: 'Germany'
    }, {
       key: 127,
       value: 'Spain'
    }, {
       key: 125,
       value: 'Portugal'
    },
]];

const map = {};
parentArray.forEach(arr => {
    arr.forEach(obj => {
        const { key, value } = obj;
        if(map[key]){
            map[key].push(value);
        }else{
            map[key] = [value]
        }
    })
});
console.log(map);

実行結果

このコードを実行すると、コンソールには以下のような出力が表示されます。同じキーを持つ値が、きれいに1つの配列へとグループ化されているのが確認できます。

{
    '123': [ 'India', 'Germany' ],
    '124': [ 'USA', 'Kenya' ],
    '125': [ 'Japan', 'Portugal' ],
    '126': [ 'Denmark', 'UK' ],
    '127': [ 'Austria', 'Spain' ]
}

なお、オブジェクトのキーは内部的に文字列として扱われるため、出力では '123' のように引用符付きで表示されます。より厳密なキー管理が必要な場合は、Map オブジェクトを使う選択肢もあります。Map なら数値型のキーをそのまま保持でき、挿入順序も保証されます。