直接用 flat(infinity) 配合不可变更新可最小化宿主上下文切换；它原生实现、无中间数组、支持内联与向量化优化，应前置扁平化时机并配合 usememo 缓存引用以减少重渲染。
直接用 flat(Infinity) 配合不可变更新，就能把宿主上下文切换降到最低。
优先用 flat() 替代手写递归或 reduce
每次手动递归、reduce + 递归或迭代展开，都会触发多次函数调用栈进出、临时数组创建和内存分配——这些操作在高频列表（如虚拟滚动、实时搜索建议、聊天消息流）中会频繁触发 V8 的上下文切换和垃圾回收。而 flat(Infinity) 是原生 C++ 实现，单次调用完成全部展开，无中间态、无多余闭包、不产生中间数组（除最终结果外），V8 可对其做内联与向量化优化。
- ✅ 推荐写法：
const flatList = sourceData.flat(Infinity); - ❌ 避免写法：
sourceData.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), [])（多层 call stack + 多次 concat 分配）
扁平化时机前置，避免渲染中动态计算
高频列表交互（比如下拉加载、关键词过滤、排序重排）往往伴随重复渲染。若每次 render 都调用 .flat()，即使它很快，也会在 JS 主线程上抢占调度资源，导致 UI 帧丢弃。应将扁平化移出组件 render 函数，放在数据源变更的源头处理：
Preqstation
下载
一款AI工具，主要用于将PREQSTATION编码任务委派给Claude Code、Codex CLI或Gemini CLI，采用PTY安全执行（工作目录+后台+监控），适合需要提升相关任务效率的用户。
- API 响应后立即扁平化并缓存（例如用
useMemo或状态管理中的 selector） - 对树形菜单/评论嵌套等结构，在数据入 store 时就完成
.flat(Infinity)，后续所有消费方直接读取一维数组 - 避免在
map()渲染循环里调用item.children?.flat(Infinity)—— 这会让扁平化随 item 数量线性放大
配合结构稳定策略，减少 diff 开销
扁平化本身不改变元素引用，但若每次返回新数组（flat() 总是返回新数组），React/Vue 等框架会因数组引用变化触发整列重渲染。解决方法不是禁用 flat，而是控制“何时生成新引用”：
- 用
useMemo(() => data.flat(Infinity), [data])，确保仅当原始数据变更时才重新计算 - 对深层嵌套但内容稳定的结构（如省市区三级数据），可首次扁平化后 memoize 引用，后续复用
- 如需保留原始嵌套路径信息（如用于 expand/collapse），可在扁平化同时注入
path字段，避免渲染时再根据索引反查层级 —— 这样一次扁平+增强，换来后续零计算
兼容旧环境时用轻量 polyfill，别 fallback 到递归
若必须支持 IE 或低版本安卓 WebView，不要回退到手写深度递归（易栈溢出、无尾调优化）。推荐使用 MDN 官方 flat polyfill 或 Lodash 的 flattenDeep（C 语言级优化的 while 循环实现），它们规避了函数调用开销，且对稀疏数组、空位处理行为与原生一致，上下文扰动更小。
