Question

我有一个包含6个值的数组，其中第6个值是可选的（即如果用户没有输入第6个值，则将计算前5个值）。我想总结它们的最高5个值。

我的Javascript代码：

function calculate_merit_point(){

   var s1 = eval(document.getElementById('sub_no1').value);
   var s2 = eval(document.getElementById('sub_no2').value);
   var s3 = eval(document.getElementById('sub_no3').value);
   var s4 = eval(document.getElementById('sub_no4').value);
   var s5 = eval(document.getElementById('sub_no5').value);
   var s6 = eval(document.getElementById('sub_no6').value);

   var vals = [s1,s2,s3,s4,s5,s6];

  function arraySum(arr) {
      if (!arr) {
          return false;
      } else {
          var sum = 0;
          for (var i = 0, len = arr.length; i < len; i++) {
              sum += arr[i];
          }
          return sum;
      }
  }


  sum = arraySum(vals.sort(function(a, b) {
      return b - a;
  }).slice(0, 5));


  if(isNaN(tt)){
      $('#agr').text('0');
  } else {
      $('#agr').text(sum);
  }


}

现在假设

s1 = 30
s2 = 31
s3 = 32
s4 = 33
s5 = 34
s6 = 35

应该是31+32+33+34+35 = 165。但它显示的值为162。

根据我的要求（第6个值可选），如果我没有给s6赋值，则显示值 228 。

我尝试了This，但如果我没有给出第6个（可选）值，则会显示值0。如果我在s6中给出值35，则显示总和值为233。

我该怎么办？

更新＆amp;分辨

我的代码是正确的。但是有些东西在代码eval()中产生了问题。我将其替换为Number()并已解决。

谢谢大家。

Answer 1

您可以使用reduce更轻松地汇总，并使用此ES6代码用Math.max减去最高值：

var vals = [30,31,32,33,34,35,36];
// Get sum
var sum = vals.reduce( (a,b) => a+b, 0 );
// Subtract highest value
if (vals.length == 6) sum -= Math.max(...vals);
// Output result
console.log(sum);

以下代码与您在代码中提到的元素名称集成，但第一部分也使用jQuery：

function calculate_merit_point(){
   // Get all six input elements by using jQuery with a smarter selector:
   var vals = $('[id^=sub_no]').map(function () { 
     return parseInt($(this).val()); // get the value as numeric for each of them
   }).get().filter(n => !isNaN(n)); // filter the result to get real numbers only
   
   // get sum
   var sum = vals.reduce( (a,b) => a+b, 0 );
   // Remove greatest value from it if we have 6 numbers
   if (vals.length == 6) sum -= Math.max(...vals);
   // Output the result. 
   $('#agr').text(sum);
}

calculate_merit_point();
$('input').on('input', calculate_merit_point);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="sub_no1" value="1"><br>
<input id="sub_no2" value="2"><br>
<input id="sub_no3" value="3"><br>
<input id="sub_no4" value="4"><br>
<input id="sub_no5" value="5"><br>
<input id="sub_no6" value="6"><br>
<hr>
Sum: <span id="agr"></span>

您可以在运行上述代码段时调整值，总和将会适应。

ES5等效

当您没有ES6支持时：

function calculate_merit_point(){
   // Get all six input elements by using jQuery with a smarter selector:
   var vals = $('[id^=sub_no]').map(function () { 
     return parseInt($(this).val()); // get the value as numeric for each of them
   }).get().filter(function (n) {
     return !isNaN(n);  // filter the result to get real numbers only
   });
   
   // get sum
   var sum = vals.reduce(function (a,b) {
       return a+b;
   }, 0);
   // Remove greatest value from it if we have 6 numbers
   if (vals.length == 6) sum -= Math.max.apply(Math, vals);
   // Output the result. 
   $('#agr').text(sum);
}

calculate_merit_point();
$('input').on('input', calculate_merit_point);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="sub_no1" value="1"><br>
<input id="sub_no2" value="2"><br>
<input id="sub_no3" value="3"><br>
<input id="sub_no4" value="4"><br>
<input id="sub_no5" value="5"><br>
<input id="sub_no6" value="6"><br>
<hr>
Sum: <span id="agr"></span>

Answer 2

这将是使用.reduce的绝佳机会。在给定数组的情况下，它将返回单个值。虽然我们正在循环播放＆＃34;通过数组，我们将确定最低值，然后从结果中减去该值。此外，您明确使用jQuery来应用.text()，因此，也可以使用它来获取每个输入的.val()。然后，我们会使用parseInt检查，以便在出现错误/无效结果时返回0

<强> JSFIDDLE

<强> HTML

<input id="sub_no1" value="30" />
<input id="sub_no2" value="31" />
<input id="sub_no3" value="32" />
<input id="sub_no4" value="33" />
<input id="sub_no5" value="34" />
<input id="sub_no6" value="35" />
<p id="agr"></p>

<强> JS

$(function() {
    function calculate_merit_point() {
        var s1 = getValue($('#sub_no1'));
        var s2 = getValue($('#sub_no2'));
        var s3 = getValue($('#sub_no3'));
        var s4 = getValue($('#sub_no4'));
        var s5 = getValue($('#sub_no5'));
        var s6 = getValue($('#sub_no6'));

        var vals = [s1, s2, s3, s4, s5, s6];

        function getValue(el) {
            return parseInt(el.val(), 10) || 0;
        }

        function arraySum(arr) {
            if (!arr) {
                return 0;
            } else {
                var lowest = Infinity;
                return vals.reduce(function(sum, val) {
                    if (val < lowest){ lowest = val; }
                    return sum + val;
                }, 0) - lowest;
            }
        }

        $('#agr').text(arraySum(vals));
    }
    calculate_merit_point();
})

如何使用Javascript或Jquery获取数组的最高5个值的总和？

2 个答案:

ES5等效