在javascript中查找数组的和

我必须为学校编写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个数字，点击一个按钮，然后将它们全部相加或“找到总数”

---

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

使用、或解析字符串，将其转换为数字。否则，

+

将只执行字符串连接，因为值是字符串

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;
}

---

---

---

值

返回

字符串

您需要将其转换为

数字

您可以使用

parseInt

或

parseFloat

（如果您有浮点值），或使用

Number（）

或在值之前添加

+

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

或

或

---

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

您正在对字符串变量进行“求和”，以便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;
        }

---

值

属性是

字符串

。为了在算术运算中使用它，需要将其解析为整数。在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);

---

通过这种方式，您将能够在计算中引入新元素，只需进行最小的更改。

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

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

---

默认情况下，

javascript

将

input

值视为字符串。因此，您必须手动将它们转换为

整数

，如下所示：

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);

---

这段代码的好处在于，如果您需要计算三个以上的元素，您只需要修改

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

<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>


var数；
函数push（）{
push（getDocumentById（“someid”）.val；
}
函数计算（）{
var总和=0；
对于（i=0；i而言，最短的方法是使用

map（）

结合

Number
JavaScript对象是一个包装器对象，允许您处理数值。Number对象是使用Number（）构造函数创建的

Number对象的主要用途是：


如果参数无法转换为数字，则返回NaN
在非构造函数上下文中（即，没有新运算符），Number可用于执行类型转换

然后

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

结合类似的

将代码包装在一行中：

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;
}

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

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

请确保在末尾包含一个
initialValue
——它将保证在数组不包含任何值/一个值的情况下执行回调并返回一个数字

以下内容将解决这些问题：

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个字符串值，因此必须使用
parseFloat（）
或
parseInt（）
So
var-sum=+numbers[0]++numbers[1]++numbers[2]；
或
var-sum=0；numbers.forEach（函数（值）{sum+=+value | 0；}）；document.getElementById(“display_sum”）.innerHTML=sum；
请使用
numbers_1
等，而不是
numbers_one
！更好的方法是使用类而不是（或除了）ID，这样一个选择器就可以找到您希望使用的所有元素。我看到@ArunPJohny已经将此添加为注释。对于重复，我深表歉意。为什么要额外调用
.map（）
？查询部分可以移动到
.reduce（）
调用中。数组很小，但为什么要迭代数组两次？@Andreas如果性能不是一个问题，那么将提取值的功能从随后添加的值中分离出来会更干净吗？非常感谢：）不要忘了包含尾随的
0
参数，否则
reduce
将失败，除非数组中至少有两个元素。@Alnitak似乎与一个元素一起工作，但如果为空则失败是-我没有完全正确地记住规则。如果只有一个元素，它将在不调用回调的情况下返回它[这意味着在这种情况下，您仍然会得到一个字符串，而不是一个数字]。因此，您仍然应该提供零，以确保调用回调来应用转换。@Alnitak True，在OP的特定示例中，将字符串返回到innerHTML应该无关紧要，但我也会针对一般用例进行更新（不考虑性能），那么
var sum=numbers.map（Number）.reduce（（a，b）=>a+b，0）
我不会说“默认”，因为您实际上无法更改它。必须有一种方法首先使用
map（）
来填充
numbers
数组，即使OP没有要求。。。
<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>

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;
}

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

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;
}