JavaScript计算10个表单输入值标准差时显示NaN如何解决？

结果始终显示NaN由4个代码错误导致：

• 数组取值逻辑错误：构造的arr是存储{key: 字段名, value: 数值}的对象数组，但reduce计算时直接将整个对象参与数值运算，对象和数字相加会直接返回NaN，没有读取对象内的value属性做计算
• 非法值无兜底：输入框为空、输入非数字内容时，parseFloat会返回NaN，只要有一个输入值非法，整个计算链路都会返回NaN
• 事件绑定缺失：仅给第10个输入框绑定了oninput事件，前9个输入框内容变化时不会触发计算
• reduce未传初始值：计算均值的reduce方法没有传入初始累加值，第一次执行时累加项为数组第一个对象，直接触发类型错误

JavaScript 逻辑 #

function s10() {
  // 采集10个输入框的值，非法值默认兜底为0，需要空值不计算可自行加判断逻辑
  const arr = [];
  for (let i = 1; i <= 10; i++) {
    const inputVal = parseFloat(document.getElementById(`input${i}`).value);
    arr.push(isNaN(inputVal) ? 0 : inputVal);
  }

  // 计算均值，传入初始值0避免类型错误
  const mean = arr.reduce((sum, num) => sum + num, 0) / arr.length;
  // 计算方差：除以arr.length-1为样本标准差，除以arr.length为总体标准差，可按需调整
  const variance = arr.reduce((sum, num) => sum + (num - mean) ** 2, 0) / (arr.length - 1);
  // 结果保留4位小数，可自行调整精度
  document.getElementById('s').value = Math.sqrt(variance).toFixed(4);
}

// 页面加载完成后给所有输入框绑定输入触发事件，无需逐个写oninput属性
window.onload = function() {
  for (let i = 1; i <= 10; i++) {
    document.getElementById(`input${i}`).addEventListener('input', s10);
  }
}

HTML 结构 #

<input type="number" id="input1"/>
<input type="number" id="input2"/>
<input type="number" id="input3"/>
<input type="number" id="input4"/>
<input type="number" id="input5"/>
<input type="number" id="input6"/>
<input type="number" id="input7"/>
<input type="number" id="input8"/>
<input type="number" id="input9"/>
<input type="number" id="input10"/>
<input type="text" id="s" placeholder="standardDeviation" readonly/>

• 输入框改为type="number"，可从交互层限制用户仅输入数值，减少非法输入场景
• 结果框增加readonly属性，避免用户手动修改计算结果
• 循环批量获取输入框值、绑定事件，替代重复冗余的逐行DOM操作代码
• 如果需要所有输入框填完才触发计算，可将空值兜底逻辑改为：只要检测到NaN值就直接return终止计算，不输出结果

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