在 JavaScript 中求平均值的示例

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中求平均值的示例

作者：迹忆客最近更新：2024/03/17 浏览次数：

没有任何内置方法可以在 JavaScript 中获得平均值。我们通常会使用不同的技巧和方法来实现该功能来计算定义值的平均值。

本文将讨论多个示例，以通过自定义声明的函数找到使用 JavaScript 的平均值。

平均值数学公式

要了解 JavaScript 平均值，我们必须知道求平均值的常用数学公式。

average = (sum of all given values) / number of values

这是我们需要执行两个步骤才能获得准确结果的公式。

计算所有给定值的总和
将计算总和的结果除以值的数量

HTML 中的 JavaScript 平均方法示例

下面是 HTML 源代码，它会显示 Click to get Average 按钮；我们将在该按钮的单击事件上调用自定义声明的函数。该函数将使用循环语句计算给定数组值的平均值，并最终返回结果。

我们将在 JavaScript alert() 框中显示计算结果。

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML | JavaScript Average method example
    </title>
    <script type="text/javascript">
    </script>
 
</head>
<body>
 
  <h2>Hi Users Check Average of values (28, 78, 32, 14).</h2>
  <button onclick="calculateAverage()">Click to get Average</button>

<script>
function calculateAverage() {
    // you can change the values of array
   let array = [28, 78, 32, 14]
   let i = 0
   let sum = 0
   let len = array.length;
   let result = 0
    
    // loop for calculate sum of array values
    while (i < len) {
        sum = sum + array[i++];
    }
      result = sum / len
    // simply shows the result in alert box
    alert("Average of ("+array+") is :  "+result);
}
</script>
 
</body>
<html>

在这个 HTML 页面源代码中，我们在点击事件上创建了一个名为 calculateAverage() 的按钮。

你可以看到触发 calculateAverage() 方法的按钮 Click to get Average。在该方法的主体中，我们初始化了一个整数值数组和其他有用的变量来计算平均值。

首先，我们必须计算我们正在寻找的所有给定值的总和以找到平均值。我们迭代代码语句以遍历一个数组到所有索引来执行那个小任务。

为了迭代代码语句，我们通常根据条件实现循环。我们在这里使用了 while 循环，直到给定条件为 true，即当前索引小于数组的长度或 index < length。

我们使用 while 循环逻辑计算了所有数组元素的总和，并将结果存储在 sum 变量中。我们将 sum 变量值除以数组的长度来计算平均值，然后将结果显示在 alert() 框中。

获得相同结果的替代方法

如下所示，你可以通过将 N 个值作为参数传递以返回平均值来获得相同的功能。

function average(...nums) {
  let average = 0;
  for (const num of nums) {
    average += num / nums.length;
  }
  return average;
}
alert(average(28, 78, 32, 14));