循环内的Javascript变量声明

Question

我有一个近乎强迫的习惯，但我认为可能完全没有必要。使用如下代码：

function abc(){
  var a,b;
  for(var i=0;i<10;i++){
    a=document.getElementsByTagName('LI').item(i).width;
    b=document.getElementsByTagName('DIV').item(i).width;
    // now do something with a and b
   }
   return;
}

我强迫性地在循环之前声明变量，而不是：

function abc(){
  for(var i=0;i<10;i++){
   var a=document.getElementsByTagName('LI').item(i).width;
   var b=document.getElementsByTagName('DIV').item(i).width;
    // now do something with a and b
   }
   return;
}

请注意，在第二个代码块中，我在每次循环迭代时使用var 定义变量。我想第一个是可读性等方面的最佳实践。但有时我只是在破解一些东西，不需要遵循最佳实践。

我的问题是：

是否有任何理由不定义将在循环内使用 var 关键字重新定义的变量？

Answer 1

由于 Javascript 中的变量提升，var 位于函数顶部或 for 循环内部之间的执行没有技术差异。如果这就是你所关心的，那么你可以做到这一点。

只是为了刷新内存，Javascript 提升意味着像你的第二个代码块这样的代码被解析然后像你的第一个代码块一样执行。函数内的所有var 声明在执行前都会自动移动到函数作用域的顶部。对这些变量的赋值保留在代码中它们所在的位置——只是移动了变量的声明。

因此，区别更多在于您希望编码的外观。当您将var 定义放在for 循环中时，它使代码看起来像是在为for 循环的每次迭代重新创建变量，即使情况并非如此。每次循环迭代都会为它们分配一个值，但不会创建一个新变量。如果您使用let 而不是var 就会出现这种情况，因为let 具有块作用域，而var 仅具有函数作用域。

一般来说，最好只将代码放入实际需要在循环中的循环中。虽然无论 var 是在循环内部还是外部，它实际上并不会改变执行中的任何内容，但这只是一种良好做法的一部分，而在循环内部或外部的其他代码可能会有所不同。

在你的情况下，我认为这是一个更好的做法：

function abc(){
  var liTags = document.getElementsByTagName('LI');
  var divTags = document.getElementsByTagName('DIV');
  var len = Math.min(liTags.length, divTags.length);
  var a,b;

  for(var i = 0; i < len; i++){
    a = liTags[i].width;
    b = divTags[i].width;

    // now do something with a and b

   }

   return;
}

在这里，您已经从循环中删除了对 document.getElementsByTagName() 的两个调用，这将产生巨大的性能差异。

---

2017 年更新。 Javascript 版本 ES6，现在支持 const 和 let 声明变量。它们是块范围的，而不是像var 这样的函数范围，因此如果您在for 循环块中声明其中一个，那么将为for 循环的每次调用创建一个新的单独变量。虽然这不会对您显示的代码类型产生任何显着的执行差异，但如果您在循环内有异步代码引用您声明的变量，它可能会产生差异。在循环体中使用const 或let 的情况下，每个异步调用都会获得自己单独的变量副本，这有时会非常方便。

  for(var i = 0; i < len; i++){
      let a = liTags[i].width;
      let b = divTags[i].width;
      
      $.get(someUrl).then(function(data) {
          // each call to $.get() here in the loop has it's own a and b
          // variables to use here, which would not be the case with var
      });

   }

Answer 2

我知道这个答案对您的问题没有帮助，它只是一个建议，但我认为当您要访问多个变量时，将变量放入 DOM 元素是一个好习惯时间。这样做可以避免每次都遍历所有 DOM。

function abc() {

  var a = document.getElementsByTagName('LI'),
      b = document.getElementsByTagName('DIV');

  for ( var i = 0; i < 10; i++ ) {

    a.item(i).width;
    b.item(i).width;
    // now do something with a and b

   }

   return;

}