前端UI组件【免费下载链接】next-shadcn-dashboard-starterFree, open source, AI-friendly admin dashboard template built with Next.js 16, shadcn/ui, Tailwind CSS, and TypeScript. Production-ready tables, forms, auth, and billing. MIT licensed.项目地址https://gitcode.com/gh_mirrors/ne/next-shadcn-dashboard-starter点击查看免费下载在 Next.js TypeScript 项目中数组的求最大/最小是最常见的操作之一。Vercel 官方 React/Next.js 性能规范将js-min-max-loopUse Loop for Min/Max Instead of Sort列为 JavaScript 性能优化规则之一规则原文仅需找出最小或最大元素的场景一次线性遍历即可完成而先排序再取值是典型的 O(n log n) 浪费。本篇以该规则为核心结合 next-shadcn-dashboard-starter 仓库中的真实数据操作如 mock-api.ts 中的表格排序讲解如何识别这类反模式、用循环重写并厘清什么时候排序是合理选择。规则定位来自 Vercel JavaScript 性能规则集这条规则归属于 next-shadcn-dashboard-starter 仓库中内置的 vercel-react-best-practices 技能包。整套规范共 64 条规则、8 大类按影响优先级排序优先级类别影响前缀1Eliminating WaterfallsCRITICALasync-2Bundle Size OptimizationCRITICALbundle-3Server-Side PerformanceHIGHserver-4Client-Side Data FetchingMEDIUM-HIGHclient-5Re-render OptimizationMEDIUMrerender-6Rendering PerformanceMEDIUMrendering-7JavaScript PerformanceLOW-MEDIUMjs-8Advanced PatternsLOWadvanced-js-min-max-loop位于第 7 类 JavaScript 性能js-前缀规则元数据中标注的影响级别为LOW影响描述为O(n) instead of O(n log n)。同属该类的前缀还包括js-length-check-first先查长度、js-hoist-regexp循环外提升正则、js-set-map-lookups用 Set/Map 做 O(1) 查找、js-tosorted-immutable用toSorted()保持不可变等它们都聚焦于热路径上的微优化——单次收益不大但累加起来能带来可感知的整体提升。为什么排序是浪费O(n) 与 O(n log n) 的差距寻找数组的最小或最大元素本质上只需要一次单趟遍历每访问一个元素与当前记录的最值比较一次。复杂度为O(n)且无需复制数组、无需额外内存。排序算法V8 对数组使用 TimSort混合插入排序与归并排序的复杂度为O(n log n)在 n 足够大时开销显著高于 O(n)。更关键的是Array.prototype.sort()默认原地排序即使配合展开运算符[...arr]复制一份也会同时付出复制整个数组 O(n) 排序 O(n log n)的双重代价。当数据量小比如几十条时两者差距几乎不可感知但当数组增长到成千上万条——例如管理后台一次性加载的列表、需要从日志中挑出最新记录、或从数据集里提取极值——O(n log n) 与 O(n) 的差距会迅速放大。规则的核心判断标准很简单只要你的目标是最值本身而不是有序的完整列表就不该排序。反模式一排序后取第一个元素规则给出了第一个典型反例——为了拿到最新项目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]; }这段代码做了三件多余的事复制整个数组、按updatedAt对全部元素排序、最后只取一个元素。其余元素全部被丢弃排序付出的 O(n log n) 时间完全是为了一次取值。反模式二排序后同时取两端更隐蔽的变体是同时要最老和最新时也先排序function getOldestAndNewest(projects: Project[]) { const sorted [...projects].sort((a, b) a.updatedAt - b.updatedAt); return { oldest: sorted[0], newest: sorted[sorted.length - 1] }; }看似只做一次排序就拿到了两端避免了两次遍历但实际上排序仍然是 O(n log n)而两端最值完全可以在单次 O(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 }; }几个值得注意的细节空数组守卫循环前显式处理length 0避免访问projects[0]得到undefined同时为返回值提供清晰的空语义返回null或{ oldest: null, newest: null }。从下标 1 开始以projects[0]作为初始候选值循环从i 1开始避免与自己比较。无复制、无排序、无闭包回调不使用[...projects]复制也不为每个元素调用比较器函数单趟遍历、就地更新两个引用即可。一次遍历求两端getOldestAndNewest在同一循环里做两次比较仍然保持 O(n)。从实现层面看这种写法与仓库中其它js-规则如js-cache-property-access循环内缓存属性、js-combine-iterations合并多次迭代一脉相承都是减少不必要的全量工作、在单趟内完成任务的思路。备选方案Math.min/Math.max展开的边界如果元素本身就是数字规则也给出了更简洁的备选写法const numbers [5, 2, 8, 1, 9]; const min Math.min(...numbers); const max Math.max(...numbers);但必须注意展开运算符spread的两个限制参数数量上限Math.min(...numbers)相当于把每个元素作为独立参数传入超长数组会触发RangeError: Maximum call stack size exceeded。规则指出Chrome 143 下可安全展开的数组长度约为 124000 条Safari 18 下约为 638000 条具体上限随引擎实现与调用栈深度变化。一次性全量展开展开过程本身需要把数组整体解包超大数组还会带来内存与解析开销。因此规则给出的结论很直接对小型数组可以放心使用Math.min/Math.max展开但追求可靠性时请使用循环写法。若要在不展开的前提下利用Math.min/Math.max也可以配合reduce逐元素调用但此时循环实现依然是最直观、最可控的选择。边界辨析什么时候排序才是对的这条规则并非否定排序本身。当业务需求是得到有序列表分页表格、排行榜、时间线、按字段排序展示时O(n log n) 排序是完全必要的。在 next-shadcn-dashboard-starter 仓库中可以找到最典型的合法用例产品与用户表格的 mock API 在收到sort查询参数时需要按指定字段对整表排序后再分页例如 mock-api.ts 中产品列表的排序逻辑if (sort) { const sortItems JSON.parse(sort) as { id: string; desc: boolean }[]; if (sortItems.length 0) { const { id, desc } sortItems[0]; allProducts.sort((a, b) { // 数值字段用减法字符串字段用 localeCompare }); } }用户 mock API 中的排序逻辑结构一致并额外处理了计算字段如拼接的name。这类排序后整表输出的场景正是Array.prototype.sort()的正确归宿——排序结果被完整消费而不是取一个值就扔。对比之后适用边界非常清晰需求正确做法复杂度只要最大/最小元素单趟循环或小数组用Math.min/Math.maxO(n)同时要最值与另一端点单趟循环内双比较O(n)需要完整有序列表sort()配合不可变场景用toSorted()见 js-tosorted-immutableO(n log n)在 React/Next.js 组件中的落地建议结合 Vercel 技能包的使用场景写新组件、评审代码、重构、性能优化这条规则最常见的触发点是列表类数据的派生计算在 Server Component 中从接口返回的数组里挑最新一条展示时用单趟循环而不是sort()[0]在客户端组件中从状态派生最值时把循环逻辑放在useMemo里避免每次渲染都重算在 Table 场景下若某列需要最大值/最小值汇总单趟循环天然比排序更省。由于规则标记为 LOW 影响它属于顺手改掉级别的优化收益不是数量级的但写法更简单、更不易出错且消除了对大型数组隐藏的栈溢出风险——对于管理后台这类常常处理成百上千条数据、又追求 AI 友好与可维护性的模板项目如本仓库的定位是一条性价比很高的编码准则。小结js-min-max-loop的核心可以浓缩为一句话求最值 单趟遍历排序 只需一次永远不要为了取一个元素而排序整个数组。正确实现只要求一次 O(n) 循环、显式处理空数组、在一次遍历内同时完成多个最值计算Math.min/Math.max展开只适合小数组循环写法在任意规模下都可靠。而像 mock API 那样整表排序后分页输出的需求则应当继续放心使用sort()。将这条规则与 vercel-react-best-practices 中同类的js-前缀规则配合使用即可在热路径上积累出可感知的整体性能收益。赞分享前端UI组件【免费下载链接】next-shadcn-dashboard-starterFree, open source, AI-friendly admin dashboard template built with Next.js 16, shadcn/ui, Tailwind CSS, and TypeScript. Production-ready tables, forms, auth, and billing. MIT licensed.项目地址https://gitcode.com/gh_mirrors/ne/next-shadcn-dashboard-starter点击查看免费下载相关推荐MediaGo 前端性能实践用单次循环求最小/最大值替代 O(n log n) 的排序MediaGo 前端性能实践用单次循环求最小/最大值替代 O n log n 的排序 本篇文章解读 MediaGomediago仓库中 .agents/音视频桌面应用后端用循环取代排序求最值OpenMontage 中 O(n) 替代 O(n log n) 的 JavaScript 性能规则用循环取代排序求最值OpenMontage 中 O n 替代 O n log n 的 JavaScript 性能规则 OpenMontage 是一个开源的 a人工智能AI Agent音视频媒体生成工作流自动化Papermark 性能优化指南求数组最小值/最大值请用循环而非排序O(n) vs O(n log n)Papermark 性能优化指南求数组最小值/最大值请用循环而非排序O n vs O n log n 在 Papermark开源 DocSend 替代后端前端企业应用上一篇Serial Studio 热路径基准可观测性分配门禁、宽度旋钮与发布符号化Spec 0084 全解析下一篇ClickHouse v25.8.32.4-lts 版本更新解析字典直连 JOIN 的 use-after-free 修复与 trivial count 优化边界创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考