JavaScriptで配列内の重複した値を合計して一意化する方法

本記事では、重複する要素を含む数値の配列を受け取り、同じ値を持つ要素をすべて合計して1つの要素にまとめるJavaScript関数の作成方法を解説します。

例えば、入力配列が次のようになっているとします。

const input = [1, 3, 1, 3, 5, 7, 5, 4];

この場合、期待される出力は次のとおりです。

const output = [2, 6, 10, 7, 4];

つまり、重複している「1」は合計されて先頭のインデックスに配置され、重複している「3」はその次のインデックスに、というように処理されます。出力配列では、各一意の値が「値 × 出現回数」という形で1つずつ並ぶことになります。

サンプルコード

以下がその実装例です。

const input = [1, 3, 1, 3, 5, 7, 5, 4];
const mergeDuplicates = arr => {
    const map = arr.reduce((acc, val) => {
        if(acc.has(val)){
            acc.set(val, acc.get(val) + 1);
        }else{
            acc.set(val, 1);
        };
        return acc;
    }, new Map());
    return Array.from(map, el => el[0] * el[1]);
};
console.log(mergeDuplicates(input));

実行結果

コンソールには次のような出力が表示されます。

[ 2, 6, 10, 7, 4 ]

コードの仕組み

この関数は、まずreduce()メソッドを使って配列を走査し、各値の出現回数をMapオブジェクトに記録します。マップのキーには配列の値、バリューには出現回数が格納されます。

Mapは挿入順序を保持するため、一意の値は元の配列で最初に出現した順番どおりに並びます。最後にArray.from()でMapを配列へ変換し、各エントリに対して「キー（値）× バリュー（出現回数）」を計算することで、重複が合計された新しい配列を生成しています。

このアプローチなら、配列を一度走査するだけで済むため効率的であり、任意の数値配列に対して柔軟に対応できます。