for循环代码块底层工作原理：变量迭代与内存管理解析

首先明确你提到的性能差异核心：forEach这类迭代方法每次迭代都会调用回调函数，而函数调用必须创建新的执行上下文（包含作用域链、this绑定、变量环境等），执行完还要销毁上下文，这部分额外开销就是它比for循环慢的主要原因——而for循环全程在同一个执行上下文里完成所有迭代，没有这些额外开销。

接下来逐个解答你的问题：

1. for循环的代码块如何工作？ #

for循环的所有逻辑（初始化语句、条件判断、递增/递减操作、代码块）都属于当前执行上下文的一部分，不会为每次迭代新建上下文。比如：

function loopDemo() {
  for (let i = 0; i < 3; i++) {
    const num = i * 2;
    console.log(num);
  }
}
loopDemo();

调用loopDemo时创建一个执行上下文，整个for循环的过程都在这个上下文里运行：

• 先执行初始化语句let i=0
• 检查条件i<3，成立则进入代码块
• 代码块内的操作（声明num、打印）都在当前上下文的变量环境中完成
• 执行递增操作i++，再重复条件判断，直到不成立退出循环

2. 前一次迭代的代码块变量会发生什么？ #

这取决于变量的声明方式：

• 用var声明的变量：var是函数级/全局作用域，所以整个循环里只有一个变量实例，每次迭代是直接覆盖它的值。循环结束后，这个变量会保留在当前上下文的变量环境中，直到上下文被销毁（比如函数执行完毕）。
• 用let/const声明的变量：let/const是块级作用域，每次迭代会创建一个独立的绑定（可以理解为变量环境里的一个新条目）。当某次迭代结束后，这个绑定不再被引用（除非有闭包捕获它，比如setTimeout回调），JS引擎的垃圾回收器会标记它为可回收，在合适时机释放对应的内存。

3. 相同变量在每次迭代中如何重建？ #

还是分两种情况：

• var声明：不存在“重建”，始终是同一个变量，每次迭代只是更新它的值。比如for (var i=0; i<3; i++)里的i，全程都是同一个内存地址的变量。
• let/const声明：以for (let i=0; i<3; i++)为例，JS引擎会在循环初始化时，为每个迭代预分配独立的i绑定。每次迭代时，新的i绑定会继承上一次迭代的终值（比如第一次迭代后i变成1，第二次迭代的i就是基于这个值初始化的），但它们是完全独立的绑定——这也是为什么用let的for循环里，闭包能捕获到每个迭代的i值。

4. 这种情况下内存如何运作？ #

for循环全程只有一个执行上下文，所有变量都存储在这个上下文的变量环境中：

• 对于var变量：占用固定的内存空间，循环过程中只是更新值，不会新增内存开销。
• 对于let/const的块级变量：每次迭代新增一个绑定，但这些绑定都在同一个上下文内，不会像函数上下文那样频繁创建销毁。当迭代结束且没有闭包引用这些绑定，垃圾回收器会一次性清理掉这些不再使用的绑定内存。

对比forEach：每次回调函数调用都会创建新的执行上下文，压入调用栈，执行完弹出并销毁上下文。虽然垃圾回收也会处理这些上下文的变量，但上下文的创建、压栈、出栈本身就有额外的内存和性能消耗，这也是for循环性能更优的核心原因。

内容的提问来源于stack exchange，提问作者forty5