Question

以下代码不是我的代码。有人可以解释吗？我不太了解JavaScript，所以我不太了解。我认为这就是为什么我不理解在for循环中使用let如何使i变量在整个循环的每个循环中都不同的原因？使用var应该做同样的事情。

<html>
  <head>
    <title>buttons - let and Const</title>
  </head>
  <body>
    <h1>Buttons</h1>
    <button>Button 0</button>
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
    <button>Button 4</button>
    <button>Button 5</button>
    <button>Button 6</button>
    <button>Button 7</button>
    <button>Button 8</button>
    <button>Button 9</button>
    <script>
      const buttons = document.getElementsByTagName("button");
      
      for(let i = 0; i < buttons.length; i++) {
          const button = buttons[i];
          button.addEventListener("click", function() {
              alert("Button " + i + " Pressed");
          }); 
      }
    </script>
  </body>
</html>

Answer 1

for循环中let和var之间的关键区别只有在您尝试异步访问变量时才能看到。使用var，变量将被分配一次，并且在每次迭代中，该值将被更改。使用let时，变量将在每次迭代时分配到不同的内存位置，并且先前迭代的值将被复制到新位置。如果您异步访问它，它将引用该内存位置。

 for(var i = 0, test = 0; i < 10; i++) {
   // test: 1, 2, 3 -> the same value gets mutated
   // i: 10, 10, 10-> the same value, the loop already finished
   setTimeout(() => console.log("i", i, "test 1", ++test)); 
 }

for(let i = 0, test = 0; i < 10; i++) {
  // test: 1, 1, 1 -> a new "test" got allocated on each iteration
  // i: 0, 1, 2 -> kept at every iteration
  setTimeout(() => console.log("i", i, "test 2", ++test));
}

Answer 2

let关键字用于声明范围有限的变量。

关于let和var之间的区别，article非常好。

摘自文章：

let使您可以声明变量，该变量的作用域仅限于表达式的语句块，与var不同。

在您的示例中，i仅在for循环的范围内可用。

在for循环中，每次循环中的i变量都不相同

2 个答案: