JavaScriptで配列内の重複しない要素だけの合計を求める方法

次のような数値の配列があるとします。

const arr = [14, 54, 23, 14, 24, 33, 44, 54, 77, 87, 77, 14];

この配列の中から一度しか出現しない要素(重複していない要素)だけを取り出し、その合計を計算するJavaScript関数を作成してみましょう。

期待される出力

上記の配列の場合、一度しか出現しない要素は「23、24、33、44、87」の5つです。したがって、出力は以下のようになります。

23 + 24 + 33 + 44 + 87 = 211

実装の考え方

ある要素が配列内で一意かどうかを判定するには、indexOf()とlastIndexOf()の戻り値を比較する方法が有効です。両者が同じインデックスを返す場合、その値は配列内に一度しか存在しないことを意味します。逆に、異なるインデックスを返す場合は重複しているため、合計から除外します。

サンプルコード

const arr = [14, 54, 23, 14, 24, 33, 44, 54, 77, 87, 77, 14];

const nonRepeatingSum = arr => {
  let res = 0;
  for(let i = 0; i < arr.length; i++){
    // 先頭位置と末尾位置が異なる場合は重複要素なのでスキップ
    if(arr.indexOf(arr[i]) !== arr.lastIndexOf(arr[i])){
      continue;
    };
    res += arr[i];
  };
  return res;
};

console.log(nonRepeatingSum(arr));

実行結果

211

別のアプローチ：filter()とreduce()を活用する

より関数型らしい書き方として、filter()で一意な要素だけを抽出し、reduce()で合計を算出する方法もあります。コードが簡潔になり、意図も読み取りやすくなります。

const arr = [14, 54, 23, 14, 24, 33, 44, 54, 77, 87, 77, 14];

const nonRepeatingSum = arr =>
  arr
    .filter((val, i) => arr.indexOf(val) === arr.lastIndexOf(val))
    .reduce((sum, val) => sum + val, 0);

console.log(nonRepeatingSum(arr)); // 211

まとめ

• indexOf()とlastIndexOf()の結果を比較することで、要素が配列内で一意かどうかを簡単に判定できます。
• forループを使う方法でも、filter()+reduce()を使う方法でも、どちらも結果は同じ「211」となります。
• データ量が多い配列を扱う場合は、あらかじめ各要素の出現回数をMapやオブジェクトに記録しておくと、計算量をO(n)に抑えられます。