Question

在 TypeScript 中给出这段代码：

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

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

<块引用>

（参数）acc：使用的数字一元运算符“++”。 eslint 无加号

<块引用>

分配给函数参数“acc”。 eslint 无参数重新分配

Answer 1

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

有 a few arguments in favor of avoiding mutating parameters in general，这就是 ESLint 抱怨这个的原因，带有 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`

如果 acc 为真，则返回 1 递增 cur.id，否则返回当前 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 和一些 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 检查，可以使用 destructuring assignment 将代码缩短为其中之一：

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

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

在减少功能中添加到累加器时修复 ESLint no-plusplus 和 no-param-reassign linter 错误

1 个答案: