JavaScriptで2つのオブジェクト配列を連結し、属性の重複データを削除する方法

2つのオブジェクト配列を連結し、特定の属性（例：productId）に基づいて重複データを削除・更新したい場合は、map()メソッドとfind()メソッドを組み合わせるのが効果的です。

基本的な考え方は、片方の配列をmap()で走査しながら、各要素と同じキーを持つオブジェクトをもう一方の配列からfind()で検索します。一致する要素が見つかればその値で上書きし、見つからなければ元のオブジェクトをそのまま返します。

サンプルコード

var details1 =
[
    {
        productDetails:
        {
            isSold: true,
            productId:101
        }
    },
    {
        productDetails:
        {
            isSold: true,
            productId:103
        }
    }
]
var details2 =
[
    {
        productDetails:
        {
            isSold: false,
            productId:101
        }
    }
]
var details3 = details1.map(details1Object=>{
    var newObject= details2.find(obj=>obj.productDetails.productId
    === details1Object.productDetails.productId)
    return newObject? newObject : details1Object
})
console.log(details3)

処理の流れ

• details1に対してmap()を実行し、各要素を順番に処理します。
• find()を使って、details2の中から同じproductIdを持つ要素を検索します。
• 一致する要素が存在すればその要素（新しいデータ）を返し、存在しなければ元のdetails1の要素をそのまま返します。
• この例では、productId「101」がdetails2側のisSold: falseのデータで置き換えられ、重複が解消されます。

プログラムの実行方法

上記のプログラムを実行するには、次のコマンドを使用します。

node fileName.js

ここでは、ファイル名を demo183.js としています。

出力結果

プログラムを実行すると、以下のような出力が得られます。

PS C:\Users\Amit\javascript-code> node demo183.js
[
    { productDetails: { isSold: false, productId: 101 } },
    { productDetails: { isSold: true, productId: 103 } }
]

このように、map()とfind()を組み合わせることで、2つの配列を効率的にマージしながら、指定した属性の重複を排除できます。なお、配列のサイズが大きい場合は、Mapオブジェクトやreduce()を使った実装の方がパフォーマンス面で有利になる場合があります。