JavaScriptで配列内の重複する値を合計して1つの要素にまとめる方法

問題の概要

数値が格納された配列（重複する要素を含む）を受け取り、重複している値をすべて合計して、同じ値ごとに1つの要素へまとめるJavaScript関数を作成します。

例として、次のような入力配列が与えられたとします。

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

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

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

「1」「3」「5」はそれぞれ2回ずつ出現しているため、合計されて「2」「6」「10」となり、重複のない「7」と「4」はそのままの値で残ります。

サンプルコード

それでは、実際のコードを見ていきましょう。

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

const sumDuplicate = arr => {
   // 各値の出現回数をMapに記録する
   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, ([key, value]) => key * value);
};

console.log(sumDuplicate(input));

実行結果

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

[ 2, 9, 10, 7, 4 ]

コードの解説

このコードは、大きく分けて2段階の処理を行っています。

1. 出現回数のカウント： reduce()メソッドを使い、配列内の各値が何回出現したかをMapオブジェクトに記録します。マップのキーには配列の値そのものを、バリューには出現回数を格納します。初めて登場した値は回数「1」として登録し、以降は既存の回数に1を加えていきます。
2. 合計値の算出： Array.from()を使ってマップを配列に変換しながら、「元の値 × 出現回数」を計算します。これにより、重複していた値は合計された形になり、1度しか出現しなかった値はそのまま残ります。

たとえばサンプルの入力配列では「3」が3回出現しているため、3 × 3 = 9 として出力されます。同様に「5」は2回出現するので 5 × 2 = 10 となり、「7」と「4」はそれぞれ1回のみのため元の値のまま出力されます。