javascript 配列の平均値を求める

作成日 2020.11.28
更新日 2022.07.25
javascript
javascript

javascriptで、配列の平均値を求めるサンプルコードを記述してます。

1. 環境
2. 配列の平均値
3. サンプルコード

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 103.0.5060.134

Javascript サンプル集はこちら

配列の平均値

配列の平均値は、総和から配列の個数で割ることで求めることが可能です。

const arr = [1,2,3,4,5]

let sum = 0;

// 総和を取得
for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
}

console.log( sum / arr.length );

「for文」ではなく、パフォーマンスは落ちますが「forEach」を使用することも可能です。

[...arr].forEach((x) => sum = sum + x)

「reduce」を使用しても、総和を求めることは可能です。パフォーマンスは、for文の方がいいですが、
「forEach」よりはいいです。

sum = arr.reduce((x, y) => x + y)

パフォーマンス比較サンプル

実行回数:1000000回 関数名:for      実行時間:7.70(ms)
実行回数:1000000回 関数名:forEach  実行時間:293(ms)
実行回数:1000000回 関数名:reduce   実行時間:12.1(ms)

サンプルコード

以下は、
「実行」ボタンをクリックすると、ランダムに生成した5個の配列の平均値を計算して表示する
サンプルコードとなります。

※cssには「tailwind」を使用してます。関数はアロー関数を使用してます。

アロー関数の使い方

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>

<script>

  const hoge = () => {

    const arr = Array(5).fill().map(x => ~~(Math.random() * 10));

    // 生成した配列を表示
    disp(arr, "rand");

    let sum = 0;

    arr.forEach((x, i) => sum += x)

    result.innerHTML = sum / arr.length;

  }

  //フロントに表示する関数
  const disp = (arr, id) => {

    let text = [];

    // 配列を利用してforEach文を作成
    arr.forEach((x, i) => text.push('<li class="list-group-item">' + arr[i] + '</li>'))

    //innerHTMLを使用して表示    
    document.getElementById(id).innerHTML = text.join('');
    
  }

  window.onload = () => {
    // クリックイベントを登録
    btn.onclick = () => { hoge() }; // document.getElementById('btn');を省略    
  }

</script>

<body>
  <div class="container mx-auto my-56 w-56 px-4">

    <div class="flex justify-center">
      <p id="result" class="bg-teal-500 text-white py-2 px-4 rounded-full mb-3 mt-4">平均値</p>      
    </div>

    <div class="flex justify-center">
      <ul id="rand"></ul>
    </div>

    <div class="flex justify-center">
      <button id="btn" type="button"
        class="mt-5 bg-transparent border border-red-500 hover:border-red-300 text-red-500 hover:text-red-300 font-bold py-2 px-4 rounded-full">
        実行
      </button>
    </div>
  </div>

</body>

</html>

配列の平均値が計算されていることが確認できます。