时间戳

首页 > 解决方案 > 在 for 循环中，i 变量每次通过循环都是不同的

javascript - 在 for 循环中，i 变量每次通过循环都是不同的

问题描述

下面的代码不是我的代码。有人可以解释一下吗？我不太了解 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>

标签： javascript

解决方案

仅当您尝试异步访问变量时，才能看到 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));
}

推荐阅读