在 reduce 函数中添加到累加器时修复 ESLint no-plusplus 和 no-param-reassign linter 错误

Question

在 TypeScript 中提供此代码：

const res = arr.reduce((acc, cur) => (cur.id ? ++acc : acc), 0);

如何阻止 linter 抛出这两个错误？

(parameter) acc: number Unary operator '++' used. eslint no-plusplus

Assignment to function parameter 'acc'. eslint no-param-reassign

Answer 1

reduce 回调接受累加器和当前值作为参数，returns 接受下一次迭代的累加器，如果没有下一次迭代，则接受累加器作为结果。没有理由改变任何参数。

有, and that’s why ESLint complains about this, with the no-param-reassign rule.

此外，no-plusplus rule 不允许像 ++acc.

这样的语法

因为一开始不需要改变 acc，两个错误的最小修正是：

   const res = arr.reduce((acc, cur) => (cur.id ? acc + 1 : acc), 0);
//                                                ~~~~^~~              Replace `++acc` by `acc + 1`

如果 cur.id 为真，则此 returns acc 递增 1，而当前 acc，否则， 符合预期。除了返回递增的 acc 之外，您的版本还改变了当前的 acc，但没有理由这样做。

如果您使用 ESLint，则必须了解这些规则。您不能编写 ESLint 抱怨的代码，然后对为什么 ESLint 抱怨您的代码感到困惑。 Every rule 有自己的文章解释基本原理、列出备选方案并解释如何调整或禁用规则。

例如，您可以禁用 no-param-reassign 规则

通过在文件顶部添加评论 // eslint-disable no-param-reassign，
或// eslint-disable-next-line no-param-reassign用法上方一行，
或// eslint-disable-line no-param-reassign在使用后的行中，
或在您的 .eslintrc 文件中禁用它。

还有a rule that would disallow conditional expressions and some variants。你可以进一步简化你的函数来避免这种情况：

const res = arr.reduce((acc, cur) => acc + Number(Boolean(cur.id)), 0);

这将具有相同的语义，但仍然不太清楚 cur.id 应该是什么条件。最好的做法是让它更明确一点（尤其是在 TypeScript 中），例如cur.hasOwnProperty("id") 或 cur.id !== 0 或 cur.id !== ""，取决于 cur.id 可能是什么。然后，不再需要 Boolean 调用；例如，如果你想计算 arr 中有多少对象拥有 id 自己的属性，请改用：

const res = arr.reduce((acc, cur) => acc + Number(cur.hasOwnProperty("id")), 0);

或者这个：

const res = arr.filter((cur) => cur.hasOwnProperty("id")).length;

如果您仍想使用原来的 falsy / truthy check, the code can be shortened to one of these, using destructuring assignment:

const res = arr.reduce((acc, {id}) => acc + Number(Boolean(id)), 0);

const res = arr.filter(({id}) => id).length;

在 reduce 函数中添加到累加器时修复 ESLint no-plusplus 和 no-param-reassign linter 错误

Fix ESLint no-plusplus and no-param-reassign linter errors when adding to accumulator in reduce function

javascript

typescript

eslint