JavaScript计算数字数组平均值结果异常问题排查修复

使用JavaScript计算输入科目分数的平均值时运行结果不符合预期：当输入科目总数为5、5门科目分数均为100时，预期输出平均值100（即500/5），实际输出结果错误，暂未定位到问题点。

HTML部分 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Project</title>
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <form onsubmit="return false">
      <label for="sub">Subjects</label>
      <input type="number" id="eh" /><br /><br />
      <label for="sub1">Subject 1 marks:</label><br />
      <input type="number" name="num" id="num1" /><br />
      <label for="sub2">Subject 2 marks:</label><br />
      <input type="number" name="num" id="num2" /><br />
      <label for="sub3">Subject 3 marks:</label><br />
      <input type="number" name="num" id="num3" /><br />
      <label for="sub4">Subject 4 marks:</label><br />
      <input type="number" name="num" id="num4" /><br />
      <label for="sub5">Subject 5 marks:</label><br />
      <input type="number" name="num" id="num5" /><br />
      <input type="submit" value="Submit" onclick="he()" />
    </form>
    <p id="demo"></p>
    <script src="script.js"></script>
  </body>
</html>

JavaScript部分 #

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(marks1)
    marks.push(marks2)
    marks.push(marks3)
    marks.push(marks4)
    marks.push(marks5)

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

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

通过DOM API获取的<input>元素的.value属性返回值默认是字符串类型，不是数值类型。
代码中直接将字符串类型的分数存入数组，执行reduce累加时，+运算符会优先执行字符串拼接逻辑，而非数值加法：比如5个值为"100"的字符串累加，初始值0是数字，第一步计算0 + "100"得到字符串"0100"，后续每一步都是拼接字符串，最终得到类似"0100100100100100"的错误结果，再除以科目数时自然得不到正确的平均值。

所有从输入框获取的、需要参与数值计算的值，先显式转换为数值类型再使用，可通过Number()方法完成转换。
修复后的JavaScript代码如下：

function he() {
    // 取值后统一转换为数值类型
    var subcount = Number(document.getElementById("eh").value);
    var marks1 = Number(document.getElementById("num1").value);
    var marks2 = Number(document.getElementById("num2").value);
    var marks3 = Number(document.getElementById("num3").value);
    var marks4 = Number(document.getElementById("num4").value);
    var marks5 = Number(document.getElementById("num5").value);

    var marks =  []
    marks.push(marks1, marks2, marks3, marks4, marks5)

    const sum = marks.reduce((partialSum, a) => partialSum + a, 0);
    document.getElementById("demo").textContent = sum / subcount
}

可选优化：如果需要适配科目数少于5的场景，可以在push分数前判断输入值是否为空，过滤掉无效值，避免计算结果出现NaN。

内容的提问来源于stack exchange，提问作者Aaqil Abdullah