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

JavaScriptのArray.reduce()メソッドとは？基本的な使い方を解説

Array.reduce()メソッドとは

Array.reduce()は、配列の各要素に対して開発者が指定した関数（コールバック関数）を順番に適用し、最終的に単一の値を出力するJavaScriptの配列メソッドです。この処理は「畳み込み（リデュース）」とも呼ばれ、配列内のすべての要素を集約して一つの結果を得たい場合に非常に便利です。

たとえば、配列 [1, 2, 3, 4] の合計を求める場合、reduce()メソッドは左から右へ各要素を順に処理していき、最終的な結果として 10 という単一の値を返します。

基本構文

array.reduce((accumulator, currentValue) => { ... }, initialValue)

各引数の意味は以下のとおりです。
- accumulator（累積値）：前回のコールバックで返された値
- currentValue（現在の要素）：現在処理中の配列の要素
- initialValue（初期値）：累積値の初期値（省略可能）

処理の流れ

配列 [1, 2, 3, 4] を加算関数でreduce()した場合、内部では次のように処理が進みます。

1. 1 + 2 = 3
2. 3 + 3 = 6
3. 6 + 4 = 10

使用例

次の例では、アロー関数を使って配列内の数値の合計を計算しています。

<html>
<body>
<p>Sum of numbers in array: </p>
<script>
   const array = [1, 2, 3, 4];
   const sum = (firstValue, lastValue) => firstValue + lastValue;
   document.write(array.reduce(sum));
</script>
</body>
</html>

出力結果

Sum of numbers in array:10

まとめ

Array.reduce()メソッドを使うことで、配列の合計だけでなく、平均値の算出、オブジェクトの集計、配列のフラット化など、さまざまな集約処理を簡潔なコードで実現できます。複数の要素を一つの値にまとめたい場面では、ぜひreduce()の活用を検討してみてください。

  1. JavaScriptのpopメソッドとは？基本の構文と使い方をわかりやすく解説

    JavaScriptの配列には、データを操作するためのさまざまなメソッドが用意されています。その中のひとつがpopメソッドです。Web開発者は、配列から最後の要素を取り除きたいときや、取り除いた要素を使って何か処理を行いたいときに、このメソッドを活用します。本記事では、popメソッドの基本的な使い方を具体例とともにわかりやすく解説します。 popメソッドの構文 popメソッドの構文は非常にシンプルです。定義上、popメソッドは配列の最後の要素を削除し、その削除した要素を返す働きを持ちます。 let frozen = [ Anna, Elsa, Olaf, Kristoff, Sven ]

  2. JavaScriptのreduce()メソッドを使って配列の平均値を求める方法

    JavaScriptでは、数値の配列を受け取り、そのすべての要素の平均値を計算する関数が必要になる場面がよくあります。通常であればforループなどで合計を求めてから要素数で割るのが一般的ですが、今回はArray.prototype.reduce()メソッドのみを使用するという条件のもとで実装してみましょう。reduce()メソッドによる平均値の計算reduce()メソッドは、配列の各要素に対してコールバック関数（リデューサー）を実行し、単一の結果に集約するための高階関数です。リデューサー関数は以下の4つの引数を受け取ることができます。acc（アキュムレータ）：前回のコールバック実行時の戻り値（