 单次循环求数组极值，替代 O(n log n) 排序（Vercel js-min-max-loop 规则解析）)
Cherry Studio 前端性能实践用 O(n) 单次循环求数组极值替代 O(n log n) 排序Vercel js-min-max-loop 规则解析【免费下载链接】cherry-studioAI productivity studio with smart chat, autonomous agents, and 300 assistants. Unified access to frontier LLMs项目地址: https://gitcode.com/GitHub_Trending/ch/cherry-studio本指南围绕 Cherry Studio 仓库内置的 Vercel React 最佳实践技能包中的js-min-max-loop规则展开解决一个高频性能问题当只需要数组中的最小值或最大值时为什么排序是浪费的以及如何用单次循环在 O(n) 时间内完成。读完本文你将掌握单极值与双极值的循环实现、空数组边界处理、Math.min/max展开运算符的适用上限并能在 Cherry Studio 这样的大型 Electron React 代码库中准确识别和改写这类低效写法。规则出处与定位该规则位于仓库的 Vercel React 最佳实践技能包中是一套面向 React/Next.js 应用的性能优化规则集合共 62 条规则、8 大类按影响度分级排序。js-min-max-loop归属于JavaScript 性能类目前缀js-影响级别 LOW–MEDIUM其 frontmatter 元数据如下--- title: Use Loop for Min/Max Instead of Sort impact: LOW impactDescription: O(n) instead of O(n log n) tags: javascript, arrays, performance, sorting, algorithms ---从元数据可以看到这条规则的定位非常明确求极值用循环替代排序将时间复杂度从 O(n log n) 降到 O(n)。它属于增量改进级别的低影响规则——单个调用点的收益有限但在大型应用中这类模式往往出现在高频路径如会话切换、消息排序、资源列表刷新上累计收益可观。规则的原始文件为 js-min-max-loop.md技能包的整体组织方式见 SKILL.md 与 README.md编译后的完整规则合订本在 AGENTS.md。问题本质求极值根本不需要排序查找数组中的最小或最大元素只需要对数组做一次完整遍历即可完成——每个元素只访问一次比较一次最终留下一个极值。而排序算法无论快排、归并还是 V8 引擎内部的 TimSort都需要把整个数组重排为有序序列其时间复杂度下限是 O(n log n)且通常会产生额外的数组复制开销如[...arr].sort()的展开复制调用大量比较器函数comparator带来函数调用开销在数据规模较大时引发更频繁的缓存未命中。当业务只需要最新的一条或最旧/最新各一条时排序结果中除首尾之外的所有中间元素都是计算出来却从未使用的废品。反模式一排序取最新以下写法将整个数组按updatedAt降序排序然后取第一个元素作为最新项目interface Project { id: string name: string updatedAt: number } function getLatestProject(projects: Project[]) { const sorted [...projects].sort((a, b) b.updatedAt - a.updatedAt) return sorted[0] }这段代码有两个明显问题复杂度错误sort需要 O(n log n)而查找最大值只需 O(n)额外复制[...projects]先复制整个数组虽然这是为了避免原地排序破坏原数组的防御性写法但它进一步放大了开销。反模式二一次排序取最旧与最新有时业务需要同时拿到最旧和最新两个元素看起来反正要排序一次两个都取了似乎划算function getOldestAndNewest(projects: Project[]) { const sorted [...projects].sort((a, b) a.updatedAt - b.updatedAt) return { oldest: sorted[0], newest: sorted[sorted.length - 1] } }这种写法依然排序了整个数组——即便只用到首尾两个元素。中间n-2个元素的有序排列对结果毫无贡献排序付出的 O(n log n) 代价是纯浪费。正确实现单次循环求极值正确的做法是一次遍历同时完成极值查找既不复制数组也不触发任何比较器function getLatestProject(projects: Project[]) { if (projects.length 0) return null let latest projects[0] for (let i 1; i projects.length; i) { if (projects[i].updatedAt latest.updatedAt) { latest projects[i] } } return latest } function getOldestAndNewest(projects: Project[]) { if (projects.length 0) return { oldest: null, newest: null } let oldest projects[0] let newest projects[0] for (let i 1; i projects.length; i) { if (projects[i].updatedAt oldest.updatedAt) oldest projects[i] if (projects[i].updatedAt newest.updatedAt) newest projects[i] } return { oldest, newest } }要点拆解空数组守卫projects.length 0时直接返回null或{ oldest: null, newest: null }避免对projects[0]做非法访问undefined 参与比较会产生NaN等脏数据初始值以projects[0]作为极值候选循环从i 1开始天然少一次无意义的自比较单次遍历每个元素恰好访问一次比较一次或两次总操作数为 O(n)零复制、零排序不产生新数组不调用比较器对引用型元素对象只保留指针双极值场景同样只需一次遍历getOldestAndNewest在同一个循环内同时维护两个候选变量不会因为要两个结果而变成 2n——两个if判断在同一个迭代体内完成仍然是 O(n)。替代方案Math.min / Math.max 展开运算对于纯数字数组可以用内置的Math.min/Math.max配合展开运算符spreadconst numbers [5, 2, 8, 1, 9] const min Math.min(...numbers) const max Math.max(...numbers)这段代码简洁直观但存在参数个数上限这一隐性限制展开运算符会将数组元素逐个作为函数参数传入当数组规模超过引擎允许的最大函数参数个数时会直接抛出RangeError: Maximum call stack size exceeded之类的异常。规则文档中记录的近似上限为Chrome 143 约 124,000 个元素、Safari 18 约 638,000 个元素具体数值因引擎版本而异。因此该方案的适用边界是✅ 小数组如几十到几百个元素——简洁且可读❌ 大数组——可能直接抛错即使不抛错超大参数列表的构造本身也有性能损耗❌ 需要按对象字段如updatedAt求极值的场景——Math.min无法直接处理需要先map出字段数组徒增一次遍历。可靠性优先时一律使用循环方案——它对数组规模无上限且天然支持对象字段比较这是规则给出的最终结论。Cherry Studio 仓库中的真实印证这条规则在 Cherry Studio 的实际代码中有两个值得对照的实例。实例一合理使用 Math.min/max 展开有界数组在表格文件解析的工作线程 parseWorkbook.ts 中计算选区边界时使用了展开运算符求极值top: Math.min(...rows), left: Math.min(...cols), bottom: Math.max(...rows), right: Math.max(...cols)这里的rows/cols来自表格的行列索引规模受限于工作表的行列数量Excel 单表行数上限约 100 万、列数仅 1.6 万级别且实际选区通常远小于全表属于有界小数组符合规则的适用前提。这个实例说明规则并非禁用Math.min/max展开而是要求开发者判断数组规模与可靠性边界——在数据来源受控、规模有界时展开写法是合理的。实例二测试用例中的排序反模式值得改写在资源侧栏逻辑的测试 useResourceEntityRail.test.tsx 中loadResourceForEntity的 mock 实现正是规则文档描述的反模式——按updatedAt降序排序后取首个元素作为最新资源const matches RESOURCES.filter((resource) resource.entityId entityId) return [...matches].sort((a, b) b.updatedAt - a.updatedAt)[0] ?? null如果将该 mock 改写为循环版本结果完全一致且更高效const matches RESOURCES.filter((resource) resource.entityId entityId) if (matches.length 0) return null let latest matches[0] for (let i 1; i matches.length; i) { if (matches[i].updatedAt latest.updatedAt) latest matches[i] } return latest从源码结构看这类取最新一条的查找模式在 Cherry Studio 的会话、助手、消息等资源切换路径中大量存在useAgentSessionParts.ts、useTopicMessages.ts 中也有按时间排序的代码这些位置若仅需首尾极值都可按本规则评估改写空间。需要说明的是上述为测试 mock 代码数据量小、不影响生产性能此处引用仅作为反模式长什么样的直观对照。什么时候才真的需要排序明确本规则的适用边界避免矫枉过正。以下场景应该保留排序场景原因需要完整的升序/降序列表如时间线、排行榜展示全部元素排序结果本身就是要渲染的数据需要 Top-N 且 N 1循环只能取 1 个极值若需 Top-3可部分排序或维护小顶堆依赖有序性的二分查找必须基于有序数组数据本身已有序或近乎有序TimSort 对近似有序输入接近 O(n)判断标准只有一条最终消费的是整个有序序列还是极值/首尾项。前者用排序后者用循环。与相邻规则的协同在技能包的 JavaScript 性能类目前缀js-中js-min-max-loop与多条规则形成互补共同构成数组操作性能的完整视图js-tosorted-immutable当确实需要排序且要保持不可变时用toSorted()替代sort() 手动复制js-combine-iterations将多次filter/map合并为单次循环与单次遍历理念一致js-length-check-first在昂贵比较前先做长度检查配合空数组守卫使用js-early-exit尽早返回空数组立即return null正是它的应用。实践清单在编写或审查 Cherry Studio 这类大型前端项目代码时可对照以下清单自查识别信号[...arr].sort(...)[0]、.sort((a, b) b.x - a.x)[0]、.sort(...)[arr.length - 1]这类排序后取首尾的写法是反模式的直接信号确认需求只取一个极值或首尾两项 → 改用单次循环需要完整有序结果 → 保留排序处理边界始终先判断空数组length 0返回null或带null的对象避免undefined污染比较结果评估规模纯数字小数组可用Math.min(...arr)/Math.max(...arr)但要注意展开参数上限Chrome 143 约 12.4 万、Safari 18 约 63.8 万随版本浮动对象数组或大数组一律用循环双极值一次遍历需要同时取最旧与最新时在同一个循环体内维护两个候选变量保持 O(n)顺手检查相邻模式同一段代码若还有filtermap串联、重复属性访问可一并按js-combine-iterations、js-cache-property-access等相邻规则优化。延伸阅读规则原文.agents/skills/vercel-react-best-practices/rules/js-min-max-loop.md技能包总览含 8 大优先级分类.agents/skills/vercel-react-best-practices/SKILL.md技能包结构与规则编写规范.agents/skills/vercel-react-best-practices/README.md完整编译版规则合订本7.11 节即本规则.agents/skills/vercel-react-best-practices/AGENTS.md仓库内展开运算合理用例parseWorkbook.ts仓库内排序取极值反模式对照useResourceEntityRail.test.tsx【免费下载链接】cherry-studioAI productivity studio with smart chat, autonomous agents, and 300 assistants. Unified access to frontier LLMs项目地址: https://gitcode.com/GitHub_Trending/ch/cherry-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/12 2:11:36 · 阅读 1.2k Cherry Studio 前端性能实践：用 O(n) 单次循环求数组极值，替代 O(n log n) 排序（Vercel js-min-max-loop 规则解析）
Cherry Studio 前端性能实践用 O(n) 单次循环求数组极值替代 O(n log n) 排序Vercel js-min-max-loop 规则解析【免费下载链接】cherry-studioAI productivity studio with smart chat, autonomous agents, and 300 assistants. Unified access to frontier LLMs项目地址: https://gitcode.com/GitHub_Trending/ch/cherry-studio本指南围绕 Cherry Studio 仓库内置的 Vercel React 最佳实践技能包中的js-min-max-loop规则展开解决一个高频性能问题当只需要数组中的最小值或最大值时为什么排序是浪费的以及如何用单次循环在 O(n) 时间内完成。读完本文你将掌握单极值与双极值的循环实现、空数组边界处理、Math.min/max展开运算符的适用上限并能在 Cherry Studio 这样的大型 Electron React 代码库中准确识别和改写这类低效写法。规则出处与定位该规则位于仓库的 Vercel React 最佳实践技能包中是一套面向 React/Next.js 应用的性能优化规则集合共 62 条规则、8 大类按影响度分级排序。js-min-max-loop归属于JavaScript 性能类目前缀js-影响级别 LOW–MEDIUM其 frontmatter 元数据如下--- title: Use Loop for Min/Max Instead of Sort impact: LOW impactDescription: O(n) instead of O(n log n) tags: javascript, arrays, performance, sorting, algorithms ---从元数据可以看到这条规则的定位非常明确求极值用循环替代排序将时间复杂度从 O(n log n) 降到 O(n)。它属于增量改进级别的低影响规则——单个调用点的收益有限但在大型应用中这类模式往往出现在高频路径如会话切换、消息排序、资源列表刷新上累计收益可观。规则的原始文件为 js-min-max-loop.md技能包的整体组织方式见 SKILL.md 与 README.md编译后的完整规则合订本在 AGENTS.md。问题本质求极值根本不需要排序查找数组中的最小或最大元素只需要对数组做一次完整遍历即可完成——每个元素只访问一次比较一次最终留下一个极值。而排序算法无论快排、归并还是 V8 引擎内部的 TimSort都需要把整个数组重排为有序序列其时间复杂度下限是 O(n log n)且通常会产生额外的数组复制开销如[...arr].sort()的展开复制调用大量比较器函数comparator带来函数调用开销在数据规模较大时引发更频繁的缓存未命中。当业务只需要最新的一条或最旧/最新各一条时排序结果中除首尾之外的所有中间元素都是计算出来却从未使用的废品。反模式一排序取最新以下写法将整个数组按updatedAt降序排序然后取第一个元素作为最新项目interface Project { id: string name: string updatedAt: number } function getLatestProject(projects: Project[]) { const sorted [...projects].sort((a, b) b.updatedAt - a.updatedAt) return sorted[0] }这段代码有两个明显问题复杂度错误sort需要 O(n log n)而查找最大值只需 O(n)额外复制[...projects]先复制整个数组虽然这是为了避免原地排序破坏原数组的防御性写法但它进一步放大了开销。反模式二一次排序取最旧与最新有时业务需要同时拿到最旧和最新两个元素看起来反正要排序一次两个都取了似乎划算function getOldestAndNewest(projects: Project[]) { const sorted [...projects].sort((a, b) a.updatedAt - b.updatedAt) return { oldest: sorted[0], newest: sorted[sorted.length - 1] } }这种写法依然排序了整个数组——即便只用到首尾两个元素。中间n-2个元素的有序排列对结果毫无贡献排序付出的 O(n log n) 代价是纯浪费。正确实现单次循环求极值正确的做法是一次遍历同时完成极值查找既不复制数组也不触发任何比较器function getLatestProject(projects: Project[]) { if (projects.length 0) return null let latest projects[0] for (let i 1; i projects.length; i) { if (projects[i].updatedAt latest.updatedAt) { latest projects[i] } } return latest } function getOldestAndNewest(projects: Project[]) { if (projects.length 0) return { oldest: null, newest: null } let oldest projects[0] let newest projects[0] for (let i 1; i projects.length; i) { if (projects[i].updatedAt oldest.updatedAt) oldest projects[i] if (projects[i].updatedAt newest.updatedAt) newest projects[i] } return { oldest, newest } }要点拆解空数组守卫projects.length 0时直接返回null或{ oldest: null, newest: null }避免对projects[0]做非法访问undefined 参与比较会产生NaN等脏数据初始值以projects[0]作为极值候选循环从i 1开始天然少一次无意义的自比较单次遍历每个元素恰好访问一次比较一次或两次总操作数为 O(n)零复制、零排序不产生新数组不调用比较器对引用型元素对象只保留指针双极值场景同样只需一次遍历getOldestAndNewest在同一个循环内同时维护两个候选变量不会因为要两个结果而变成 2n——两个if判断在同一个迭代体内完成仍然是 O(n)。替代方案Math.min / Math.max 展开运算对于纯数字数组可以用内置的Math.min/Math.max配合展开运算符spreadconst numbers [5, 2, 8, 1, 9] const min Math.min(...numbers) const max Math.max(...numbers)这段代码简洁直观但存在参数个数上限这一隐性限制展开运算符会将数组元素逐个作为函数参数传入当数组规模超过引擎允许的最大函数参数个数时会直接抛出RangeError: Maximum call stack size exceeded之类的异常。规则文档中记录的近似上限为Chrome 143 约 124,000 个元素、Safari 18 约 638,000 个元素具体数值因引擎版本而异。因此该方案的适用边界是✅ 小数组如几十到几百个元素——简洁且可读❌ 大数组——可能直接抛错即使不抛错超大参数列表的构造本身也有性能损耗❌ 需要按对象字段如updatedAt求极值的场景——Math.min无法直接处理需要先map出字段数组徒增一次遍历。可靠性优先时一律使用循环方案——它对数组规模无上限且天然支持对象字段比较这是规则给出的最终结论。Cherry Studio 仓库中的真实印证这条规则在 Cherry Studio 的实际代码中有两个值得对照的实例。实例一合理使用 Math.min/max 展开有界数组在表格文件解析的工作线程 parseWorkbook.ts 中计算选区边界时使用了展开运算符求极值top: Math.min(...rows), left: Math.min(...cols), bottom: Math.max(...rows), right: Math.max(...cols)这里的rows/cols来自表格的行列索引规模受限于工作表的行列数量Excel 单表行数上限约 100 万、列数仅 1.6 万级别且实际选区通常远小于全表属于有界小数组符合规则的适用前提。这个实例说明规则并非禁用Math.min/max展开而是要求开发者判断数组规模与可靠性边界——在数据来源受控、规模有界时展开写法是合理的。实例二测试用例中的排序反模式值得改写在资源侧栏逻辑的测试 useResourceEntityRail.test.tsx 中loadResourceForEntity的 mock 实现正是规则文档描述的反模式——按updatedAt降序排序后取首个元素作为最新资源const matches RESOURCES.filter((resource) resource.entityId entityId) return [...matches].sort((a, b) b.updatedAt - a.updatedAt)[0] ?? null如果将该 mock 改写为循环版本结果完全一致且更高效const matches RESOURCES.filter((resource) resource.entityId entityId) if (matches.length 0) return null let latest matches[0] for (let i 1; i matches.length; i) { if (matches[i].updatedAt latest.updatedAt) latest matches[i] } return latest从源码结构看这类取最新一条的查找模式在 Cherry Studio 的会话、助手、消息等资源切换路径中大量存在useAgentSessionParts.ts、useTopicMessages.ts 中也有按时间排序的代码这些位置若仅需首尾极值都可按本规则评估改写空间。需要说明的是上述为测试 mock 代码数据量小、不影响生产性能此处引用仅作为反模式长什么样的直观对照。什么时候才真的需要排序明确本规则的适用边界避免矫枉过正。以下场景应该保留排序场景原因需要完整的升序/降序列表如时间线、排行榜展示全部元素排序结果本身就是要渲染的数据需要 Top-N 且 N 1循环只能取 1 个极值若需 Top-3可部分排序或维护小顶堆依赖有序性的二分查找必须基于有序数组数据本身已有序或近乎有序TimSort 对近似有序输入接近 O(n)判断标准只有一条最终消费的是整个有序序列还是极值/首尾项。前者用排序后者用循环。与相邻规则的协同在技能包的 JavaScript 性能类目前缀js-中js-min-max-loop与多条规则形成互补共同构成数组操作性能的完整视图js-tosorted-immutable当确实需要排序且要保持不可变时用toSorted()替代sort() 手动复制js-combine-iterations将多次filter/map合并为单次循环与单次遍历理念一致js-length-check-first在昂贵比较前先做长度检查配合空数组守卫使用js-early-exit尽早返回空数组立即return null正是它的应用。实践清单在编写或审查 Cherry Studio 这类大型前端项目代码时可对照以下清单自查识别信号[...arr].sort(...)[0]、.sort((a, b) b.x - a.x)[0]、.sort(...)[arr.length - 1]这类排序后取首尾的写法是反模式的直接信号确认需求只取一个极值或首尾两项 → 改用单次循环需要完整有序结果 → 保留排序处理边界始终先判断空数组length 0返回null或带null的对象避免undefined污染比较结果评估规模纯数字小数组可用Math.min(...arr)/Math.max(...arr)但要注意展开参数上限Chrome 143 约 12.4 万、Safari 18 约 63.8 万随版本浮动对象数组或大数组一律用循环双极值一次遍历需要同时取最旧与最新时在同一个循环体内维护两个候选变量保持 O(n)顺手检查相邻模式同一段代码若还有filtermap串联、重复属性访问可一并按js-combine-iterations、js-cache-property-access等相邻规则优化。延伸阅读规则原文.agents/skills/vercel-react-best-practices/rules/js-min-max-loop.md技能包总览含 8 大优先级分类.agents/skills/vercel-react-best-practices/SKILL.md技能包结构与规则编写规范.agents/skills/vercel-react-best-practices/README.md完整编译版规则合订本7.11 节即本规则.agents/skills/vercel-react-best-practices/AGENTS.md仓库内展开运算合理用例parseWorkbook.ts仓库内排序取极值反模式对照useResourceEntityRail.test.tsx【免费下载链接】cherry-studioAI productivity studio with smart chat, autonomous agents, and 300 assistants. Unified access to frontier LLMs项目地址: https://gitcode.com/GitHub_Trending/ch/cherry-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考