JavaScriptで配列の一意な要素のみを合計する方法

JavaScriptでは、重複した数値が含まれる可能性のある数値の配列を受け取り、一意な要素(配列内に一度だけ出現する要素)のみを合計して返す関数が必要になることがあります。本記事では、その実装方法をわかりやすく解説します。

具体例

入力配列が次の場合を考えてみましょう。

const arr = [2, 5, 5, 3, 2, 7, 4, 9, 9, 11];

この配列の中で一度だけ出現する要素は「3」「7」「4」「11」です。これらの合計は25となるため、期待される出力は25になります。

アプローチ： forループで重複を判定する

最もシンプルな方法は、forループで配列を反復処理しながら、各要素の出現回数をチェックするものです。indexOf()とlastIndexOf()の結果を比較し、両者が一致しなければその要素は複数回出現しているためスキップし、一致する場合のみ合計に加算します。

コード例

const arr = [2, 5, 5, 3, 2, 7, 4, 9, 9, 11];

const sumUnique = 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(sumUnique(arr));

出力

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

25

別解： filter() と reduce() を組み合わせる

よりモダンで簡潔な書き方として、filter()メソッドで一意な要素だけを抽出し、reduce()で合計を求める方法もあります。

const arr = [2, 5, 5, 3, 2, 7, 4, 9, 9, 11];

const sumUnique = arr => {
    return arr
        .filter(num => arr.indexOf(num) === arr.lastIndexOf(num))
        .reduce((sum, num) => sum + num, 0);
};

console.log(sumUnique(arr)); // 25

どちらのアプローチでも結果は同じですが、filter()とreduce()を使う方法は処理の意図が明確になり、可読性の高いコードになります。データ量が多い配列を扱う場合は、パフォーマンスを考慮して実装方法を選択するとよいでしょう。