JavaScriptで連続する同じ数値を合計して配列にまとめる方法

JavaScriptで連続する同じ数値を合計する

今回は、配列を受け取り、連続して並んでいる同じ数値を合計してまとめた新しい配列を返す関数を作成する方法を解説します。

例えば、次のような配列があったとします。

const array = [1, 5, 5, 5, 8, 8, 9, 1, 4, 4, 2];

この場合、期待される出力は以下の通りです。

[1, 15, 16, 9, 1, 8, 2]

連続する3つの「5」は合計されて「15」に、連続する2つの「8」は「16」に、連続する2つの「4」は「8」にまとめられています。離れた位置にある同じ数値（例えば先頭の「1」と途中の「1」）は、連続していないためそれぞれ別の値として残る点に注意してください。

実装のアプローチ

この処理を実現するには、Array.prototype.reduce() メソッドを使うのが便利です。reduce() を使えば、元の配列を走査しながら同時に新しい配列を構築できます。

具体的には、アキュムレータとして「結果の配列（arr）」と「直前に処理した値（last）」を持つオブジェクトを用意します。現在の値が直前の値と同じであれば、結果配列の末尾の要素に加算し、異なれば新しい要素として追加します。

コード例

const array = [1, 5, 5, 5, 8, 8, 9, 1, 4, 4, 2];
const sumConsecutive = (array) => {
    return array.reduce((acc, val) => {
        if (acc.last === val) {
            acc.arr[acc.arr.length - 1] += val;
        } else {
            acc.arr.push(val);
            acc.last = val;
        }
        return acc;
    }, { arr: [], last: undefined }).arr;
};
console.log(sumConsecutive(array));

実行結果

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

[
    1, 15, 16, 9,
    1, 8, 2
]

コードのポイント

• 初期値の設定：reduce() の第二引数に { arr: [], last: undefined } を渡すことで、結果配列と直前の値を1つのアキュムレータで管理しています。
• 連続判定：acc.last === val の比較により、現在の値が直前の値と一致するかどうかを判定します。
• 計算量：配列を一度だけ走査するため、時間計算量は O(n) と効率的です。

このように reduce() を活用することで、シンプルかつ可読性の高いコードで連続する数値の合計処理を実現できます。