程序使用array.forEach正常但for循环异常，且forEach重复输出元素的原因咨询

1. 为什么forEach会让每个元素重复输出3次？ #

这种情况最常见的原因是你的forEach代码块被执行了3次，而非forEach本身的迭代逻辑出问题。给你列几个典型触发场景：

• 这段forEach代码被放在了会重复触发3次的回调里：比如DOM事件绑定了多次（比如button.addEventListener('click', ...)被调用了3次），或者像React的useEffect没加依赖数组，导致组件每次渲染都执行一遍forEach循环。
• 你的数组本身被重复填充了3组相同元素？不过结合你说的“每个元素重复输出3次”，前者的概率更高——整个forEach循环完整跑了3遍。

你可以先做个简单验证：在forEach代码块外面加一行打印，比如：

console.log("forEach循环开始执行");
array.forEach(element => {
  console.log(element);
});

如果控制台出现3次forEach循环开始执行，那就实锤是代码块被重复调用了。

另外还有种少见情况：在forEach迭代过程中你不小心修改了原数组（比如往数组里追加元素），但这种情况通常会导致迭代次数远超预期，而非刚好每个元素重复3次，所以概率较低。

2. 逻辑相同的for循环无法正常输出？ #

既然forEach能正常输出，说明数组本身是有内容的，for循环出问题大概率是循环逻辑的细节写错了，给你列几个高频坑点：

（1）var声明循环变量导致的异步问题 #

如果你的for循环里包含异步操作（比如setTimeout、网络请求），用var声明的i会因为变量提升共享同一个作用域，导致异步回调执行时i已经变成了数组长度，最终输出undefined：

// 错误示例
for(var i = 0; i < array.length; i++){
  setTimeout(() => {
    console.log(array[i]); // 最后全输出undefined
  }, 100);
}

而forEach每次迭代都会创建独立作用域，捕获当前的element，所以不会有这个问题。解决办法很简单：把var换成let，或者用立即执行函数包裹循环体。

（2）循环边界条件写错 #

比如不小心写成i <= array.length（会导致最后一次迭代访问array[array.length]，也就是undefined），或者初始化i = 1（直接跳过第一个元素），又或者循环体内修改了array.length，导致循环提前结束或无限循环。

（3）数组被意外修改 #

如果在for循环里修改了原数组（比如array.splice(i, 1)），会导致数组长度变化，后续索引直接错位。比如删除元素后i++会跳过下一个元素，而forEach内部会自动处理数组长度变化（不过也不推荐在forEach里修改原数组）。

如果能把你的for循环代码贴出来，能更精准定位问题，但先排查上面这几个常见场景，应该就能解决啦。

内容的提问来源于stack exchange，提问作者JarsOfJam-Scheduler