JS中Reduce处理对象数组返回undefined的问题及属性访问疑问

1. 函数包裹后返回undefined的原因及解决 #

你大概率是在函数里调用了reduce但没return它的执行结果。比如错误写法：

function countVoted(arr) {
  arr.reduce((acc, obj) => {
    return obj.voted ? acc + 1 : acc;
  }, 0);
}

这里函数内部只执行了reduce，但没把结果返回出去，所以调用函数会得到undefined。修正很简单，加上return：

function countVoted(arr) {
  return arr.reduce((acc, obj) => {
    return obj.voted ? acc + 1 : acc;
  }, 0);
}

2. 出现7个true + 1个undefined的原因 #

你应该是在reduce的回调函数里只在voted为true时返回累加值，遇到voted为false的项时没返回累加器acc。比如：

arr.reduce((acc, obj) => {
  if (obj.voted) {
    console.log(obj.voted); // 输出7个true
    return acc + 1;
  }
  // 这里没写return acc！
}, 0);

当遇到voted为false的对象时，回调函数没有返回值，默认返回undefined，这时候下一轮迭代的acc就变成了undefined，最终reduce的结果就是undefined——这就是你看到的那个额外的undefined。

解决办法：不管voted是true还是false，都要返回累加器。可以用三元表达式，或者在else里return acc：

arr.reduce((acc, obj) => {
  console.log(obj.voted); // 只会输出7个true和1个false，不会有undefined
  return obj.voted ? acc + 1 : acc;
}, 0);

3. 不直接用voted访问对象属性的方法 #

用方括号语法就行，两种写法：

• 直接写属性名字符串：obj['voted']
• 把属性名存在变量里，再用变量访问：

  const propName = 'voted';
  // 之后用obj[propName]代替obj.voted
  arr.reduce((acc, obj) => {
    return obj[propName] ? acc + 1 : acc;
  }, 0);
  

这种方式适合属性名是动态生成的场景，和点语法的功能完全一致。

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