JavaScriptで配列内の重複要素を合計して新しい配列を作成する方法

今回は、数値の配列を受け取るJavaScript関数を作成します。

この配列には、同じ値が繰り返し含まれている（重複している）場合があります。作成する関数の役割は、重複している要素をすべて合計し、その結果からなる新しい配列を返すことです。

実装の考え方

この問題は、次の2つのステップで解決できます。

1. オブジェクト（マップ）を用意し、各要素が出現した回数を記録する
2. 各要素について「値 × 出現回数」を計算し、新しい配列に格納する

コード例

実際のコードは以下のとおりです。

const arr = [20, 20, 20, 10, 10, 5, 1];
const sumIdentical = (arr = []) => {
    let map = {};
    for (let i = 0; i < arr.length; i++) {
        let el = arr[i];
        map[el] = map[el] ? map[el] + 1 : 1;
    };
    const res = [];
    for (let count in map) {
        res.push(map[count] * count);
    };
    return res;
};
console.log(sumIdentical(arr));

コードの解説

まず、空のオブジェクト map を用意し、配列をループしながら各要素の出現回数をカウントしています。三項演算子を使うことで、要素がすでに登録されている場合は回数を+1し、初登場の場合は1を設定しています。

次に、map の各キー（要素の値）に対して「出現回数 × 値」を計算し、結果を格納する配列 res に追加していきます。

出力

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

[ 1, 5, 20, 60 ]

入力配列 [20, 20, 20, 10, 10, 5, 1] の場合、各要素は次のように処理されます。

・20 は3回出現 → 20 × 3 = 60
・10 は2回出現 → 10 × 2 = 20
・5 は1回出現 → 5 × 1 = 5
・1 は1回出現 → 1 × 1 = 1

そのため、最終的な結果は [1, 5, 20, 60] となります。このように、マップを使った出現回数のカウントは、重複データの集計処理においてシンプルかつ効率的なアプローチです。