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

JavaScriptで配列の平均値を計算する方法

JavaScriptで配列の平均値を求めるには、配列内のすべての要素を合計し、その合計を配列の長さ（要素数）で割ります。要素の合計を求めるには、forEach()メソッドやreduce()メソッドを使うと簡単に実装できます。

コード例

<!DOCTYPE html>
<html lang="en">
<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: blueviolet;
   }
   .sample {
      color: red;
   }
</style>
</head>
<body>
<h1>Calculating average of an array</h1>
<div><pre class="sample"></pre></div>
<div class="result"></div>
<button class="Btn">Check</button>
<h3>Click on the above button to see document state</h3>
<script>
   let resEle = document.querySelector(".result");
   let BtnEle = document.querySelector(".Btn");
   let sampleEle = document.querySelector(".sample");
   let arr = [1, 2, 3, 4, 5, 11, 22];
   sampleEle.innerHTML = arr;
   BtnEle.addEventListener("click", () => {
      let sum = 0;
      arr.forEach((item) => (sum += item));
      resEle.innerHTML = "The average of the array = " + sum / arr.length;
   });
</script>
</body>
</html>

実行結果

JavaScriptで配列の平均値を計算する方法

上記のコードを実行すると、画面には配列の内容が表示されます。

「Check」ボタンをクリックすると、次のように配列の平均値が出力されます −

JavaScriptで配列の平均値を計算する方法

処理の流れの解説

このコードのポイントは次のとおりです。

  • forEach()で合計を計算： 変数sumを0で初期化し、forEach()メソッドを使って配列の各要素を順番に加算していきます。
  • 要素数で割って平均を算出： 合計値sumをarr.length（配列の要素数）で割ることで、平均値を求めています。

補足：reduce()を使ったより簡潔な書き方

同じ処理は、reduce()メソッドを使うと1行で書くこともできます。

const average = arr.reduce((a, b) => a + b, 0) / arr.length;

reduce()は配列の要素を先頭から順に畳み込んで1つの値を返すメソッドのため、合計の計算に非常に適しています。どちらの方法でも結果は同じですが、reduce()の方がコードが短く、意図も明確になるため、実務ではよく使われています。用途やチームのコーディングスタイルに応じて使い分けるとよいでしょう。

  1. 【初心者向け】JavaScriptのreverse()メソッドで配列を逆順にする方法

    JavaScriptのreverse()メソッドは、配列の要素を元の順序と逆順に入れ替えるための便利な関数です。このメソッドを呼び出すと、配列の最初の要素が最後に、最後の要素が最初に移動し、配列全体が反転されます。reverse()メソッドの基本reverse()は配列そのものを変更する「破壊的メソッド」である点に注意してください。つまり、元の配列の順序が直接書き換えられます。元の配列を保持したい場合は、あらかじめslice()やスプレッド構文（[...arr]）などでコピーを作成してからreverse()を使用するのがおすすめです。サンプルコード以下は、ボタンをクリックすると配列の要素が逆順

  2. JavaScriptで配列の中央値を計算する方法をわかりやすく解説

    中央値（メジアン）とは、数値データを小さい順に並べたときにちょうど中央に位置する値のことです。JavaScriptで配列の中央値を求めるには、まず配列をソートし、その後要素数に応じて処理を分けます。要素数が奇数の場合は中央の1つの要素を、偶数の場合は中央に近い2つの要素の平均値を中央値として返します。中央値の計算手順配列をソートする － 数値配列の場合、sort() メソッドに比較関数 (a, b) => a - b を渡して正しく昇順ソートします。中央のインデックスを求める － Math.floor(arr.length / 2) で中央位置を整数として取得します。要素数の判定を行う