在JavaScript中循环使用一组元素的最佳方法是什么？

在过去和大多数我目前的项目中,我倾向于使用这样的for循环:

var elements = document.getElementsByTagName('div');
for (var i=0; i

我听说使用"反向"循环更快但我没有真正的方法来证实这一点:

var elements = document.getElementsByTagName('div'), 
    length = elements.length;

while(length--) {
    doSomething(elements[length]);
}


什么被认为是循环JavaScript中的元素或任何数组的最佳实践？


1> Juan Mendes..：
这是我经常使用的一个很好的循环形式.您可以从for语句创建迭代变量,而不需要检查length属性,这在迭代NodeList时特别昂贵.但是,您必须小心,如果数组中的任何值可能是"虚假",则无法使用它.在实践中,我只在迭代不包含空值的对象数组(如NodeList)时使用它.但我喜欢它的语法糖.

var list = [{a:1,b:2}, {a:3,b:5}, {a:8,b:2}, {a:4,b:1}, {a:0,b:8}];

for (var i=0, item; item = list[i]; i++) {
  // Look no need to do list[i] in the body of the loop
  console.log("Looping: index ", i, "item" + item);
}


请注意,这也可以用于向后循环(只要您的列表没有['-1']属性)

var list = [{a:1,b:2}, {a:3,b:5}, {a:8,b:2}, {a:4,b:1}, {a:0,b:8}];

for (var i = list.length - 1, item; item = list[i]; i--) {
  console.log("Looping: index ", i, "item", item);
}


ES6更新

for...of给你的名字,但不是索引,自ES6以来可用 

for (let item of list) {
    console.log("Looping: index ", "Sorry!!!", "item" + item);
}

        
@sudopeople只是为了100%准确,当项目不存在时,它返回'undefined`这是假的. 

2> PhiLho..：
请注意,在某些情况下,您需要以相反的顺序循环(但是您也可以使用i--).

例如,有人想使用new getElementsByClassName函数循环给定类的元素并更改此类.他发现两个元素中只有一个被改变了(在FF3中).

那是因为该函数返回一个实时NodeList,从而反映了Dom树中的变化.以相反的顺序走列表避免了这个问题.

var menus = document.getElementsByClassName("style2");
for (var i = menus.length - 1; i >= 0; i--)
{
  menus[i].className = "style1";
}


在增加索引进度时,当我们询问索引1时,FF检查Dom并使用style2跳过第一个项目,它是原始Dom的第2个,因此它返回第3个初始项目!

        
一个好点,虽然我不建议动态更改className,因为它强制浏览器重新计算整个文档的呈现... 

3> 小智..：
我喜欢这样做:
 
var menu = document.getElementsByTagName('div');
for (var i = 0; menu[i]; i++) {
     ...
}


每次迭代都没有调用数组的长度. 

        
只要确保你没有开始在数组上使用它,其中null,undefined,false,0,""是有效的元素! 

4> Per Hornshøj..：
冒着被大吼大叫的风险,我会得到一个像jquery或者原型这样的javascript助手库,它们将逻辑封装在漂亮的方法中 - 两者都有一个.each方法/迭代器来做 - 并且他们都努力使它跨浏览器兼容

编辑:这个答案发布于2008年.今天存在更好的结构.这种特殊情况可以用a来解决.forEach.

        
老实说,jQuery只是为了处理循环？疯狂. 
为什么要使用库来执行简单的任务？ - ) 
我知道我知道.我只想包括jquery以最小化引入跨浏览器不兼容问题的风险.你在'doSomething'中不需要很多代码就可以明确地引入其中一个错误. 
写这个问题可能没问题.它现在已经过时了,因为大多数浏览器(IE9 +)都支持[Array.prototype.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#AutoCompatibilityTable) 

5> Adam Bellair..：
我认为使用第一种形式可能是要走的路,因为它可能是迄今为止已知宇宙中最常见的循环结构,并且因为我不相信反向循环可以在实际中节省你的任何时间(仍在增加/递减和每次迭代的比较).  

其他人可识别和可读的代码绝对是件好事.

        

6> 小智..：
我之前遇到过与document.getElementsByClassName()类似的问题.我当时不知道节点列表是什么.

var elements = document.getElementsByTagName('div');
for (var i=0; i

我的问题是我希望元素是一个数组,但事实并非如此.nodelist Document.getElementsByTagName()返回是可迭代的,但你不能在其上调用array.prototype方法.

但是,您可以使用nodelist元素填充数组,如下所示:

var myElements = [];
for (var i=0; i

之后,您可以随意调用.innerHTML或.style或类似元素的内容.

        

7> roenving..：
我也建议使用简单的方法（KISS！-）

-但是可以找到一些优化，即不要多次测试数组的长度：

var elements = document.getElementsByTagName('div');
for (var i=0, im=elements.length; im>i; i++) {
    doSomething(elements[i]);
}