js - array .reduce返回NaN而不是计算值

Question

我正在编写一个简单的reduce函数:

var tiles = [
  {
    "date": "2017-11-26",
    "cloudCoverage": 92.2,
    "area": 12055600804
  },
  {
    "date": "2017-11-26",
    "cloudCoverage": 92.78,
    "area": 12055600804
  },
  {
    "date": "2017-11-26",
    "cloudCoverage": 97.29,
    "area": 11609327018
  }
]

function selectDateTile(tiles) {
  return tiles.reduce((tile, currentPick) => {
    console.log('tileArea: ', tile.area, 'currentPick area: ', currentPick.area)
    return tile.area + currentPick.area
  });
}

console.log(selectDateTile(tiles))

我希望它能记录对象的实际值,以及所有区域的总和:

"tileArea:"12055600804"currentPick area:"12055600804"tileArea:"12055600804"currentPick area:"24111201608 ...

但是我在jsbin中得到的控制台输出是:

"tileArea:"12055600804"currentPick area:"12055600804"tileArea:"undefined"currentPick area:"11609327018 NaN

我究竟做错了什么？

jsbin参考

Answer 1

请记住,传递给回调的第一个参数是累加器,并且您的回调应该返回该累加器的更新版本,然后在下一次调用时使用.所以tile只会在第一次调用时从数组中输入一个条目; 之后,它将是您的回调返回的任何内容.

如果您想要总结area属性,您希望为累加器提供初始值(第二个参数为reduce),然后将其用作值,而不是对象:

function selectDateTile(tiles) {
  return tiles.reduce((sum, currentPick) => { // <== Note `sum` parameter
    return sum + currentPick.area;            // <== Using `sum`
  }, 0);                                      // <== 0 as initial value
}

实例:

var tiles = [
  {
    "date": "2017-11-26",
    "cloudCoverage": 92.2,
    "area": 12055600804
  },
  {
    "date": "2017-11-26",
    "cloudCoverage": 92.78,
    "area": 12055600804
  },
  {
    "date": "2017-11-26",
    "cloudCoverage": 97.29,
    "area": 11609327018
  }
];

function selectDateTile(tiles) {
  return tiles.reduce((sum, currentPick) => { // <== Note `sum` parameter
    return sum + currentPick.area;            // <== Using `sum`
  }, 0);                                      // <== 0 as initial value
}

console.log(selectDateTile(tiles));

您可以编写回调,以便检测它是否作为第一个参数或累加器传递了一个条目,但它不必要地使代码复杂化.