plate 的 React 最佳实践规则体系合并多次数组迭代以降低遍历开销【免费下载链接】plateRich-text editor with AI and shadcn/ui项目地址: https://gitcode.com/GitHub_Trending/pl/plate在 plate基于 Slate 的富文本编辑器集成 AI 与 shadcn/ui仓库中.agents/skills/vercel-react-best-practices目录维护了一套面向 Agent 和 LLM 的 React/Next.js 性能优化规则库共 8 大类、69 条规则按影响程度分层管理。其中js-combine-iterations合并多次数组迭代是第 7 类JavaScript 性能js-前缀中的一条 LOW-MEDIUM 影响等级规则核心思想是多个.filter()/.map()调用会多次遍历同一数组应当合并为一次循环。读完本文你可以掌握这条规则的完整改法、适用边界以及它在整个规则体系中的定位与配套构建流程。规则在技能体系中的定位plate 仓库中的这份规则库由 Vercel 工程团队的 React 最佳实践整理而来其组织方式在 SKILL.md 中定义按优先级分为 8 个类别本条规则所在的 JavaScript Performance 类别影响等级为 LOW-MEDIUM规则速查表中对其一句话概括为Combine multiple filter/map into one loop把多个 filter/map 合并为一次循环。8 个类别及其影响等级如下引自 SKILL.md 的优先级表优先级类别影响等级文件前缀1Eliminating Waterfalls消除请求瀑布CRITICALasync-2Bundle Size Optimization包体积优化CRITICALbundle-3Server-Side Performance服务端性能HIGHserver-4Client-Side Data Fetching客户端数据获取MEDIUM-HIGHclient-5Re-render Optimization重渲染优化MEDIUMrerender-6Rendering Performance渲染性能MEDIUMrendering-7JavaScript PerformanceJavaScript 性能LOW-MEDIUMjs-8Advanced Patterns高级模式LOWadvanced-类别描述文件 _sections.md 对第 7 类的定位是Micro-optimizations for hot paths can add up to meaningful improvements热路径上的微优化累积起来能带来可观的提升。这与本条规则的 LOW-MEDIUM 影响等级自洽单次合并循环的收益有限但在频繁执行的代码路径如编辑器中随每次按键、每次渲染运行的选择/装饰计算里减少 2/3 的数组遍历次数是有实际意义的。规则文件本身遵循统一模板元数据存放在 YAML frontmatter 中模板见 _template.md。本条规则的 frontmatter 为--- title: Combine Multiple Array Iterations impact: LOW-MEDIUM impactDescription: reduces iterations tags: javascript, arrays, loops, performance ---title规则标题编译产物中按标题字母序在分节内排序impact影响等级取值为CRITICAL/HIGH/MEDIUM-HIGH/MEDIUM/LOW-MEDIUM/LOW六级等级定义见 README.mdimpactDescription本条为reduces iterations即收益来源是减少遍历次数tagsjavascript, arrays, loops, performance用于检索与评估。规则核心把多次 filter 合并为一次循环规则原文给出的判定标准只有一条多个.filter()或.map()调用对同一数组重复遍历应当合并成一次循环。反例遍历 3 次const admins users.filter(u u.isAdmin) const testers users.filter(u u.isTester) const inactive users.filter(u !u.isActive)正例遍历 1 次const admins: User[] [] const testers: User[] [] const inactive: User[] [] for (const user of users) { if (user.isAdmin) admins.push(user) if (user.isTester) testers.push(user) if (!user.isActive) inactive.push(user) }为什么这样更快从复杂度上看n个独立的高阶函数调用意味着n次完整遍历总访问量为k·nk为调用个数合并成单个for...of循环后只遍历一次每个元素上的判断在一次迭代内全部完成。对本例3 个filter数组元素被访问的次数从 3 次降到 1 次。除遍历次数外单循环写法还有两个附带好处可以从 JavaScript 运行时的行为推断引用只解引用一次。链式写法中每次回调都要从thisArg/闭包重新取user的字段且每次filter都要创建一个新的中间数组合并写法中每个元素在同一个迭代里完成全部判断输出数组按预期逐个push填充。回调开销更小。三次filter意味着回调函数被调用3n次每次都有调用栈开销单循环中if判断是普通分支代价远低于函数调用。需要说明的适用边界impact: LOW-MEDIUM表明这条规则属于值得做但不必强求的层级。对于一次性执行、数组很小的代码链式filter的可读性往往优于手写单循环保持链式写法是合理取舍。规则真正的收益集中在热路径——即随交互高频执行的代码。这一点与本仓库的场景相关plate 的编辑器核心packages/core在用户每次输入、选择变化时都会对节点、装饰等集合做遍历处理这类路径上的重复遍历正是该规则瞄准的对象。与同组规则的组合关系在js-规则组内js-combine-iterations 常与以下规则配合出现覆盖减少数组遍历的不同形态js-flatmap-filter一次 flatMap 同时完成 map 与 filter针对.map().filter(Boolean)这类两次遍历 一个中间数组的模式改为flatMap单遍完成转换与过滤。与本条的区别在于combine-iterations处理的是多个相互独立的结果集多个桶flatMap处理的是一个结果集的转换过滤。js-set-map-lookups用 Set/Map 做 O(1) 查找当合并后的循环内需要反复做成员判断如allowedIds.includes(id)应先把候选集转成Set把每次O(n)的includes降为O(1)的has。它与本条是正交优化一条减遍历轮数一条减单轮内的查找代价。同组还有js-length-check-first先查长度避免空数组上的昂贵比较、js-early-exit提前返回、js-hoist-regexp正则移出循环等共同构成热路径微优化清单完整列表见 SKILL.md 第 7 节的 Quick Reference。规则文件的构建与产出这条规则不是孤立存在的它是规则库的一条源记录编译后进入两份生成产物。整个流程定义在 README.mdpnpm install # 安装依赖 pnpm build # 从 rules/ 编译出 AGENTS.md 与 test-cases.json pnpm validate # 校验所有规则文件 pnpm extract-tests # 抽取供 LLM 评估的测试用例规则库的结构约定见 READMErules/存放每条规则的独立文件命名格式为前缀-描述.md如js-combine-iterations.md分节由文件名前缀自动推断规则在节内按标题字母序排序规则编号如 7.6在构建时自动生成维护者不需要手工管理编号以_开头的文件_sections.md、_template.md是特殊文件不参与编译编译产物 AGENTS.md 是全部 69 条规则展开后的完整文档本条规则编译后位于其中的### 7.6 Combine Multiple Array Iterations小节正文与源文件示例一致3 次遍历的反例、1 次遍历的正例test-cases.json是从规则示例中提取的评估用例用于对 LLM 遵循该规则的能力做回归测试。这意味着修改本条规则例如补充新的迭代合并场景只需编辑rules/js-combine-iterations.md再执行pnpm build重新生成AGENTS.md和测试用例即可无需改动任何编号或交叉引用。实操小结识别模式对同一数组的连续多次filter/map尤其当它们各自产出相互独立的结果集时优先合并为一次for...of循环每个元素上顺带完成所有分支判断量化收益k次遍历降为 1 次同时省去中间数组分配与回调调用开销影响等级 LOW-MEDIUM优先应用于热路径搭配使用循环内出现成员判断时参照js-set-map-lookups把查找集合换成Set/Map单个结果集上的转换过滤则用js-flatmap-filter的flatMap单遍写法维护规则规则源文件、构建命令与产物位置遵循 README.md 的约定改动后以pnpm build同步 AGENTS.md 与test-cases.json。【免费下载链接】plateRich-text editor with AI and shadcn/ui项目地址: https://gitcode.com/GitHub_Trending/pl/plate创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考