Question

我需要对数组的所有元素求和，直到输入的选定值（在此示例中为前四个元素）为止：

HTML：

<input id="VAL" value="4" />

<button onclick="SUM()">BUTTON</button>

SUM: <span id="bubu"></span>

JS：

var numbers = [1, 2, 3, 4, 5];

function getSum(x,y) {return x+y;}

function SUM() { 
    document.getElementById("bubu").innerHTML = numbers.reduce(getSum);
}

现在所有元素的总和可以正常工作。但是，如何添加一个循环以仅获取所需的总和？

Fiddle DEMO

Answer 1

至少有两种方法：

~~filter~~ slice首先，删除您不想汇总的值（由于OP的注释而编辑，“我的意思是元素数量”）或
在reduce回调中，如果它不是您要包含的值之一，则不要添加y（通过检查您作为回调的第三个参数收到的索引）

Answer 2

使用for loop，非常简单。

var numbers = [1, 2, 3, 4, 5];

let upTo = 4;

var res = 0;

for(let i = 0; i<upTo; i++){
     res += numbers[i];
}

console.log(res)

使用reduce()

var numbers = [1, 2, 3, 4, 5];

let upTo = 4;

var res = numbers.reduce((a,e,i)=>(i<upTo)?a+e:a+0)

console.log(res)

示例：https://jsfiddle.net/fsbhoe45/

Answer 3

使用reduce index参数： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

var numbers = [1, 2, 3, 4, 5];

window.SUM = function() { 
    var numberOfElements = document.getElementById("VAL").value;
    document.getElementById("bubu").innerHTML = numbers.reduce(function(x, y, i){
        if(i <= numberOfElements-1) {
        return x+y;
      } else {
        return x;
      }
    });
}

https://jsfiddle.net/k9vrLsnm/3/

Answer 4

如果您向处理程序提供了reduce来指示需要总和的索引，那么也可以单独使用limit进行此操作。例如如果您需要总计4个元素，则限制为3。

function onClickHandler(limit) {
    return numbers.reduce(function (acc, val, index) {
        return index < limit ? acc : acc + val
    }, 0)
}

希望这会有所帮助。

仅对所需的数组元素求和

4 个答案: