Javascript 减速器，如何停止&&运算符重置值？

Question

这里是业余编码员，reducer 新手。

我有一个应用程序可以将对象添加到数组中，并使用 reducer 捕获每个对象的位置值的数量。

以下在一定程度上起作用，当我添加两个 'Att' 实体时，totalAtt 的数量等于两个，但是当我添加另一个位置值时，totalAtt 数量重置为零。同样对于位置的所有值。

发现 && 运算符将我的初始值重置为 false，因为它具有布尔性质。

有人知道如何调整代码以在不重置值的情况下捕获数量吗？

    const totalGK = get(team).reduce(
        (a, b) => b.position === "GK" && a + b.qty,
        0
    );
    const totalDef = get(team).reduce(
        (a, b) => b.position === "Def" && a + b.qty,
        0
    );
    const totalMid = get(team).reduce(
        (a, b) => b.position === "Mid" && a + b.qty,
        0
    );
    const totalAtt = get(team).reduce(
        (a, b) => b.position === "Att" && a + b.qty,
        0
    );

    return {
        totalGK,
        totalDef,
        totalMid,
        totalAtt
    };
}

Answer 1

使用三元运算符会更好，因此您始终 return 来自函数的值。像这样

const totalGK = get(team).reduce(
  (a, b) => b.position === "GK" ? a + b.qty : a,
   0
);

Answer 2

减少时，你总是return累加器的新值。在您的情况下，您将一个值添加到先前的累加器以获得新值。因此，您应该始终取 a（累加器），并添加 0（b.position === something 为 false, so it's casted to 0) 或条件为 true 时的数字。

const totalGK = get(team).reduce(
  (a, b) => a + (b.position === "GK" && b.qty),
  0
);
const totalDef = get(team).reduce(
  (a, b) => a + (b.position === "Def" && b.qty),
  0
);
const totalMid = get(team).reduce(
  (a, b) => a + (b.position === "Mid" && b.qty),
  0
);
const totalAtt = get(team).reduce(
  (a, b) => a + (b.position === "Att" && b.qty),
  0
);

然而，有一种更短且更易读的方法来解决这个问题，将 team 简化为一个对象，使用 position 值作为键，并将 qty 添加到键的前一个值。要获取常量，请解构由 reduce 创建的对象，并使用 0 作为默认值。

示例：

const get = arr => arr;

const team = [{ position: 'GK', qty: 2 }, { position: 'GK', qty: 2 }, { position: 'GK', qty: 2 }, { position: 'Att', qty: 3 }, { position: 'Att', qty: 3 }, { position: 'Att', qty: 3 }];

const {
  GK: totalGK = 0,
  Def: totalDef = 0,
  Mid: totalMid = 0,
  Att: totalAtt = 0,
} = get(team).reduce((acc, obj) => ({
  ...acc,
  [obj.position]: (acc[obj.position] || 0) + obj.qty
}), {});

console.log(totalGK); // 6
console.log(totalDef); // 0
console.log(totalMid); // 0
console.log(totalAtt); // 9

Javascript 减速器，如何停止&&运算符重置值？

Javascript reducer, how to stop && operator resetting values?

javascript

arrays

object

reducers

reactjs