企业官网建设流程全解析

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 的优先级表）：

类别描述文件 _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.md）；
• impactDescription：本条为reduces iterations，即收益来源是"减少遍历次数"；
• tags：javascript, 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·n（k为调用个数）；合并成单个for...of循环后只遍历一次，每个元素上的判断在一次迭代内全部完成。对本例（3 个filter），数组元素被访问的次数从 3 次降到 1 次。

除遍历次数外，单循环写法还有两个附带好处，可以从 JavaScript 运行时的行为推断：

1. 引用只解引用一次。链式写法中每次回调都要从thisArg/闭包重新取user的字段，且每次filter都要创建一个新的中间数组；合并写法中每个元素在同一个迭代里完成全部判断，输出数组按预期逐个push填充。
2. 回调开销更小。三次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.md：

pnpm install # 安装依赖 pnpm build # 从 rules/ 编译出 AGENTS.md 与 test-cases.json pnpm validate # 校验所有规则文件 pnpm extract-tests # 抽取供 LLM 评估的测试用例

规则库的结构约定（见 README）：

• rules/存放每条规则的独立文件，命名格式为前缀-描述.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和测试用例即可，无需改动任何编号或交叉引用。

实操小结

1. 识别模式：对同一数组的连续多次filter/map，尤其当它们各自产出相互独立的结果集时，优先合并为一次for...of循环，每个元素上顺带完成所有分支判断；
2. 量化收益：k次遍历降为 1 次，同时省去中间数组分配与回调调用开销，影响等级 LOW-MEDIUM，优先应用于热路径；
3. 搭配使用：循环内出现成员判断时，参照js-set-map-lookups把查找集合换成Set/Map；单个结果集上的"转换+过滤"则用js-flatmap-filter的flatMap单遍写法；
4. 维护规则：规则源文件、构建命令与产物位置遵循 README.md 的约定，改动后以pnpm build同步 AGENTS.md 与test-cases.json。

【免费下载链接】plateRich-text editor with AI and shadcn/ui项目地址: https://gitcode.com/GitHub_Trending/pl/plate