JavaScriptでオブジェクト配列をマージし、同じIDの数量を合計する方法

はじめに

例えば、ある会社の製品情報を含む2つのオブジェクト配列があるとします。各オブジェクトは製品を識別するidと、その数量を表すquantityというプロパティを持っています。

const first = [
    {
        id: "57e7a1cd6a3f3669dc03db58",
        quantity:3
    },
    {
        id: "57e77b06e0566d496b51fed5",
        quantity:3
    },
    {
        id: "57e7a1cd6a3f3669dc03db58",
        quantity:3
    },
    {
        id: "57e77b06e0566d496b51fed5",
        quantity:3
    }
];
const second = [
    {
        id: "57e7a1cd6a3f3669dc03db58",
        quantity:6
    },
    {
        id: "57e77b06e0566d496b51fed5",
        quantity:6
    }
];

ここで求められているのは、2つの配列を1つにマージする関数です。要件は以下の2点です。

• 同じIDを持つオブジェクトが重複して現れないこと
• 重複したIDを持つオブジェクトのquantityプロパティは合算されること

実装例

それでは、この関数のコードを書いてみましょう。スプレッド構文で2つの配列を連結し、reduce()メソッドを使いながら重複IDをチェックして数量を集計していきます。

const mergeArray = (first, second) => {
    return [...first, ...second].reduce((acc, val, i, arr) => {
        const { id, quantity } = val;
        const ind = acc.findIndex(el => el.id === id);
        if(ind !== -1){
            acc[ind].quantity += quantity;
        }else{
            acc.push({
                id,
                quantity
            });
        }
        return acc;
    }, []);
}
console.log(mergeArray(first, second));

コードのポイント

• [...first, ...second]で2つの配列を1つに連結します。
• reduce()の初期値として空配列[]を指定し、結果を蓄積していきます。
• findIndex()で、すでに同じIDが存在するかどうかを判定します。
• 存在する場合はquantityを加算し、存在しない場合は新しいオブジェクトとして追加します。

実行結果

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

[
    { id: '57e7a1cd6a3f3669dc03db58', quantity: 12 },
    { id: '57e77b06e0566d496b51fed5', quantity: 12 }
]

このように、重複していたIDが1つにまとめられ、それぞれのquantityが合計値(12)になっていることが確認できます。

まとめ

この方法を使えば、複数の配列をマージしながら特定のプロパティを集計できます。ただし、findIndex()を毎回呼び出すため、データ量が多い場合は計算量がO(n²)になります。大規模なデータを扱う場合は、Mapオブジェクトをキーとして使うことで、O(n)の計算量に改善できるので、用途に応じて使い分けるとよいでしょう。