JavaScriptでidプロパティに基づいて2つの配列をマージする方法

はじめに

JavaScript開発では、2つのオブジェクト配列を特定のキー(ここではid)に基づいて1つにまとめたい場面がよくあります。例えば、一方の配列にはユーザーのIDと名前が含まれ、もう一方の配列にはユーザーのIDと住所が含まれているようなケースです。本記事では、これら2つの配列を結合して、各ユーザーの情報をすべて含む新しい配列を作成する方法を解説します。

サンプルデータ

今回扱う配列は以下の通りです。

const arr1 = [
    {"id":"123","name":"name 1"},
    {"id":"456","name":"name 2"}
];
const arr2 = [
    {"id":"123","address":"address 1"},
    {"id":"456","address":"address 2"}
];

要件

これら2つの配列を引数として受け取り、3つ目の配列を生成するJavaScript関数を作成します。生成される配列には、対応するユーザーのID・名前・住所がすべて含まれている必要があります。

実装例

コードは以下のようになります。

const arr1 = [
    {"id":"123","name":"name 1"},
    {"id":"456","name":"name 2"}
];
const arr2 = [
    {"id":"123","address":"address 1"},
    {"id":"456","address":"address 2"}
];

const mergeArrays = (arr1 = [], arr2 = []) => {
    let res = [];
    res = arr1.map(obj => {
        const index = arr2.findIndex(el => el["id"] == obj["id"]);
        const { address } = index !== -1 ? arr2[index] : {};
        return {
            ...obj,
            address
        };
    });
    return res;
};

console.log(mergeArrays(arr1, arr2));

コードの解説

この関数の仕組みを順番に見ていきましょう。

• mapメソッド: arr1の各オブジェクトを1件ずつ処理します。
• findIndexメソッド: 各オブジェクトのidと一致する要素をarr2から探し、そのインデックスを取得します。
• スプレッド構文(...): 元のオブジェクト(idとname)を展開しつつ、見つかったaddressを追加した新しいオブジェクトを返します。

もしarr2内に一致するidが存在しない場合、空オブジェクトから分割代入が行われるため、addressはundefinedとなります。エラーが発生せず安全に動作する点もポイントです。

出力結果

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

[
    { id: '123', name: 'name 1', address: 'address 1' },
    { id: '456', name: 'name 2', address: 'address 2' }
]

パフォーマンスを改善する代替案

上記の実装では要素ごとにfindIndexで線形探索を行うため、計算量はO(n×m)になります。データ件数が多い場合は、事前にMapを使ってarr2をidで索引化しておくと、O(n+m)まで高速化できます。

const mergeArraysEfficient = (arr1 = [], arr2 = []) => {
    const map = new Map(arr2.map(obj => [obj.id, obj]));
    return arr1.map(obj => ({
        ...obj,
        address: map.get(obj.id)?.address
    }));
};

大量のデータを扱う実務環境では、こちらのアプローチを採用することをおすすめします。