跳转到主内容
极星编程网:以代码为星,赴技术山海!

javascript循环有哪些类型_for和forEach怎么选

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、触发事件。 Eclipse导入Android或其他的JAVA项目的正确方法 WORD版 本文档主要讲述的是Eclipse导入Android或其他的JAVA项目的正确方法;希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过来看看 下载 立即学习 “ 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
是螺丝刀——工具箱里都该有,但拧螺丝时硬塞扳手,只会把头拧歪。

相关文章