JavaScript计算数组平均值的正确方法-html教程-PHP中文网

JavaScript计算数组平均值的正确方法

DDD

发布： 2025-09-24 20:21:21

原创

369人浏览过

javascript计算数组平均值的正确方法

本文旨在帮助开发者理解并掌握使用 JavaScript 计算数组平均值的方法。我们将分析常见的错误做法，并提供经过验证的正确代码示例，确保你能够准确、高效地计算数组的平均值。本文将涵盖数组求和、类型转换以及避免常见错误等关键知识点，助你编写更健壮的 JavaScript 代码。

数组平均值的计算

在 JavaScript 中，计算数组的平均值是一个常见的任务。它通常涉及将数组中的所有元素相加，然后将总和除以数组中元素的数量。以下是实现此目的的几种方法，以及需要注意的常见陷阱。

使用 reduce() 方法

reduce() 方法是 JavaScript 中用于将数组归约为单个值的强大工具。它可以用于计算数组的总和，然后轻松地计算平均值。

const marks = [100, 100, 100, 100, 100];
const average = marks.reduce((a, b) => a + b, 0) / marks.length;
console.log(`Average: ${average}`); // 输出: Average: 100

登录后复制

在这个例子中，reduce() 方法将数组 marks 中的所有元素相加。初始值为 0。然后，将总和除以 marks.length（即数组中元素的数量）以获得平均值。

立即学习“Java免费学习笔记（深入）”；

解决类型问题

从 HTML 输入字段获取的值通常是字符串类型。在将它们添加到数组并计算平均值之前，需要将它们转换为数字。可以使用 parseInt() 或 parseFloat() 函数来实现。

算家云

高效、便捷的人工智能算力服务平台

查看详情

function he() {
    var subcount = document.getElementById("eh").value;
    var marks1 = document.getElementById("num1").value;
    var marks2 = document.getElementById("num2").value;
    var marks3 = document.getElementById("num3").value;
    var marks4 = document.getElementById("num4").value;
    var marks5 = document.getElementById("num5").value;

    var marks =  []

    marks.push(parseInt(marks1)); // 将字符串转换为数字
    marks.push(parseInt(marks2));
    marks.push(parseInt(marks3));
    marks.push(parseInt(marks4));
    marks.push(parseInt(marks5));

    const sum = marks.reduce((partialSum, a) => partialSum + a, 0);

    document.getElementById("demo").textContent = sum / subcount

    // console.log(marks)

}

登录后复制

如果不进行类型转换，JavaScript 会将字符串连接起来，而不是将它们相加，导致不正确的结果。

避免除以零

在计算平均值时，务必确保数组不为空，以避免除以零的错误。可以添加一个简单的检查来处理这种情况。

function calculateAverage(arr) {
  if (arr.length === 0) {
    return 0; // 或者返回其他适当的默认值或错误消息
  }
  const sum = arr.reduce((a, b) => a + b, 0);
  return sum / arr.length;
}

const emptyArray = [];
const averageOfEmptyArray = calculateAverage(emptyArray);
console.log(`Average of empty array: ${averageOfEmptyArray}`); // 输出: Average of empty array: 0

登录后复制

完整示例

以下是一个完整的 HTML 和 JavaScript 示例，演示了如何从输入字段获取数字，计算平均值，并在页面上显示结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculate Average</title>
</head>
<body>
    <form onsubmit="return false;">
        <label for="sub">Number of Subjects:</label>
        <input type="number" id="eh" /><br /><br />

        <label for="num1">Subject 1 marks:</label><br />
        <input type="number" name="num" id="num1" /><br />

        <label for="num2">Subject 2 marks:</label><br />
        <input type="number" name="num" id="num2" /><br />

        <label for="num3">Subject 3 marks:</label><br />
        <input type="number" name="num" id="num3" /><br />

        <label for="num4">Subject 4 marks:</label><br />
        <input type="number" name="num" id="num4" /><br />

        <label for="num5">Subject 5 marks:</label><br />
        <input type="number" name="num" id="num5" /><br />

        <input type="submit" value="Submit" onclick="calculateAndDisplayAverage()" />
    </form>

    <p id="demo"></p>

    <script>
        function calculateAndDisplayAverage() {
            var subcount = parseInt(document.getElementById("eh").value);
            var marks1 = parseInt(document.getElementById("num1").value);
            var marks2 = parseInt(document.getElementById("num2").value);
            var marks3 = parseInt(document.getElementById("num3").value);
            var marks4 = parseInt(document.getElementById("num4").value);
            var marks5 = parseInt(document.getElementById("num5").value);

            var marks = [];

            marks.push(marks1);
            marks.push(marks2);
            marks.push(marks3);
            marks.push(marks4);
            marks.push(marks5);

            // 移除数组中的 NaN 值
            const validMarks = marks.filter(mark => !isNaN(mark));

            const sum = validMarks.reduce((partialSum, a) => partialSum + a, 0);

            const average = sum / subcount;

            document.getElementById("demo").textContent = "Average: " + average;
        }
    </script>
</body>
</html>

登录后复制

关键点：