【JavaScript】配列と、値が配列のオブジェクトをマージ（zip）する方法

配列と、値が配列のオブジェクトをマージするとは

まず、次のような配列とオブジェクトがあるとします。

const arr = [1, 2, 3, 4, 5];
const obj = {
    group1: ["Ram", "Mohan", "Shyam"],
    group2: ["Jai", "Dinesh"],
};

ここでやりたいのは、この配列とオブジェクトを「zip」して、配列の値をオブジェクト内の各名前（キー）に対応付けた、次のようなネストされた新しいオブジェクトを作成することです。

const output = {
    group1: {
        "Ram": 1,
        "Mohan": 2,
        "Shyam": 3
    },
    group2: {
        "Jai": 4,
        "Dinesh": 5
    }
};

つまり「Ram」には 1、「Mohan」には 2、「Shyam」には 3…というように、配列の要素を先頭から順番に、オブジェクト内の名前に割り当てていくイメージです。

実装の考え方

基本のアプローチはシンプルで、配列の各要素をループで走査しながら、同時に新しいオブジェクトのキーへ値を代入していきます。ポイントは以下のとおりです。

• インデックス i が group1 の要素数より小さい間は、値を group1 側へ振り分ける。
• group1 を超えたら group2 側へ振り分ける。このとき group2 用のインデックスは「i から group1 の要素数を引いた値」になる。
• 各グループのオブジェクトがまだ存在しない場合は、空オブジェクトで初期化してから値を代入する。

サンプルコード

以下が実際のコードです。

const arr = [1, 2, 3, 4, 5];
const obj = {
    group1: ["Ram", "Mohan", "Shyam"],
    group2: ["Jai", "Dinesh"],
};
const zipObject = (arr, obj) => {
    const res = {};
    for(let i = 0; i < arr.length; i++){
        if(obj['group1'][i]){
            if(!res['group1']){
                res['group1'] = {};
            };
            res['group1'][obj['group1'][i]] = arr[i];
        }else{
            if(!res['group2']){
                res['group2'] = {};
            }
            res['group2'][obj['group2'][i - obj['group1'].length]] =
            arr[i];
        };
    };
    return res;
};
console.log(zipObject(arr, obj));

実行結果

このコードを実行すると、コンソールには次のように出力されます。

{
    group1: { Ram: 1, Mohan: 2, Shyam: 3 },
    group2: { Jai: 4, Dinesh: 5 }
}

補足：より汎用的な実装にするには

上記のコードは group1・group2 というキー名に依存しているため、グループの数や名前が変わるとそのまま使えません。実務では Object.entries() を使ってオブジェクトのキーを動的に処理したり、Lodash の _.zipObject() のようなユーティリティを活用したりすると、再利用性が高く保守しやすいコードになります。