17370845950

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、触发事件。

• 它自动绑定作用域，避免老式 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 是螺丝刀——工具箱里都该有，但拧螺丝时硬塞扳手，只会把头拧歪。