JavaScript for循环中const声明迭代变量i为何无法正常运行？

对for循环迭代变量副本机制的触发逻辑存在认知偏差，const场景下的报错和「是否为每次迭代生成新副本」没有关联，错误触发在副本创建之前的自增环节。

先明确三段式for循环的执行顺序 #

常用的带初始化、条件判断、更新表达式的C风格for循环，执行逻辑是固定的：

1. 循环启动前仅执行一次初始化语句，创建迭代变量的初始绑定
2. 每一轮迭代按以下顺序执行：
   • 运算条件判断表达式，结果为false则直接终止循环
   • 执行当前轮次循环体内的所有代码
   • 执行更新表达式（比如例子里的i++）
   • 进入下一轮迭代

let迭代变量的副本机制本质 #

当你在for循环初始化位置用let声明迭代变量时，JS引擎会做特殊处理：每一轮迭代正式启动时，都会为当前轮创建一个全新的i绑定，把上一轮更新后的值拷贝到这个新绑定上。循环体内定义的闭包，捕获的就是当前轮次专属的独立i，这也是let版本能正确输出索引和元素的根本原因。
需要注意：这个逐轮创建新绑定的逻辑，是在每轮迭代最开始执行的，第一轮迭代根本不会触发这个逻辑——第一轮用的就是初始化阶段创建的那个i。

const版本报错的直接原因 #

const声明的变量存在硬性约束：声明时必须初始化，且初始化后不允许重新赋值。
三段式for循环里写const i = 0时，初始化阶段创建的i是不可修改的常量。第一轮循环体执行完后，引擎会执行更新表达式i++，这个操作本质等价于i = i + 1，属于对常量i的重新赋值，直接触发Assignment to constant variable错误。此时第一轮迭代都没跑完，根本到不了下一轮创建新i副本的环节。

补充：const不是完全不能在for循环里用 #

如果是for...of/for...in这类迭代语法，头部用const声明迭代变量是完全可以正常运行的：

const arr = [10, 12, 15, 21];
// 以下代码可正常输出正确结果，不会报错
for (const idx of arr.keys()) {
  setTimeout(() => {
    console.log('Index: ' + idx + ', element: '+ arr[idx]);
  }, 3000)
}

原因是这类循环不存在手动执行更新表达式给迭代变量重新赋值的逻辑：每一轮迭代都会直接创建新的const绑定，绑定当前遍历到的值，全程没有对const变量的重赋值操作，自然不会报错，闭包也能正常捕获每轮的独立值。

附：问题中提到的两段参考代码 #

• 正常运行的let版本

const arr = [10, 12, 15, 21];
for (let i = 0; i < arr.length; i++) {
  setTimeout(function() {
  console.log('Index: ' + i + ', element: '+ arr[i]);
  }, 3000)
}

• 触发报错的const版本

const arr = [10, 12, 15, 21];
for (const i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log('Index: ' + i + ', element: '+ arr[i]);
  }, 3000)
}

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