JavaScript 中位数计算器

Question

我有this JavaScript它计算 4 个给定数字的总和和平均值。

我希望它还能做两件事:

1. 使其还计算并显示这些数字的中位数
2. 我不希望它使用 4 个输入字段来表示 4 个数字，而是使用一个字段，我们可以在其中添加所需数量的数字(最少 2 个)，并用逗号分隔。

我发现了一些与此事相关的其他问题，但与 JavaScript 实现无关。

function doSums(what) {
    var df = document.forms[0];
    var a = parseFloat(df[0].value);
    var b = parseFloat(df[1].value);
    var c = parseFloat(df[2].value);
    var d = parseFloat(df[3].value);
    if ((isNaN(a)) || (isNaN(b)) || (isNaN(c)) || (isNaN(d))) {
        alert("four numbers please !");
        df.reset();
        df[0].focus();
        return;
    }
    if (what == "total") {
        df[5].value = a + b + c + d;
    } else {
        df[7].value = (a + b + c + d) / 4;
    }
}

JSFiddle

Answer 1

要使用单个输入来执行此操作:

1. split 输入的逗号值。这将返回一个数字数组。
2. 使用 for loop 迭代数组，跟踪运行总计。
3. 平均值将是总数除以数组长度。

计算中位数:

1. 按数字顺序对数组进行排序。
2. 如果值的数量为奇数，则使用中间的值。否则，取中间两个的平均值。

此代码片段执行上述操作，此外还包括错误检查。请注意，我将操作数乘以 1 将其转换为数字，而不是使用 parseFloat。此外，我的 floor 和 ceil 逻辑会自动处理具有奇数或偶数操作数的情况。

document.querySelector('#equation').addEventListener('change',function() {
  var ops= this.value
             .split(',')
             .sort(function(a,b){return a-b}),
      len= ops.length,
      valid= true,
      total = 0,
      i,
      error= document.querySelector('#error'),
      stotal= document.querySelector('#total'),
      smean= document.querySelector('#mean'),
      smedian= document.querySelector('#median');
  
  if(len < 2) valid= false;
  else {
    for(i = 0 ; i < len ; i++) {
      if(isNaN(ops[i])) valid= false;
      else total+= ops[i]*1;
    }
  }
  if(!valid) {
    error.style.display= 'block';
    stotal.innerHTML= smean.innerHTML= smedian.innerHTML= '';
  }
  else {
    error.style.display= 'none';
    stotal.innerHTML= total;
    smean.innerHTML= total/len;
    smedian.innerHTML= 
      (ops[Math.floor((len-1)/2)]*1 + ops[Math.ceil((len-1)/2)]*1)/2;
  }
});

body {
  font: 14px verdana;
}

#error {
  color: red;
  display: none;
}

Enter at least two numbers, separated by commas:<br>
<input id="equation" type="text">
<div id="error">Invalid input</div>
<div>Total: <span id="total"></span></div>
<div>Mean: <span id="mean"></span></div>
<div>Median: <span id="median"></span></div>