如何在 JavaScript 中使用带条件的数组减少？答案

【问题标题】：How to use array reduce with condition in JavaScript?如何在 JavaScript 中使用带条件的数组减少？
【发布时间】：2017-12-25 12:49:45
【问题描述】：

所以我有一个数组

const records = [
    {
        value: 24,
        gender: "BOYS"
    },
    {
        value: 42,
        gender: "BOYS"
    },
    {
        value: 85,
        gender: "GIRLS"
    },
    {
        value: 12,
        gender: "GIRLS"
    },
    {
        value: 10,
        gender: "BOYS"
    }
]

我想得到sum，所以我使用了JavaScript 数组reduce 函数并且做对了。这是我的代码：

someFunction() {
  return records.reduce(function(sum, record){
    return sum + record.value; 
  }, 0);
}

使用该代码，我得到了正确的值173。现在我想做的是只将所有的总和分配给那些获得"BOYS" 性别的对象。

我尝试了类似的东西

someFunction() {
  return records.reduce(function(sum, record){
    if(record.gender == 'BOYS') return sum + record.value; 
  }, 0);
}

但我什么也得不到。我在这里错过了什么吗？任何帮助将不胜感激。

【问题讨论】：

标签： javascript arrays vue.js computed-properties

【解决方案1】：

当你从 reduce 函数中什么都不返回时，它返回 undefined 和 undefined + 1 === NaN。您应该在减少之前过滤数组。

records.filter(({gender}) => gender === 'BOYS')
    .reduce((sum, record) => sum + record.value)

【讨论】：

这是正确的方法，你能不能把代码重新格式化成两行
正确的做法。为此+1，但它没有解释原始错误的原因。相反，它只是消除了它。
@AlexanderHiggins 这是因为项目被添加到 undefined 所以他得到了 NaN (() => {})() + 1 === NaN

【解决方案2】：

如果您的条件不匹配，您需要返回当前总和而不是 undefined。

否则，您不会将累加器返回到 reduce 函数并最终在匹配时添加 unefined + record.value 或在不匹配时添加 undefined + undefined。

试试这个：

<script>
  const records = [{
      value: 24,
      gender: "BOYS"
    },
    {
      value: 42,
      gender: "BOYS"
    },
    {
      value: 85,
      gender: "GIRLS"
    },
    {
      value: 12,
      gender: "GIRLS"
    },
    {
      value: 10,
      gender: "BOYS"
    }
  ];

  function someFunction() {
    return records.reduce(function(sum, record) {
     return (record.gender !== 'BOYS') ? sum : sum + record.value;

    }, 0);
  }
  console.log(someFunction());
</script>

【讨论】：

【解决方案3】：

如果性别是“GIRLS”，它将返回未定义。添加一个返回 sum 的 else 语句，它应该可以解决问题。

const records = [
    {
        value: 24,
        gender: "BOYS"
    },
    {
        value: 42,
        gender: "BOYS"
    },
    {
        value: 85,
        gender: "GIRLS"
    },
    {
        value: 12,
        gender: "GIRLS"
    },
    {
        value: 10,
        gender: "BOYS"
    }
]

function someFunction() {
  return records.reduce(function(sum, record){
    if(record.gender == 'BOYS') return sum + record.value;
    else return sum;
  }, 0);
}

console.log(someFunction())

【讨论】：

【解决方案4】：

当性别为GIRLS 时，您还应该返回sum。 reduce 遍历每个项目并期望 return 值。如果您没有return 一个值，它将是undefined。所以在第三次迭代之后，sum 将是undefined。

const sumBoys = records.reduce((sum, record) => {
  if (record.gender.toLowerCase() === 'boys') {
    return sum + record.value;
  }

  return sum;
}, 0);

const records = [{
  value: 24,
  gender: "BOYS"
}, {
  value: 42,
  gender: "BOYS"
}, {
  value: 85,
  gender: "GIRLS"
}, {
  value: 12,
  gender: "GIRLS"
}, {
  value: 10,
  gender: "BOYS"
}];

const sumBoys = records.reduce((sum, record) => {
  if (record.gender.toLowerCase() === 'boys') {
    return sum + record.value;
  }

  return sum;
}, 0);

console.log(sumBoys);

【讨论】：

【解决方案5】：

好吧，如果您只想坚持使用reduce 而不想使用filter，您可以这样做：

const records = [
    {
        value: 24,
        gender: "BOYS"
    },
    {
        value: 42,
        gender: "BOYS"
    },
    {
        value: 85,
        gender: "GIRLS"
    },
    {
        value: 12,
        gender: "GIRLS"
    },
    {
        value: 10,
        gender: "BOYS"
    }
];

  var res = records.reduce(function(sum, record){
    if(record.gender === 'BOYS') {
       return sum + record.value;
     } else{
        return sum
    }; 
  }, 0);
  console.log(res);

  var res = records.reduce(function(sum, record){
    if(record.gender == 'BOYS') {
       return sum + record.value;
     } else{
        return sum
    }; 
  }, 0);

【讨论】：

【解决方案6】：

您正在尝试检索哪个对象的性别是“男孩”。但是当时一些具有女性性别的对象将返回未定义。

尝试这样做以避免未定义的 ....

            var resSet=records.filter(function(options){
                return options.gender == "BOYS";
            }).reduce(function(a,b){
                return a+parseInt(b.value);
            },0);

            console.log("the sum of boys set is --"+resSet);

【讨论】：

【解决方案7】：

我们可以使用这个简化的代码

let res= records.reduce(function(a,b){ 
    return (b.gender === "BOYS" && (a+parseInt(b.value))) || a; 
}, 0);

【讨论】：

【解决方案8】：

你得到了一个错误，因为，reduce 方法 iterate.in 每个元素 i。数组并返回.accumulated值，

发生的情况是，当你的条件不满足时，累加器的值变成.undefined，因为你没有返回它。

如果满足.condition，则需要先求和。在 if 范围之外返回总和，

【讨论】：