Question

我试图求和我数组的元素，但是该对象未定义加载。任何援助将不胜感激。脚本在下面

我尝试过使用其他方法，例如每种方法，但都没有将适当的数字相加。

function sum()
{
    var totalMiles = flights.reduce(function(previousValue, currentValue) {
          return {
            miles: previousValue.milesElem + currentValue.milesElem,
          }
        });
//         flights.forEach( data => totalMiles = totalMiles + data.miles);
     document.getElementById('totalMiles').innerHTML = totalMiles;
//         return totalMiles;    
}

这是我所有的代码：

var flights = [];
var totalMiles;

function add() {
  const numberElem = document.getElementById("number");
  const milesElem = document.getElementById("miles");
  if (flights.includes(numberElem.value)) {
    alert("Duplicates aren't allowed!")
  } else {
    flights.push({
      number: numberElem.value,
      miles: milesElem.value
    });
    render();
    numberElem.value = "";
    milesElem.value = "";
    sum();
  }
}

function render() {
  const tbody = document.querySelector('#outputTable tbody');
  tbody.innerHTML = flights.map((flight, i) => {
    return '' +
      '<tr>' +
      '<td>' +
      flight.number +
      '</td>' +
      '<td>' +
      flight.miles +
      '</td>' +
      '</tr>';
  }).join('');
}

function calculateStatus() {

  if (totalMiles < 9999) {
    tr = document.getElementById("table").rows[1];
    tr.style.backgroundColor = "green";
  }

  if (totalMiles >= 10000 && totalMiles <= 24999) {
    tr = document.getElementById("table").rows[2];
    tr.style.backgroundColor = "green";
  }

  if (totalMiles >= 25000) {
    tr = document.getElementById("table").rows[3];
    tr.style.backgroundColor = "green";
  }
}

function sum() {
  var totalMiles = flights.reduce(function(previousValue, currentValue) {
    return {
      miles: previousValue.milesElem + currentValue.milesElem,
    }
  });
  //         flights.forEach( data => totalMiles = totalMiles + 
  data.miles);
document.getElementById('totalMiles').innerHTML = totalMiles;
//         return totalMiles;    
}

function refreshPage() {
  window.location.reload();
}

我希望将flight.miles的总和汇总到变量totalMiles中

Answer 1

没有看到您的HTML，就无法知道您是否有与之相关的错误，但是在您共享的代码中存在以下问题：

您有一个全局变量totalMiles和局部变量totalMiles。这意味着您分配给局部变量的任何内容都不会进入全局变量。在其他位置（calculateStatus引用全局变量时，请避免在将var的结果放入reduce的地方使用totalMiles。
由于您的reduce回调返回一个对象，因此reduce的总返回值将不是数字，而是一个对象。但是您希望它是一个数字...所以不要让回调返回一个对象，而是一个数字。
您正在汇总一个milesElem属性，但是从未定义该属性。我假设您打算使用miles属性，因此可以通过将reduce代码更改为此（以及此处不再使用var）来更正此点和之前的点：
```
totalMiles = flights.reduce(function(previousValue, currentValue) {
    return previousValue + currentValue.miles; // not milesElem
}, 0); // provide initial value
```
但是miles属性不是数字的，因此+将执行字符串连接。为避免这种情况，请确保为miles属性分配一个 number 。您可以使用一元加号进行转换：
```
flights.push({
  number: +numberElem.value,  // <--- 
  miles: +milesElem.value     // <--- note the additional plus!
});
```

Answer 2

仔细查看您的代码，我发现了两个问题。首先，您将milesElem.value作为字符串传递，但它应该是数字。您只需将此值传递为Number(milesElem.value)。

编辑：我想numberElem.value也应该是数字，因此应该像milesElem.value一样将其转换为数字。此外，由于flights是对象数组，因此您不能仅检查它是否包含原始值flights.includes(numberElem.value)。这需要重写如下。

function add() {
  const numberElem = document.getElementById("number");
  const milesElem = document.getElementById("miles");
  const number = Number(numberElem.value);
  if (flights.includes(flight => flight.number === number)) {
    alert("Duplicates aren't allowed!")
  } else {
    flights.push({
      number: number,
      miles: Number(milesElem.value)
    });
    render();
    numberElem.value = "";
    milesElem.value = "";
    sum();
  }
}

在sum()函数中，您应该引用miles属性，而不是milesElem。

function sum() {
  var totalMiles = flights.reduce(function(previousValue, currentValue) {
    return previousValue + currentValue.miles;
  }, data.miles);
  document.getElementById("totalMiles").innerHTML = totalMiles;
}

问题与数组减少不求和值

2 个答案: