JavaScript中forEach循环无法对观测集合温度值求和计算平均温度

问题根因 #

你的代码核心错误是在forEach循环内部直接将sum除以迭代次数并覆盖了sum本身的取值，每一轮累加时实际是「上一轮计算出的平均温度 + 新温度」，而非所有温度的总和累计，最终结果自然不符合预期。

举个简单的验证示例：假设你有3条温度数据23、24、23，你的代码执行逻辑如下：

• 第一轮迭代：sum=23，迭代次数=1 → sum被改写为23/1=23
• 第二轮迭代：sum=23+24=47，迭代次数=2 → sum被改写为47/2=23.5
• 第三轮迭代：sum=23.5+23=46.5，迭代次数=3 → sum被改写为46.5/3=15.5
  最终得到的15.5和正确平均(23+24+23)/3=23完全不符。

修复方案 #

方案1：修改原有forEach逻辑

仅在循环内做温度累加和计数，所有数据遍历完成后再计算平均温度赋值，同时额外做数据类型转换避免字符串拼接，以及空数据防错处理：

async function updateObservationList() {
    const url = "/api/get-all-observations";
    const response = await fetch(url);
    const data = await response.json();

    const tableBody = document.getElementById("table-body");
    const averageTemperature = document.getElementById("averageTemperature");

    const selector = document.getElementById("stationSelector").value;

    let sum = 0;
    let count = 0;

    removeElements();

    data.forEach(observation => {
        if(selector == 0) {
            // 强制转换为数字类型，避免接口返回字符串导致拼接错误
            sum += Number(observation.temperature);
            count++;
        }
        // 这里补全你原来渲染表格行的逻辑
    })

    // 遍历完成后统一计算平均，空数据避免除以0报错，保留2位小数可按需调整
    const avg = count > 0 ? (sum / count).toFixed(2) : "0";
    averageTemperature.textContent = avg;
}

方案2：使用reduce实现

你之前用reduce报错大概率是逻辑写法错误，正确的reduce实现无需单独声明求和、计数变量：

async function updateObservationList() {
    const url = "/api/get-all-observations";
    const response = await fetch(url);
    const data = await response.json();

    const tableBody = document.getElementById("table-body");
    const averageTemperature = document.getElementById("averageTemperature");

    const selector = document.getElementById("stationSelector").value;

    removeElements();

    // 筛选符合条件的观测数据
    const validList = selector == 0 ? data : [];
    if (validList.length) {
        // reduce累计温度总和
        const totalTemp = validList.reduce((acc, cur) => acc + Number(cur.temperature), 0);
        const avg = (totalTemp / validList.length).toFixed(2);
        averageTemperature.textContent = avg;
    } else {
        averageTemperature.textContent = "0";
    }

    // 这里补全你原来渲染表格行的逻辑
}

内容的提问来源于stack exchange，提问作者Frederik Meizner Petersen