js - 数组 .reduce 返回 NaN 而不是计算值答案

【问题标题】：js - array .reduce returns NaN instead of calculated valuejs - 数组 .reduce 返回 NaN 而不是计算值
【发布时间】：2018-05-11 21:11:45
【问题描述】：

我正在写一个简单的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 "当前选择区域：" 24111201608 ...

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

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

我做错了什么？

jsbin reference

【问题讨论】：

这能回答你的问题吗？ Array reduce function is returning NAN
或者更好：How to call reduce on an array of objects to sum their properties?.

标签： javascript ecmascript-6

【解决方案1】：

请记住，传递给您的回调的第一个参数是累加器，您的回调应该返回该累加器的更新版本，然后在下一次调用中使用。所以tile 将只是 first 调用时数组中的一个条目；之后，它将是您的回调返回的任何内容。

如果您要总结 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));

您可以编写您的回调，以便检测它是作为第一个参数还是作为累加器传递了一个条目，但这会不必要地使代码复杂化。

【讨论】：

【解决方案2】：

我做错了什么？

您没有检查tile 是否具有area 属性，因为它是一个累加器，并且在第一次迭代后它只是一个数字

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

【讨论】：