JS数组遍历思维导图应按“目的—方式—细节”分层：一、目标决定方法（如只读用for/for...of/forEach，生成新数组用map）；二、区分机制（原生循环可控，API不可中断）；三、标注陷阱（如forEach不返回数组、for...in不适用数组）；四、补充稀疏数组与异步遍历方案。
画 JS 数组遍历的思维导图，关键不是堆砌所有方法，而是按“目的—方式—细节”分层呈现，突出常用性、差异点和易错场景。下面直接给出可落地的结构建议，照着画就能覆盖面试和开发中的核心需求。
一、明确遍历目标：你想拿到什么？
这是导图根节点，决定后续分支方向：
-
只读取值：用
for、for...of、forEach -
需要索引 + 值：用
for、for...of配合entries()、或forEach的第二个参数 -
生成新数组：用
map -
筛选元素：用
filter -
累积计算（如求和）：用
reduce -
判断条件是否全部/部分满足：用
every、some
二、区分执行机制：同步 vs 不可中断
这是常被忽略但影响调试的关键层：
-
原生循环（
for、while）：完全可控，可break、continue、修改索引 -
迭代器方法（
for...of、entries()）：基于迭代协议，支持break，但不能跳过某次迭代 -
数组 API（
forEach、map等）：函数式调用，无法用break或return中断整个遍历；想提前退出得改用some/every或抛错（不推荐）
三、标注典型陷阱与兼容性
每个方法旁用小字号标出高频坑点：
-
forEach：不返回新数组（返回undefined），链式调用会断；对空位（sparse array）不触发回调 -
for...in：不推荐遍历数组！它枚举属性名（包括原型链上的），顺序不保证，可能遍历到意外属性 -
map/filter：跳过空位，但保留其位置（结果数组长度不变） for (let i = 0; i ：<font size="2">注意 <code>arr.length是实时读取的，循环中修改数组长度会影响后续迭代
四、补充两个实用分支
让导图更贴近真实开发：
-
稀疏数组处理：用
Array.from(arr)或[...arr]转为稠密数组再遍历；或用arr.keys()显式获取有效索引 -
异步遍历场景：普通遍历方法不支持
await；需用for...of（配合 async iterator）或Promise.all(arr.map(async item => {...}))
