【JavaScript】オブジェクト配列の要素を別の配列の値で更新・置換する方法

JavaScript開発では、2つのオブジェクト配列を比較し、特定の条件に一致する要素のプロパティを更新したいケースがよくあります。本記事では、「id」プロパティをキーとして照合し、一方の配列の「name」プロパティをもう一方の配列の値で上書きする方法を、具体的なコード例とともに解説します。

課題の内容

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

const arr1 = [
    {id:'124',name:'qqq'},
    {id:'589',name:'www'},
    {id:'45',name:'eee'},
    {id:'567',name:'rrr'}
];
const arr2 = [
    {id:'124',name:'ttt'},
    {id:'45',name:'yyy'}
];

ここで必要となるのは、これら2つの配列を受け取るJavaScript関数です。この関数は、第1引数の配列（arr1）の中から、第2引数の配列（arr2）にも存在する同じ「id」プロパティを持つオブジェクトを検索します。

そして、該当するオブジェクトの「name」プロパティを、arr2側の対応するオブジェクトの「name」の値で置き換えます。

したがって、上記の配列の場合、期待される出力は次のようになります。

const output = [
    {id:'124',name:'ttt'},
    {id:'589',name:'www'},
    {id:'45',name:'yyy'},
    {id:'567',name:'rrr'}
];

つまり、idが「124」と「45」のオブジェクトだけがarr2の情報で更新され、それ以外のオブジェクトは元の状態のまま維持されます。

実装コード

この処理を実現するコードは以下の通りです。

const arr1 = [
    {id:'124',name:'qqq'},
    {id:'589',name:'www'},
    {id:'45',name:'eee'},
    {id:'567',name:'rrr'}
];
const arr2 = [
    {id:'124',name:'ttt'},
    {id:'45',name:'yyy'}
];
const replaceByOther = (arr1, arr2) => {
    for(let i = 0; i < arr1.length; i++){
        const el = arr1[i];
        const index = arr2.findIndex(elm => el['id'] === elm['id']);
        if(index === -1){
            continue;
        }
        el['name'] = arr2[index]['name'];
    };
};
replaceByOther(arr1, arr2);
console.log(arr1);

コードの解説

この関数の動作を順番に見ていきましょう。

• ループ処理： まずforループでarr1の各要素を順番に取り出します。
• IDの照合： findIndex()メソッドを使い、現在注目している要素の「id」と一致する要素がarr2内に存在するかどうかを調べます。
• 一致しない場合： findIndex()が-1を返したとき（一致する要素がないとき）はcontinueで処理をスキップし、元のデータを保持します。
• 一致した場合： 見つかったインデックスを使ってarr2側の「name」の値を取得し、arr1側のオブジェクトに代入して上書きします。

実行結果

コンソールに出力される結果は以下の通りです。

[
    { id: '124', name: 'ttt' },
    { id: '589', name: 'www' },
    { id: '45', name: 'yyy' },
    { id: '567', name: 'rrr' }
]

ご覧の通り、idが「124」のオブジェクトのnameは「qqq」から「ttt」へ、「45」のオブジェクトは「eee」から「yyy」へと正しく置き換えられており、それ以外のオブジェクトは変更されていません。

補足：Mapを使ったより高速な方法

上記の実装では各要素ごとにfindIndex()を呼び出すため、計算量はO(n×m)になります。配列のサイズが大きい場合は、Mapオブジェクトを使って検索を高速化するのがおすすめです。

const replaceByOtherFast = (arr1, arr2) => {
    const map = new Map(arr2.map(obj => [obj.id, obj.name]));
    arr1.forEach(el => {
        if (map.has(el.id)) {
            el.name = map.get(el.id);
        }
    });
};

この方法なら計算量をO(n+m)まで抑えられるため、大量のデータを扱うアプリケーションでも快適なパフォーマンスを維持できます。