JavaScript安全遍历数组的只有for、for...of和forEach；for...in专用于对象，用于数组会遍历原型链且顺序不保证。
JavaScript 有哪些遍历循环？别混用对象和数组的语法
JS 里真正能「安全遍历数组」的只有 for、for...of 和 forEach；for...in 是专为对象设计的，用在数组上会踩坑——它会遍历原型链上的方法（比如你给 Array.prototype 加了 sum()，它也可能被遍历出来），且索引顺序不保证。
-
for：手动控制索引，最老但最稳，兼容所有环境 -
for...of：ES6+，直接拿到元素值，支持break/continue，推荐作为默认选择 -
forEach：只能用于数组（或类数组需Array.from()转换），回调函数内无法中断整个遍历 -
for...in：只该用在普通对象上，数组慎用；真要用必须加hasOwnProperty判断，还挡不住 Symbol 属性
for 和 forEach 性能差多少？大数据量时别心软
处理 10 万条以上数据时，for 循环通常比 forEach 快 2–5 倍。不是玄学——forEach 每次迭代都要创建函数执行上下文、绑定 this、传入三个参数（item, index, array），而 for 就是纯索引访问 + 条件判断，几乎没有额外开销。
- 日常小数组（
- 渲染列表、批量计算、Canvas 像素操作等高频场景：坚持用
for或for...of - 如果用了
forEach还在里面写await或复杂逻辑，性能雪崩风险更高（函数调用栈叠加）
const bigArr = new Array(100000).fill(0);// ✅ 快，可控 for (let i = 0; i < bigArr.length; i++) { bigArr[i] = i * 2; }
// ❌ 慢，且无法中途跳出 bigArr.forEach((_, i) => { bigArr[i] = i * 2; });
什么时候必须用 for？别让 forEach 把你卡死
forEach 看似简洁，但只要出现以下任一需求，它就无解，必须切回 for 或 for...of：
- 需要提前终止遍历（比如找到第一个匹配项就
break）——forEach的return只跳过当前项，不会停掉整个循环 - 要反向遍历（
i = arr.length - 1; i >= 0; i--） - 需要隔项处理（
i += 2）或动态调整步长 - 循环中要修改原数组长度（如
splice），forEach的内部索引机制会漏项或重复
const nums = [1, 2, 3, 4, 5];// ✅ 找到 3 就停，输出 1 2 for (let i = 0; i < nums.length; i++) { if (nums[i] === 3) break; console.log(nums[i]); }
// ❌ 下面会输出全部 5 个数，return 不起作用 nums.forEach(num => { if (num === 3) return; // ← 仅退出本次回调 console.log(num); });
forEach 的唯一不可替代场景：副作用明确、无流程控制需求
当你的目标只是「对每个元素做点事，且不依赖返回值、不关心顺序中断、也不改数组本身」时，forEach 最干净。比如日志上报、DOM 批量添加 class、触发事件。
立即学习“Java免费学习笔记（深入）”；
- 它自动绑定作用域，避免老式
var+setTimeout的闭包陷阱 - 支持第二个参数指定
this，适合配合对象方法使用 - 语义清晰：“我只遍历，不决策”——团队协作时意图更明确
const buttons = document.querySelectorAll('button');
const handler = {
prefix: 'btn-',
click() { console.log('clicked'); }
};
// ✅ this 指向 handler，且每个 button 都绑定 click
buttons.forEach(function(btn) {
btn.classList.add(this.prefix + 'active');
btn.addEventListener('click', this.click.bind(this));
}, handler);
真正卡住人的，从来不是“哪个更快”，而是“哪个能表达我的控制意图”。for 是扳手，forEach 是螺丝刀——工具箱里都该有，但拧螺丝时硬塞扳手，只会把头拧歪。
