JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで配列をreduceする方法｜reduce()メソッドで配列要素を合計する

JavaScriptのreduce()メソッドは、配列の各要素を先頭から順に処理し、その結果を1つの値にまとめる（畳み込む）ための配列メソッドです。数値の合計を求めるだけでなく、配列からオブジェクトを組み立てたり、条件に応じてデータを集約したりと、幅広い場面で活用されています。

reduce()メソッドの基本構文

array.reduce((accumulator, currentValue) => {
  return 戻り値;
}, 初期値);
  • accumulator（アキュムレータ）：直前のコールバック関数が返した値（累積値）。最初のループでは初期値、または配列の第1要素が代入されます。
  • currentValue：現在処理している配列の要素。
  • 初期値：累積値の出発点となる値。省略した場合は配列の最初の要素が使われます。

配列の要素を合計するサンプルコード

以下は、reduce()を使って配列 [1, 3, 5, 6, 9, 22, 15] の合計を求める、HTML＋CSS＋JavaScriptによる完全なコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,
    .sample {
        font-size: 18px;
        font-weight: 500;
        color: red;
    }
    .result {
        color: blueviolet;
    }
    button {
        padding: 8px;
    }
</style>
</head>
<body>
<h1>JavaScriptで配列をreduceする</h1>
<div><pre class="sample">[1,3,5,6,9,22,15]</pre></div>
<div class="result"></div>
<button class="Btn">合計</button>
<h3>上のボタンをクリックすると、配列の要素が合計されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let sampleEle = document.querySelector(".sample");
    let arr = [1, 3, 5, 6, 9, 22, 15];
    sampleEle.innerHTML = arr;
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML =
        "合計 = " +
        arr.reduce((sum, prev) => {
            return sum + prev;
        });
    });
</script>
</body>
</html>

実行結果

ページを開くと、対象となる配列と「合計」ボタンが表示されます。

JavaScriptで配列をreduceする方法｜reduce()メソッドで配列要素を合計する

「合計」ボタンをクリックすると、配列の全要素が加算され、その結果が画面に出力されます。

JavaScriptで配列をreduceする方法｜reduce()メソッドで配列要素を合計する

コードのポイント解説

ボタンのクリックイベントの中では、reduce()を次のように呼び出しています。

arr.reduce((sum, prev) => {
  return sum + prev;
});
  • 第1引数の sum が累積値（アキュムレータ）、第2引数の prev が現在処理中の配列要素です。
  • コールバック関数は配列の要素の数だけ繰り返し実行され、その戻り値が次のループの累積値として引き継がれていきます。
  • この例では初期値を指定していないため、配列の最初の要素（1）が初期値として扱われ、最終的に合計値「61」が返ります。
  1. JavaScriptで2つの配列を乗算する方法｜forループとmap()の実装例

    JavaScriptで2つの配列の各要素同士を乗算し、その結果を新しい配列として取得する方法を解説します。基本的にはforループでインデックスを順番に処理しながら、対応する位置にある要素同士を掛け合わせていくシンプルなアプローチです。 2つの配列を乗算するサンプルコード 以下の例では、「CLICK HERE」ボタンをクリックすると、配列 arr と arr1 の対応する要素が乗算され、結果が新しい配列 multArray に格納された上で画面に表示されます。 <!DOCTYPE html> <html lang=en> <head> <meta ch

  2. JavaScriptのmap()メソッドで配列を変換する方法を解説

    JavaScriptで配列の各要素を別の値に変換したい場合、map()メソッドを使うのが最も一般的で効率的な方法です。map()は、元の配列の各要素に対して指定したコールバック関数を実行し、その戻り値から新しい配列を生成します。元の配列は変更されないため、安全に処理を行えるのが大きな特徴です。 以下は、map()メソッドを使って配列の各要素を2乗に変換するサンプルコードです。 コード例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /&