JavaScriptで配列内の重複キーの値を合計する方法

はじめに

JavaScriptでは、同じキーを持つ複数のオブジェクトが含まれる配列から、キーごとに値を集計したいケースがよくあります。例えば、次のようなオブジェクトの配列を考えてみましょう。

const arr = [
    {'ID-01':1},
    {'ID-02':3},
    {'ID-01':3},
    {'ID-02':5}
];

この配列に対して求められるのは、同一のキーを持つオブジェクト同士の値を合計することです。

したがって、期待される出力は以下のようになります。

const output = [{'ID-01':4}, {'ID-02':8}];

実装の考え方

この問題は、次の手順で解決できます。

• 元の配列を先頭から順にループ処理する
• 各要素のキーが、結果格納用の配列内にすでに存在するかどうかを調べる
• 存在する場合は該当するオブジェクトの値に現在の値を加算し、存在しない場合は新しいオブジェクトとして配列に追加する

サンプルコード

以下がその実装例です。

const arr = [
    {'ID-01':1},
    {'ID-02':3},
    {'ID-01':3},
    {'ID-02':5}
];
const indexOf = function(key){
    return this.findIndex(el => typeof el[key] === 'number')
};
Array.prototype.indexOf = indexOf;
const groupArray = arr => {
    const res = [];
    for(let i = 0; i < arr.length; i++){
        const key = Object.keys(arr[i])[0];
        const ind = res.indexOf(key);
        if(ind !== -1){
            res[ind][key] += arr[i][key];
        }else{
            res.push(arr[i]);
        };
    };
    return res;
};
console.log(groupArray(arr));

出力結果

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

[ { 'ID-01': 4 }, { 'ID-02': 8 } ]

コードのポイント

この実装では、Object.keys()を使って各オブジェクトの最初のキーを取得しています。さらに、findIndex()によって数値型プロパティを持つ要素の位置を検索することで、同じキーのオブジェクトが結果配列内にすでに存在するかどうかを判定しています。

キーが見つかれば+=演算子で値を加算し、見つからなければpush()で新規オブジェクトを追加します。こうすることで、キーごとに値が集約された配列を効率よく作成できます。