在javascript中查找数组的总和[重复]答案

【问题标题】：Finding the sum of an array in javascript [duplicate]在javascript中查找数组的总和[重复]
【发布时间】：2015-11-12 11:36:20
【问题描述】：

我必须为学校编写 6 个小的 JavaScript 脚本，除了这个之外，我已经让它们都工作了。

function calculate() {
    var numbers = [
        document.getElementById("num_one").value ,
        document.getElementById("num_two").value ,
        document.getElementById("num_three").value 
    ];
    var sum = numbers[0] + numbers[1] + numbers[2];
    document.getElementById("display_sum").innerHTML = sum;
}

用户应该输入 3 个数字，点击一个按钮，它应该将它们全部加在一起或“求和”。

我的问题是，它只是将数字连接在一起而不是添加它们。有谁知道解决这个问题的方法吗？

【问题讨论】：

因为你要添加 3 个字符串值
输入将字符串作为值，您必须使用parseFloat() 或parseInt() 将它们解析为数字
所以var sum = +numbers[0] + +numbers[1] + +numbers[2];
或var sum = 0; numbers.forEach(function (value) { sum += +value || 0; }); document.getElementById("display_sum").innerHTML = sum;
请使用numbers_1等，而不是numbers_one！更好的是，使用一个类来代替（或附加于）ID，这样一个选择器就可以找到你想要求和的所有元素

标签： javascript

【解决方案1】：

您正在“求和”字符串变量，因此 Javascript 将它们连接起来。

您需要将它们转换为数字才能得到算术和：

function calculate() {
        var numbers = [
            document.getElementById("num_one").value ,
            document.getElementById("num_two").value ,
            document.getElementById("num_three").value 
        ];
        var sum = Number(numbers[0]) + Number(numbers[1]) + Number(numbers[2]);
        document.getElementById("display_sum").innerHTML = sum;
        }

【讨论】：

非常感谢 :)

【解决方案2】：

使用 parseFloat()、parseInt() 或 Number() 解析字符串，将其转换为数字。否则+ 只会进行字符串连接，因为值是字符串。

function calculate() {
  var numbers = [
    document.getElementById("num_one").value,
    document.getElementById("num_two").value,
    document.getElementById("num_three").value
  ];
  var sum = parseFloat(numbers[0]) + parseFloat(numbers[1],) + parseFloat(numbers[2]);
  document.getElementById("display_sum").innerHTML = sum;
}

function calculate() {
  var numbers = [
    document.getElementById("num_one").value,
    document.getElementById("num_two").value,
    document.getElementById("num_three").value
  ];
  var sum = Number(numbers[0]) + Number(numbers[1]) + Number(numbers[2]);
  document.getElementById("display_sum").innerHTML = sum;
}

function calculate() {
  var numbers = [
    document.getElementById("num_one").value,
    document.getElementById("num_two").value,
    document.getElementById("num_three").value
  ];
  var sum = parseInt(numbers[0], 10) + parseInt(numbers[1], 10) + parseInt(numbers[2], 10);
  document.getElementById("display_sum").innerHTML = sum;
}

【讨论】：

【解决方案3】：

value 属性是 string。为了在算术运算中使用它，您需要将其解析为整数。在 JS 中执行此操作的最简单方法是 +x。您可以使用Array.prototype.map 和Array.prototype.reduce 来简化：

var ids = ['num_one', 'num_two', 'num_three'];
var sum = ids
    .map(function(x) { return +document.getElementById(x).value; })
    .reduce(function(a,b) { return a+b; }, 0);

通过这种方式，您将能够以最小的变化将新元素引入计算中。

【讨论】：

为什么要额外调用.map()？查询部分可以移动到.reduce() 调用中。数组很小，但为什么要迭代数组两次？
@Andreas 如果性能不是问题，恕我直言，将提取值的功能与随后添加它们的功能分开会更干净

【解决方案4】：

.value return String 你需要把它转换成Number，

您可以使用 parseInt 或 parseFloat（如果您有浮点值），或使用 Number() 或在值前添加 + 来实现

var numbers = [
    +document.getElementById("num_one").value,
    +document.getElementById("num_two").value,
    +document.getElementById("num_three").value
];

或

var numbers = [
   Number(document.getElementById("num_one").value),
   Number(document.getElementById("num_two").value),
   Number(document.getElementById("num_three").value)
];

或

var numbers = [
   parseInt(document.getElementById("num_one").value, 10),
   parseInt(document.getElementById("num_two").value, 10),
   parseInt(document.getElementById("num_three").value, 10)
];

【讨论】：

【解决方案5】：

最短的方法是使用Array.prototype.map

map() 方法创建一个新数组，其结果是对该数组中的每个元素调用提供的函数。

结合Number

Number JavaScript 对象是一个包装对象，允许您使用数值。 Number 对象是使用 Number() 构造函数创建的。

Number 对象的主要用途是：

如果参数不能转换为数字，则返回 NaN。

在非构造函数上下文中（即，没有 new 运算符），Number 可用于执行类型转换。

然后Array.prototype.reduce

reduce() 方法对累加器和数组的每个值（从左到右）应用函数以将其减少为单个值。

与callback 类似

function (a, b) {
    return a + b;
}

将代码封装在一行中：

function calculate() {
    var numbers = [
            document.getElementById("num_one").value,
            document.getElementById("num_two").value,
            document.getElementById("num_three").value
        ],
        sum = numbers.map(Number).reduce(function (a, b) { return a + b; });
    document.getElementById("display_sum").innerHTML = sum;
}

【讨论】：

首先必须有一种方法可以使用map() 来填充numbers 数组，即使OP 没有要求这样做......

【解决方案6】：

一行 es6 中的可扩展解决方案：

var sum = numbers.reduce((a, b) => Number(a) + Number(b), 0);

一定要在最后包含一个initialValue - 这将保证回调被执行，并且在数组不包含值/一个值的情况下返回一个数字。

More info on reduce

【讨论】：

不要忘记包含结尾的0 参数，否则reduce 将失败，除非数组中至少有两个元素。
@Alnitak 似乎可以使用一个元素，但如果为空则失败
啊是的 - 我不太记得规则。如果只有一个元素，它会在不调用回调的情况下返回它[暗示在这种情况下你仍然会得到一个字符串，而不是一个数字]。因此，您仍应提供零以确保调用回调以应用转换。
@Alnitak True，在 OP 的特定示例中，将字符串返回到 innerHTML 无关紧要，但我会针对一般用例对其进行更新
也（不耐性能），var sum = numbers.map(Number).reduce((a, b) => a + b, 0)

【解决方案7】：

根据您输入的数字是整数还是小数，您可以使用parseInt 或parseFloat。

【讨论】：

【解决方案8】：

已经有很多合理的答案，但这里有一个简洁的替代方案：

var sum = +numbers[0] + +numbers[1] + +numbers[2];

【讨论】：

我看到@ArunPJohny 已经将此添加为评论。为重复道歉。

【解决方案9】：

我认为您可以使用数组来存储输入，例如

<script>
var numbers;

function push(){
  numbers.push(getDocumentById("someid").val;
}


function calculate(){
  var sum=0;
  for(i=0; i<numbers.len; i++){
    sum=sum + numbers[i];
  }
    alert(sum);
}

</script>

<div>
  <button id="someid" value=20 onClick="addToArray();">click to push</button>
</div>

<div>
  <button id="calc" onClick="calculate();">click to calculate</button>
</div>

【讨论】：

【解决方案10】：

以下将解决问题：

function calculate() {
var numbers = [
    +(document.getElementById("num_one").value) ,
    +(document.getElementById("num_two").value) ,
    +(document.getElementById("num_three").value) 
];
var sum = numbers[0] + numbers[1] + numbers[2];
document.getElementById("display_sum").innerHTML = sum;
}

【讨论】：

【解决方案11】：

默认情况下，javascript 将 input 值视为字符串。所以你必须像这样手动将它们转换为integers：

var numbers = [
    document.getElementById("num_one").value ,
    document.getElementById("num_two").value ,
    document.getElementById("num_three").value 
];

document.getElementById("display_sum").innerHTML =
    numbers
        .reduce(function(sum, element) { return sum + parseInt(element, 10);}, 0);

这段代码的好处是，如果你需要计算三个以上的元素，你只需要修改你的numbers数组。

【讨论】：

我不会说“默认”，因为您实际上无法更改它。