在 for 循环中使用 const 作为循环变量

Question

我了解在typescript/javascript 中使用var 和for 循环中的var 和let 的行为，但有人可以解释为什么以及如何将const 变量作为循环变量的行为？

for (const i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i)
  }, 100 * i);
}

据我了解，当您将变量声明为const 并初始化其值时，该值无法更改

但是您可以看到 console.log() 中的值正在更改。编译时必须抛出错误吗？我在这里缺少什么？

我为此行为创建了 2 个示例。

Loop variable as a const

Const variable re assignment

有人可以帮助我理解这一点吗？

Answer 1

它可以在 Stackblitz 中运行，因为它运行的是经过转换的代码：

AppComponent.prototype.test = function () {
    var _loop_1 = function (i) {
        setTimeout(function () {
            console.log(i);
        }, 100 * i);
    };
    for (var i = 0; i < 5; i++) {
        _loop_1(i);
    }
};

如果你在这里添加一个 sn-p 它将不起作用，因为它没有被转译

for (const i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i)
  }, 100 * i);
}

Answer 2

回答您的问题，

  test(){
    for(const i =0 ; i< 5; i++){
      setTimeout(function(){
        console.log(i)
      },100*i);
    }
  }

这段代码基本上变成了，

  test(){

    // can be only initialized once
    const i;
    for(i = 0 ; i< 5; i++){
      setTimeout(function(){
        console.log(i)
      },100*i);
    }
  }

因为每个 JavaScript 变量在其作用域的顶部都是 hoisted，在这种情况下，test() 作为它的 const 变量，这就是为什么它在该块中被提升并且在它之外无法访问的原因。

更正这段代码：

  test(){

    // can be only multiple times in that block
    for(let i = 0 ; i< 5; i++){
      setTimeout(function(){
        console.log(i)
      },100*i);
    }
  }

变成这样，

  test(){

    let i;
    // can be only multiple times in that block
    for(i = 0 ; i< 5; i++){
      setTimeout(function(){
        console.log(i)
      },100*i);
    }
  }

由于const 和let 都具有block scope 并在其定义的块的顶部提升，const 和let 之间的唯一区别是声明为 const 的变量不能重新初始化。