Vuex中数组Reduce异常：如何正确统计总职位数？

嘿，我一眼就看出你遇到的问题啦——这是reduce方法没传初始值导致的！

你当前的代码里，state.roster.subteams.reduce(reducer)没有给reduce指定初始累加值，这就会让reduce把数组的第一个subteam对象当作初始的accumulator。接下来执行累加时，相当于把一个对象和数字相加，JavaScript会把对象转换成字符串"[object Object]"，然后和后面的positions.length数字拼接起来，结果自然就变成了你看到的"[object Object]330106..."这种奇怪的字符串。

修复方法很简单：给reduce加上初始值0 #

修改你的getter代码，在reduce的第二个参数位置传入0，让累加器从数字0开始：

totalPositions: function (state) {
  let reducer = (accumulator, subteam) => accumulator + subteam.positions.length;
  return state.roster.subteams.reduce(reducer, 0); // 这里添加初始值0
}

原理说明 #

当你给reduce传入初始值0后，accumulator一开始就是数字类型，每次累加都是纯数字相加，不会再出现对象转字符串拼接的情况。举个小例子：
如果你的subteams数组是：

[
  { positions: [{}, {}, {}] }, // length 3
  { positions: [{}, {}] }      // length 2
]

• 没初始值时：第一步是subteam对象 + 3 → "[object Object]3"，第二步是"[object Object]3" + 2 → "[object Object]32"
• 有初始值0时：第一步是0 + 3 = 3，第二步是3 + 2 = 5，结果就是正确的总职位数5

这样修改后，你的getter就能正常返回数字类型的总职位数啦！

内容的提问来源于stack exchange，提问作者DatsunBing