如何在javascript中获取变化数组的平均值答案

【问题标题】：How to get the average of a changing array in javascript如何在javascript中获取变化数组的平均值
【发布时间】：2018-07-07 11:33:42
【问题描述】：

这是我在这里的第一篇文章。我是 Javascript 新手，这是我的问题：

我在 html 中有四个输入字段。用户不必填写所有四个输入字段；一个就足够了。现在我的问题是如何获得输入的平均值，无论用户只给了我一个填充字段还是 2 个或 3 个甚至四个填充字段。

这是我的起始代码，但它有问题。

function calculateAll() {
    //first create an array to gather inputs from user and create the sum

    var listening_avg_array = new Array();
    listening_avg_array[0] = parseInt(listeningInput1_js.value);
    listening_avg_array[1] = parseInt(listeningInput2_js.value);
    listening_avg_array[2] = parseInt(listeningInput3_js.value);
    listening_avg_array[3] = parseInt(listeningInput4_js.value);

    //now we calculate the average for listening scores
    var sum = 0;
    for (var i = 0; i < listening_avg_array.length; i++) {
        sum += listening_avg_array[i];
    }

    var avg = sum / listening_avg_array.length;

    listening_avg_span_js.innerHTML = avg;
}

很遗憾，如果用户只给了我 3 个或更少的输入，我会收到“NaN”错误；但是如果用户给我所有四个输入，代码就可以工作，但这只是可能的条件之一。有时我可能只能从用户那里得到 2 个字段，我必须通过将总和除以 2 来获得平均值。

我不知道该怎么做。

这是html：

<input id="listening-input1" type="number" min="60" max="100">
<input id="listening-input2" type="number" min="60" max="100">
<input id="listening-input3" type="number" min="60" max="100">
<input id="listening-input4" type="number" min="60" max="100">

【问题讨论】：

你想只从填充的字段中获取平均值吗？
@NinaScholz 完全正确。

标签： javascript arrays average

【解决方案1】：

您可以过滤包含 NaN 的输入以获得一组设置值：

const values = listening_avg_array.filter(value => !isNaN(value));

那么你可以把它加起来除以它的长度：

const average = values.reduce((a, b) => a + b, 0) / values.length;

或者如果您更喜欢旧的 for 循环：

var sum = 0, count = 0;
for (const value of listening_avg_array) {
    if(!isNaN(value)) {
        sum += value;
        count++;
    }
}

const average = sum / count;

【讨论】：

这不会错吗？（例如，用户输入了 3 个数字，他将通过 4 跳水来计算平均值）

【解决方案2】：

您可以省略数组并在检查空字符串或NaN 值后直接取值。 BTW，'' 不是NaN，而是一个实数，转换后不是数字。

function calculateAll() {
    var i, count = 0, sum = 0, temp;
    for (var i = 1; i <= 4; i++) {
        temp = document.getElementById('listening-input' + i).value;
        if (temp === '' || isNaN(temp)) continue;
        sum += +temp;
        count++;
    }
    document.getElementById('average').innerHTML = count ? sum / count : 'No values';
}

<input id="listening-input1" type="number" min="60" max="100" onchange="calculateAll()">
<input id="listening-input2" type="number" min="60" max="100" onchange="calculateAll()">
<input id="listening-input3" type="number" min="60" max="100" onchange="calculateAll()">
<input id="listening-input4" type="number" min="60" max="100" onchange="calculateAll()"><br>
Average: <span id="average"></span>

【讨论】：

它以最短的方式完成了这项工作。谢谢。
您能帮我解释一下您的这部分代码吗？：code innerHTML = count ？ sum / count : '没有值';
抱歉耽搁了，它使用conditional (ternary) operator ?: 进行检查并返回第一部分或第二部分。就像if 表示表达式一样。

【解决方案3】：

如果输入没有在其他地方单独处理，使用 class 而不是 id 是更好的方法，并且可以缩短代码。

document.getElementById('calculate').addEventListener('click', function(e) {
  calculateAll();
});

function calculateAll() {
  let sum = 0, count = 0;
  const inputs = document.querySelectorAll('.listening-input');
  inputs.forEach(function(el) {
    if(!el.value) return;
    sum += parseInt(el.value);
    count++;
  });
  const avg = sum / count;
  console.log(avg);
}

<input class="listening-input" type="number" min="60" max="100">
<input class="listening-input" type="number" min="60" max="100">
<input class="listening-input" type="number" min="60" max="100">
<input class="listening-input" type="number" min="60" max="100">

<button id="calculate">calculate</button>

【讨论】：