17370845950

JavaScript循环分三类：传统语句型（for/while/do...while）、迭代器驱动（for...of）和函数式遍历（forEach/map/filter等），选择依据是数据结构、是否需中途退出、是否生成新数据及是否操作DOM。

JavaScript 中的循环主要分三类：传统语句型循环（for、while、do...while）、迭代器驱动循环（for...of）和函数式遍历（forEach、map、filter 等数组方法）。高效遍历的关键不在于“用哪种最酷”，而在于匹配数据结构、明确是否需要中途退出、是否要生成新数据，以及是否操作 DOM 元素。

用 for 循环处理确定长度的数组或需精细控制索引的场景

for (let i = 0; i 仍是性能最优、控制最直接的选择，尤其适合需要索引、频繁跳步、或配合 break/continue 提前终止的情况。注意避免在每次循环中重复读取 arr.length——现代引擎已优化，但显式缓存（如 const len = arr.length）在旧环境或超大数组中仍有意义。

• 遍历同时修改原数组？优先反向循环（i = arr.length - 1; i >= 0; i--），避免因删除元素导致索引偏移
• 需要双层嵌套且内层依赖外层索引？for 比 forEach 更易写清楚逻辑
• 遍历类数组对象（如 arguments、NodeList）？先用 Array.from() 或展开语法转成真数组，再用 for...of 或数组方法更安全

用 for...of 遍历可迭代对象（数组、Map、Set、字符串等）并兼顾可读性与兼容性

for...of 直接消费迭代器，语法简洁，自动处理 Symbol.iterator 协议，支持 break/continue，且不暴露索引（除非手动计数）。它比 forEach 更灵活，又比传统 for 更语义化。

• 遍历 Map 时直接解构：for (const [key, value] of myMap)
• 遍历 DOM 节点列表（document.querySelectorAll('div')）？现代浏览器中可直接 for...of，无需转数组
• 注意：for...of 不支持普通对象——对象需用 for...in（慎用，会遍历原型链）或 Object.keys() + for...of

用数组高阶函数处理转换、筛选、聚合类逻辑，提升代码表达力

map、filter、reduce 等不是“替代循环”，而是把常见数据操作抽象为声明式语义。它们天然不可变、易于组合、便于测试，适合纯数据处理。但注意：它们总是遍历全部元素，无法提前退出（some/every 是例外）。

• 只想要满足条件的第一个元素？用 find() 或 findIndex()，比 filter()[0] 或循环加 break 更精准
• 需要边遍历边修改 DOM？避免 forEach + innerHTML 反复重绘；改用 for...of 或 for，配合文档片段（DocumentFragment）批量插入
• 处理异步操作？for...of 支持 await，而 map() 返回的是 Promise 数组，需 Promise.all() 等待——选哪个取决于你是串行还是并行执行

遍历 DOM 元素时的性能与兼容性要点

DOM 遍历慢的主因常是反复访问 node.parentNode 或 element.children 触发重排/重绘，而非循环本身。应尽量减少 DOM 读写次数，批量化操作。

• 用 querySelectorAll 获取静态节点列表后，优先用 for 或 for...of，避免 getElementsByClassName 等返回实时集合（每次访问都重新查询）
• 大量增删节点？先创建 DocumentFragment，所有操作在内存中完成，最后一次性 append() 到真实 DOM
• 监听事件委托优于给每个子元素绑定事件——用一个父级事件处理器代替循环绑定