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..或
.offor，配合文档片段（DocumentFragment）批量插入 - 处理异步操作？
for...of支持await，而map()返回的是 Promise 数组，需Promise.all()等待——选哪个取决于你是串行还是并行执行
.of遍历 DOM 元素时的性能与兼容性要点
DOM 遍历慢的主因常是反复访问 node.parentNode 或 element.children 触发重排/重绘，而非循环本身。应尽量减少 DOM 读写次数，批量化操作。
- 用
querySelectorAll获取静态节点列表后，优先用for或for...of，避免getElementsByClassName等返回实时集合（每次访问都重新查询） - 大量增删节点？先创建
DocumentFragment，所有操作在内存中完成，最后一次性append()到真实 DOM - 监听事件委托优于给每个子元素绑定事件——用一个父级事件处理器代替循环绑定
