eslint-plugin-unicorn 规则解析：no-array-concat-in-loop 循环内数组累加检测实战

eslint-plugin-unicorn 规则解析no-array-concat-in-loop 循环内数组累加检测实战【免费下载链接】eslint-plugin-unicornMore than 300 powerful ESLint rules项目地址: https://gitcode.com/GitHub_Trending/es/eslint-plugin-unicorn导读no-array-concat-in-loop是 eslint-plugin-unicorn 提供的一条推荐型规则用于禁止在循环体内使用Array#concat()反复重新赋值数组变量。本文以该规则的测试快照文档test/snapshots/no-array-concat-in-loop.js.md为主体结合规则实现源码rules/no-array-concat-in-loop.js、rules/shared/array-concat-in-loop.js与官方文档docs/rules/no-array-concat-in-loop.md完整梳理该规则捕获的全部 16 种违规形态、检测判定条件、合法豁免场景以及正确的性能修复方案。读完本文你将能准确理解该规则的检测边界并在自己的代码评审与 ESLint 配置中正确使用与排查它。规则背景为什么禁止在循环里用 concat 累加数组Array#concat()每次调用都会创建一个全新的数组。如果在循环的每一轮迭代中都用result result.concat(chunk)来累加那么每一轮迭代都会把到目前为止累积的全部元素重新复制一遍。设累计元素总数为 n则整体开销约为 O(n²)呈二次方增长——这正是快照文档以及规则文档所警告的核心性能问题。规则文档docs/rules/no-array-concat-in-loop.md给出的建议替代方案有两种// ❌ 错误每次迭代都复制整个已累积数组 let result []; for (const chunk of chunks) { result result.concat(chunk); }// ✅ 正确循环内原地 push当每个 chunk 是数组时 const result []; for (const chunk of chunks) { result.push(...chunk); }// ✅ 正确先收集嵌套数组循环外一次性拍平 const result chunks.flat();这条规则在项目默认的recommended配置中为启用状态其 meta 中recommended: true见 rules/no-array-concat-in-loop.js规则类型为suggestion且不提供自动修复autofix。快照文档解读16 个违规用例的完整覆盖矩阵快照文件 test/snapshots/no-array-concat-in-loop.js.md 由 AVA 测试框架自动生成对应测试源文件 test/no-array-concat-in-loop.js 中invalid部分的全部用例。每个用例均报告同一条错误消息Do not useArray#concat()to accumulate an array in a loop.错误位置精确指向concat方法标识符快照中以^^^^^^标记报告节点是AssignmentExpression右侧方法调用的property节点。下面按维度对 16 个用例分类解析。维度一循环类型全覆盖5 种循环结构快照用例 invalid(1) 至 invalid(6)、invalid(15)、invalid(16) 覆盖了 JavaScript 的全部 5 种循环语句。这与源码中 rules/ast/loop-types.js 定义的循环类型集合一一对应循环语句快照用例违规代码示例for...ofinvalid(1)for (const chunk of chunks) { result result.concat(chunk); }for经典invalid(2)for (let index 0; index chunks.length; index) { result result.concat(chunks[index]); }for...ininvalid(3)for (const index in chunks) { result result.concat(chunks[index]); }whileinvalid(4)while (chunks.length 0) { result result.concat(chunks.pop()); }do...whileinvalid(5)do { result result.concat(getChunk()); } while (hasMoreChunks());值得注意的是 invalid(4) 中chunks.pop()作为参数传入concat说明参数可以是任意表达式invalid(2) 与 invalid(3) 则验证了无论通过chunks[index]还是chunks[index]取值只要赋值给累加变量就会被捕获。维度二for 语句的特殊形态更新表达式与空循环体invalid(6)for (let index 0; index chunks.length; result result.concat(chunks[index])) {}——累加发生在 for 语句的**更新表达式update**中而非循环体内依然被检出。invalid(15)for (let result []; condition; result result.concat(chunk)) {}——变量声明直接位于 for 的 init 中更新表达式里的concat被标记。invalid(16)for (let result []; condition;) { result result.concat(chunk); }——变量声明在 for 的 init 中、调用在循环体内同样被检出。这三个用例印证了检测逻辑并非简单扫描循环体内赋值而是基于变量定义位置与最近循环的关系来判定详见下文源码解析。维度三表达式包装的穿透括号与 TS 断言invalid(7)result (result.concat(chunk));——右侧整体被括号包裹仍被检出。invalid(9)(result) (result).concat(chunk);——赋值左侧与接收者均被括号包裹仍被检出。invalid(12)result (result as string[]).concat(chunk);——TypeScriptas断言包裹。invalid(13)result result!.concat(chunk);——TypeScript 非空断言!。invalid(14)result (string[]result).concat(chunk);——TypeScript 尖括号泛型断言。对应源码在 rules/shared/array-concat-in-loop.js 的unwrapExpression函数它会循环剥离 TypeScript 表达式包装通过unwrapTypeScriptExpression与ParenthesizedExpression括号直到拿到真正的表达式。invalid(12)(13)(14) 三个用例还说明该规则支持js/js语言环境下的 TS 语法规则 meta 中languages: [js/js]测试中通过parser: parsers.typescript启用。维度四变量声明形态let 与 var非 constinvalid(1)let result [];——标准 let 声明。invalid(8)var result [];——var 声明同样被捕获。invalid(15)(16)for (let result []; ...)——声明在 for 头中。这对应源码isReassignableEmptyArrayVariablerules/shared/array-concat-in-loop.js的判定只接受let或var关键字声明、且初始化值为空数组字面量的局部变量variable.scope.type ! global并且变量只能有一个定义variable.defs.length 1。const声明天然不可重赋值因此不会命中。维度五参数形式多参数与展开invalid(10)result result.concat(first, second);——多参数调用。invalid(11)result result.concat(...chunkGroups);——展开运算符调用。对应源码中isMethodCall的minimumArguments: 1要求至少 1 个参数。有趣的是虽然concat()支持零参数但零参数调用无实际累加意义因此规则要求至少一个参数测试 valid 部分也包含result result.concat();作为合法用例。检测算法源码拆解一个完整的判定链路规则的检测入口是监听AssignmentExpression节点rules/no-array-concat-in-loop.js核心判定逻辑全部在 rules/shared/array-concat-in-loop.js 的getArrayConcatInLoop函数中共需依次满足以下 6 个条件赋值运算符必须是assignmentExpression.operator ! 时直接返回、||等复合赋值不检测。左侧必须是标识符left.type Identifier形如result ...对象属性如this.result ...不在检测范围。右侧必须是合法的方法调用isMethodCall(callExpression, {method: concat, minimumArguments: 1, optionalCall: false, optionalMember: false, computed: false})。这意味着方法名必须是非计算属性concatresultconcat不命中不允许可选调用result?.concat(x)调用不能是链条的一部分——这一点通过getParentAssignmentExpression辅助函数保证result.concat(chunk).filter(Boolean)的concat调用父级不是赋值表达式因此不命中。赋值左侧与 concat 的接收者必须是同一变量variable ! getVariable(receiver, context)时返回。result other.concat(chunk)接收者不是累加变量不会误报。该变量必须是可重赋值的空数组变量见isReassignableEmptyArrayVariable——let/var声明、仅一个定义、非全局作用域、初始化为[]isEmptyArrayExpression判定节点为ArrayExpression且elements.length 0见 rules/ast/is-empty-array-expression.js。因此let result [initial]不会命中快照 valid 中有此用例。赋值必须位于循环内部且定义在循环之外getNearestLooprules/shared/array-concat-in-loop.js从赋值节点向上遍历祖先遇到第一个函数边界就停止防止跨函数误报在函数边界之前若遇到循环节点由 rules/ast/is-loop.js 配合 rules/ast/loop-types.js 判定 5 种循环类型再检查变量定义节点不在循环体内isNodeInside(definition.node, loop.body, context)。这解释了为什么 valid 用例中变量定义在循环内以及赋值在嵌套函数内的代码不会被误报。此外getArrayConcatInLoop返回{callExpression, property}规则将property即concat标识符作为报告节点这正是快照中^^^^^^下划线所指的位置。合法豁免场景哪些写法不会被误报结合快照文档中valid部分的 20 个用例与源码判定条件以下场景均不会触发该规则豁免场景示例原因对应源码条件不在循环内result result.concat(chunk);顶层语句无最近循环接收者不是累加变量result other.concat(chunk);条件 4赋值给其他变量other result.concat(chunk);条件 2 左侧变量与接收者不同初始值非空数组let result [initial];条件 5无初始化或后初始化let result;条件 5 无 initconst 声明const result [];条件 5不可重赋值非数组对象let text ; text text.concat(part);字符串条件 5非数组字面量可选调用 / 计算属性result?.concat(x)/resultconcat条件 3链式调用中间位置result.concat(chunk).filter(Boolean)getParentAssignmentExpression辅助检查零参数调用result.concat()条件 3 的minimumArguments: 1定义在循环内for (...) { let result []; result result.concat(chunk); }条件 6赋值在嵌套函数内循环内function append() { result result.concat(chunk); }条件 6 遇函数边界停止闭包外赋值循环外箭头函数内调用条件 6对象属性this.result this.result.concat(chunk);条件 2 仅限 Identifierreduce 回调chunks.reduce((r, c) r.concat(c), [])回调内为函数作用域TS 非空数组初始值let result [initial] as string[];条件 5其中赋值在嵌套函数内不误报是一个重要设计决策getNearestLoop遇到函数节点立即返回 undefined因为无法静态确定该函数是否在循环的某次迭代中被调用、以及concat是否真的在循环上下文内执行宁可漏报也不误报。为什么不提供自动修复autofix规则文档明确说明该规则不提供 autofix原因有二docs/rules/no-array-concat-in-loop.md别名引用会改变可观察行为Array#concat()不修改原数组而是返回新数组push()则原地修改。若旧数组result在循环外还有其他引用别名把result result.concat(chunk)机械替换为result.push(...chunk)后旧引用指向的数组内容会发生变化从而改变程序行为。参数展开语义不完全等价concat(a, b)会将数组参数按元素展开多维只展开一层而push(...a, ...b)的语义与参数类型、稀疏数组、length属性等细节存在差异无法保证在所有边界情况下等价。因此该规则只负责提示修复工作需开发者结合上下文人工完成——这也解释了为什么规则meta.type为suggestion而非problem。在项目中使用该规则该规则随插件默认导出在 rules/index.js 中注册无需额外配置即随recommended配置集启用。若你使用的是unopinionated配置该规则默认关闭。该规则不接收任何配置项schema: []见 rules/no-array-concat-in-loop.js属于开箱即用、不可自定义参数的规则。排查建议当 ESLint 报告该错误时优先将循环内累加改写为push(...chunk)原地追加或使用flat()/flatMap()在循环外一次性合并若循环内产生的是单元素而非数组也可改用result.push(item)直推。改写时务必检查旧数组是否被其他变量别名引用避免引入行为差异。【免费下载链接】eslint-plugin-unicornMore than 300 powerful ESLint rules项目地址: https://gitcode.com/GitHub_Trending/es/eslint-plugin-unicorn创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考